78

In MS Visual Studio Express 2013 for Windows Desktop:

I'm learning C# and following an example that shows how to create a user interface in a .xaml file. https://msdn.microsoft.com/en-us/library/jj153219.aspx

It appears from the tutorial (see Figures 7 & 8) that there should be some windows showing the GUI. However, when I try to open the .xaml file in the Solution Explorer, View Code (Ctrl + Alt + 0) and View Designer (Shift + F7) both present the same thing: just the code. How do I open up the GUI box?

Update -- Here are the .xaml file contents. Note: I'm trying to open a new C# WPF Application. This is the stock code that Visual studio produces.

<Window x:Class="WpfEvents.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

enter image description here

No XAML UI Designer option: enter image description here

No Full XAML View Setting: enter image description here Thanks!

This is the version of Visual Studio that I downloaded. The description leads me to believe that the XAML UI Designer should be installed and that this shouldn't be an issue.

Express 2013 for Windows Desktop

Visual Studio Express for Windows Desktop lets you take full advantage of Windows with XAML designers, a productive IDE, and a variety of programming languages including C#, Visual Basic, and C++. Choose between Windows Presentation Foundation (WPF), Windows Forms, and Win32, to target the Windows desktop with the right technology for your application and your skills.

10
  • You may have malformed XAML, so the editor can't determine its a visual designer file. Please post the XAML content so we can help determine why.
    – Ron Beyer
    May 7, 2015 at 2:09
  • At the bottom of the window showing the XAML, there should be 2 tabs labeled XAML, and Design. Click the Design tab and see if that fixes the issue. May 7, 2015 at 2:10
  • The code you see, is it XAML or C#? May 7, 2015 at 2:13
  • image added to show what I am looking at.
    – P3d0r
    May 7, 2015 at 2:17
  • your view is missing buttons, there should be tabs on the lower left corner and 3 little buttons on the lower right corner May 7, 2015 at 2:26

25 Answers 25

74

Tools>Option>XAML Designer and enable XAML Designer worked for me. enter image description here

PS: By default it is enabled. I disabled it due to VS performance issue and forgot about this change and end up facing same issue when I started working on WPF project.

6
  • 30
    To add to this, my ReSharper "Performance Guide" (under options) had "Disable XAML Designer" set to "Fix Silently", causing it to be disabled automatically. I changed it to "Ignore" and now it is enabled again. Mar 4, 2018 at 17:25
  • @ub3rst4r Thanks for that. I enabled the third time and was wondering what's wrong. May 14, 2018 at 12:13
  • @ub3rst4r, thanks, indeed ReSharper was disabling it too in my case.
    – Kosmo
    May 24, 2018 at 8:46
  • 1
    Resharper (in voice of Bill Lumbergh from Office Space): "Hello, Developer. (sigh) Whaaat's haaappening? Ummm, I'm gonna need you to go ahead and use Visual Studio without your XAML Desiiiigner. So, if youuu could al-low us to - silently auto-diiiisable that option in your Visual Stuuuudio and leave it off, that would be great. Mmmkay?"
    – Tom
    Oct 5, 2018 at 20:17
  • This solution is undervoted but solved my problem: stackoverflow.com/a/30090975/196210
    – Revious
    Nov 16, 2019 at 11:13
26

XML designer can be disabled by Resharper in Resharper > Options > Performance Guide
I fixed my problem by turning off Resharper block, and restoring XML designer in Tools > Options

2
  • 4
    Resharper (in voice of Bill Lumbergh from Office Space): "Hello, Developer. (sigh) Whaaat's haaappening? Ummm, I'm gonna need you to go ahead and use Visual Studio without your XAML Desiiiigner. So, if youuu could al-low us to - auto-diiiisable that option in your Visual Stuuuudio and leave it off, that would be great. Mmmkay?"
    – Tom
    Oct 5, 2018 at 18:55
  • Did I miss something or could it be that Resharper isn't part of the question? Oct 17, 2022 at 5:46
24

I believe you are looking for XAML Designer and it can be loaded from here:

I am using Microsoft VS Community 2015 (final update)

(screenshot)Microsoft Visual Studio Community 2015

18

In VS2017 v15.8.9 I found the designer wasn't displaying e.g. when right clicking in a xaml view's code pane and selecting View Designer.

Performing the following resolved it for me: I went into Tools > Options > XAML Designer and the Enable XAML Designer option was ticked. So, I unticked it, clicked Ok on the Options dialog to close it.

I exited and restarted Visual Studio and again went into Tools > Options > XAML Designer, ticked the Enable XAML Designer, clicked Ok, restarted Visual Studio, and it's now working.

0
13

I am not sure if I should post the answer here because it may not apply for VS Express 2013.

I have exactly the same problem using Visual Studio 2015 Community Edition. It turns out my project Target version is higher.

Try the following:

  • Right click on your project in solution explorer.
  • Change the Target version to Windows 10 (10.0; Build 10240).

Let me know if it is not relevant and I will delete my answer.

Cheers, Sam

12

Problem: XAML UI Designer not showing

Solutions: (different from and much more elegant than my earlier solution)

  1. Click on the Solution file (.sln) in the Solution Explorer, if the .sln file is listed in the Solution Explorer
  2. Click on the Expand Pane icon to display the Design pane, if it's shown

Solution 1: Open the .sln file:

My project is cloned from a git repository. When I open it from the Start Page it opens up with a whole list of files in the Solution Explorer. If I open any of the .xaml files from that Solution Explorer they open with a XML editor which doesn't show the graphical XAML view.

At the very bottom of the Solution Explorer is a .sln (solution) file. Opening that file then loads the file list I'm used to. If any .xaml files are open they will not have access to the Design view. Opening them and closing them at this point will load the Design view. If the Design view still doesn't appear see Solution 2 immediately below. Solution .sln in Solution Explorer


Solution 2: Click on Expand Pane:

At the bottom of the XAML editor window you may see a small icon with a double arrow (Expand Pane). If you do, it means that you've hidden the Design Pane. Click it and you should get the Design Pane back.

Expand Pane


Version: Visual Studio 2017

Type of project: C# and WPF targetting .Net 4.5.2 with Console Application as the Output Type (for trouble-shooting purposes I've got it both as a WPF and a Console Application).

Problem Details:

I pulled a project I was working on from a git repository onto the problem computer (using all of Microsoft's in-built software and accounts). It was cloned successfully onto the problem computer and Visual Studio worked. After a pull from the repo the XAML UI Designer (Blend?) disappeared leaving me with only the XAML source.

An earlier solution I came across was to delete the source directory from my local computer and pull a fresh clone of the project. That fixed my problem, however, now I've played with it and found two other reasons my XAML Design View was missing. I imagine that I didn't need to delete the folder and that these two solutions would've been sufficient.

1
  • 1
    Solution 1 worked for me. I tried many others before I found yours. How did you ever figure this out? It is the craziest thing I have seen in VS and there have been some weird ones. Undying gratitude.
    – Mary
    Feb 17, 2019 at 19:32
6

For some reason it used "(XML) Text Editor" as the default editor for XAML, to fix this you should right-click your file in the solution explorer then select "Open with.." and select "XAML UI Designer"

Open with...

4
  • Check image in update. There is no option for XAML UI Designer.
    – P3d0r
    May 7, 2015 at 3:05
  • Sorry, I saw the edit in the question now, if you don't have XAML UI Designer then your visual studio is missing this part of installation, I'm using visual studio Community so it came in the default installation, not sure how it is for the Express May 7, 2015 at 3:40
  • Looking at the Visual Studio Express for Windows Deskop page, visualstudio.com/en-us/products/visual-studio-express-vs.aspx, it sure sounds like there should be the XAML Designer. Is there a different way to install this functionality?
    – P3d0r
    May 7, 2015 at 16:57
  • Best answer of all!! Kudos
    – NikSp
    Sep 19, 2020 at 8:18
6

It usually happens when you are building WPF app in .Net core (3.0). For me changing below option worked.

  1. Go to Tools => Options
  2. Under "Environment" click on option "Preview Feature".
  3. Enable "Use previews of the .Net core SDK (require restart)".
  4. Now restart visual studio.

enter image description here

4

The XAML Previewer has been deprecated in Visual Studio 2019 version 16.8 and Visual Studio for Mac version 8.8, and replaced by the XAML Hot Reload feature in Visual Studio 2019 version 16.9 and Visual Studio for Mac version 8.9. You can use xaml hot reload instead.

1
3

I had same issue - until I realized these buttons here.. see screenshot.

enter image description here

2

Confirming Sam's answer for VS 2015; VS seems to have a reproducible feature: 1. Create a new solution (Windows Universal, say) 2. Create a new XAML view page in that solution 3. If Designer won't load on that page, do what Sam says: Right click on your project in solution explorer and Change the Target version to Windows 10 (10.0; Build 10240). I had the same issue on a project, created a new test solution to explore the issue, and had the same problem. Sam's fix worked.

2

As of now, a designer has not been created for projects targeting .NET Core 3.

2

i also encountered same issue on Visual Studio 2019. i solve the problem with switching view.

you can switch the view with Switch Views button next to home button in Solution Explorer. you should choose .sln section.

1

Most probably its set not to open the XAML in full XAML view. Try this

  1. First click Tools > Options
  2. Navigate to Text Editor > XAML > Miscellaneous
  3. Uncheck the box that says Always open document in full XAML view.
  4. Click OK, close the Options box and try opening again

If you don’t see Text Editor in the Options menu, check the box Show all Settings in the bottom left of the Options window.

5
  • 4
    see image added in edit. I'm not seeing the 'Always open document in full XAML view.'
    – P3d0r
    May 7, 2015 at 3:05
  • 1
    you don't see that option inside other menu's - like General - too? May 7, 2015 at 3:07
  • 1
    No I don't see it anywhere else.
    – P3d0r
    May 7, 2015 at 10:49
  • 1
    @SaagarEliasJacky There is no option like you said Jul 10, 2016 at 18:41
  • 2
    Always open document in full XAML view. <- there is no such option in Visual Studio 2017 Aug 3, 2017 at 11:54
1

I have no idea what the issue was, but uninstalling and re-installing the same software did the trick.

Interesting

1

FYI: This is a brute force method. I posted a much cleaner solution to my problem in a different answer.

Problem: XAML UI Designer not showing while using a git repository

Solution: Delete and recreate the project directory in %USERPROFILE%\source\Repos.


Steps:

  1. Delete the project directory from %USERPROFILE%\source\Repos using File Explorer
  2. Choose Checkout from Visual Studio Team Services on the Start Page
  3. Pull the project again

    Warning: make sure your files are backed up!


Version: Visual Studio 2017

Type of project: C# and WPF targetting .Net 4.5.2 with Console Application as the Output Type (for trouble-shooting purposes I've got it both as a WPF and a Console Application).

Problem Details:

I pulled a project I was working on from a git repository onto the problem computer (using all of Microsoft's in-built software and accounts). It was cloned successfully onto the problem computer and Visual Studio worked. After a pull from the repo the XAML UI Designer (Blend?) disappeared leaving me with only the XAML source. The solution (after trying some of the others listed here) was to delete the source directory from my local computer and pull a fresh clone of the project.

Hint:

Deleting and re-creating the project may work for other cases as well. YMMV.

1

This is my situation but might not apply to yours: I had the same issue but the fix is simple. Somehow my program is still running even I closed my WPF window. I have to stop debugging and then the designer page will automatically show up for me. Hope this works.

1

I know this is an old topic but my solution might help someone in the future.

I ran into the same problem with Visual Studio 2015 Community on Windows 7, where one of my xamarin android project's xaml files stopped showing the Designer tab below the XAML code, the other day.

I tried all the given solutions with no effect however, following in the footsteps of @Waqas, i found out that "Use quadrant based layout" was unchecked while other checkboxes were ticked. To summarize:

VS 2015 community>Tools>Option>XAML Designer> check Use quadrant based layout

I then quit and restarted Visual Studio to find out the Designer tab to be there at the bottom left of the XAML code, alongside the Source tab. HTH.

1

What helped me was just like many other problems with Xamarin designer, close all tabs, clean solution, delete bin and obj folders, rebuild the solution

1
  • I am not using Xamarin, but doing this was the solution Jul 13, 2021 at 22:43
1

I ran through every solution in this post - apparently what I'd been missing is that I'd totally forgotten what the designer tab looked like.

When opening the XAML file, it always defaulted to code view no matter what (even after Repair), but sure enough, there was a small icon in the top right of the XAML code view that switched it to Design view.

sigh

1

Well this is an old post but I just found another way the designer can hide even when it is configured correctly in VS2019. So here is what happened to me:

XML designer was enabled and all should have worked except the designer was not showing....except it was, just hidden away in a split view slider that had zero width! I can only presume this was because I change monitors a lot on my PC and have resizing of windows going on quite often between monitors of different resolutions.

At any rate search around in the dark on dark nothing around the xml view, grab the split view slider and slide and the designer will show up in no-zero size in the real world....

1

I had this issue and was able to fix it by uninstalling visual studio AND deleting the Visual Studio folder in my Program Files. Apparently after uninstalling there are still some remaining folders.

My case might have been a bit special though. I have a small C drive and visual studio was always installing files there no mater what I did to change the install dir, so I created a symlink to force it to install to a different directory. That worked, but much later I had to reinstall VS and the symlink was causing an installation error, which prevented some components from installing. So yeah hope this helps

1

There is a hidden folder ".vs" in the same folder where the solution file is.

Deleting this ".vs" folder might help.

Visual Studio will automatically re-generate this file the next time the solution is opened.

0

I had the same problem for a different reason. I had excluded-from-project the XAML file. When I clicked to edit it there was just the XAML code, no picture. It took a while to spot.

0
    1. Kill the designer process with PowerShell or via Task Manager.

        PS C:\Users\nagel> ps XD*

        Handles  NPM(K)    PM(K)      WS(K)     CPU(s)     Id  SI ProcessName
        -------  ------    -----      -----     ------     --  -- -----------
            865      54    86464     117936       3.28   7156   1 XDesProc

        PS C:\Users\nagel> kill 7156

    2. build the project.

    The designer windows will appear with the black background and the three links. 
Click on the second link that says "Click here to disable running project code and reload the designer". 
After the click, the designer window will show up.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.