AppCode
CLion
DataGrip
GoLand
IntelliJ IDEA
MPS
PhpStorm
PyCharm
Rider
RubyMine
WebStorm
Toolbox App
.NET Tools
ReSharper C++
Space
TeamCity
Upsource
YouTrack
Datalore
Hub
Kotlin
Ktor
News
Team
JetBrains PlatformXAML preview tool window for WPF in Rider
A fresh new build of Rider 2018.1 EAP just landed with many new additions. There was already a WPF Application project template, and we have now added a XAML preview tool window for WPF (on Windows)! When working in a WPF window or control, we can preview the results of any change we make in XAML code directly in Rider. Let’s check it out!
WPF Application project template
When creating a new project in Rider, we can select the WPF Application project type to start from. Just like with any other project template, we can configure a number of things like the solution and project name, the target framework and whether we want to create a source control repository at once.
After creating a new WPF Application, we’re ready to look at another new addition to Rider: the XAML preview tool window!
XAML preview tool window
The latest Rider version comes with a built-in mechanism to preview the XAML we are working in. With any .xaml file open, we can use the View | Tool Windows | XAML Preview menu (or double-shift and type Xaml Preview) and immediately see what we are creating:
When we have errors in our XAML markup, we will see Rider’s code analysis in action. In the preview window, the last successful preview is displayed, as well as an error message informing us that a preview is not available.
It is important to note that the XAML preview window is non-interactive. This means you may have to e.g. set the active tab in a tab control to be able to see its contents, or move another control to the foreground to make it visible in the preview.
How does it work?
First things first: the XAML preview window currently only works on Windows. When working with XAML and opening the preview window, Rider launches a separate process that is used to render a preview of what our XAML would look like when executed as an application. The preview from that process is captured as a bitmap and then displayed in Rider.
From the settings (under Tools | XAML Preview), it is possible to set the quality of the rendered image, as well as configure transparency.
Note this feature is still under active development and there are a number of things we’re still working on – if you encounter any issues while using the XAML preview in Rider, please open an issue in our tracker.
Give the latest Rider 2018.1 EAP build a try! We’d love to hear your feedback!
George cook says:
March 30, 2018And for xamarin forms too ppppllleeeeeaaaaassseeee
Maarten Balliauw says:
March 30, 2018Could you open a feature request for that on https://youtrack.jetbrains.com/issues/RIDER#newIssue ?
Bart van der Bilt says:
March 30, 2018Done: https://youtrack.jetbrains.com/issue/RIDER-14730
Maarten Balliauw says:
March 30, 2018Nice, thanks!
Tom says:
March 30, 2018I take this is only available on windows (since neither mono nor .net core support wpf)?
Maarten Balliauw says:
March 30, 2018Correct, this is a Windows-only feature.
Tony Henrique says:
March 31, 2018WPF is awesome.
Good to have support for it in Rider!
PassingBy says:
April 3, 2018Hopefully will be better than the original, I mean what is this:
https://marketplace.visualstudio.com/items?itemName=Johan20D.KilltheWPFDesigner
Simon says:
April 4, 2018I’ve been testing Rider for the last 30 days and the xaml code editor works great:
I haven’t experienced slowdowns or freezes which constantly happen with VS thanks to how they integrated xdesproc (enabling the compatibility assistant for the executable and setting it to windows 95 helps a bit because the process crashes immediately :P).
As far as the preview is concerned, I haven’t gotten it to work just yet. We’re working with a huge code base (>350 projects), hundreds of custom styled xaml controls and rider’s preview failed on every of my last 5 tries.
Maarten Balliauw says:
April 4, 2018Could you log in issue on https://youtrack.jetbrains.com/issues/RIDER#newIssue ? The team can then reach out for repro steps etc.
Simon says:
April 4, 2018Sure, will do when I’m back at work tomorrow 😉
Carlos Mendoza says:
April 16, 2018hello I love jetbrains products, thanks for rider, how can I create a new xaml file for xamarin forms or add xaml file for wpf project?
Hong says:
April 24, 2018because .net core has no supports for GUI
Vincent Nagy says:
May 14, 2018Lovely addition to an awesome tool.
Are you guys also planning to implement a full drag n drop designer one day? Or will we always be dependable on other tools for that?
Thanks for the awesome addition!
Maarten Balliauw says:
May 14, 2018This is not currently in the works but it’s always welcome as a feature request 🙂 https://youtrack.jetbrains.com/issues/RIDER#newIssue
Michael says:
June 11, 2018If you add Xamarin Xaml Designer support i will buy in a heartbeat and i’m guessing a lot of other Xamarin developers too. 🙂
Juan Pablo Vilchis Diaz S. says:
June 14, 2018Please make it available for Mac. There are some of us wanting to edit WPF on a Mac. Then we should build and test on a VM.
Maarten Balliauw says:
June 14, 2018Feel free to open up a feature request via https://youtrack.jetbrains.com/issues/RIDER#newIssue
Nu guarantees though, as WPF has so many dependencies on Windows that this may be impossible to do.
Paulo Fernando Larini says:
April 12, 2019It’s not working in a x86 project in a windows 64 machine;
Jason Liechty says:
September 3, 2019I don’t think the preview launches with the design mode property set as it is in Visual Studio. When using the Assisticant library, it uses that property to know if the data binding should be done with real vs seeded models. Is there a way to have the following resolve to true? “DesignerProperties.GetIsInDesignMode(new DependencyObject())”
Maarten Balliauw says:
September 4, 2019Hi Jason, I have opened a feature request for you: https://youtrack.jetbrains.com/issue/RIDER-32471
David Rose says:
December 12, 2019I am using 2019.3 and its not working at all. It just renders a small random section so I still have to fall back to VS. I am hoping this is still being developed as this post seems quite old and it does let rider down somewhat. Is there any news on xaml preview development progress?
Konstantin says:
December 13, 2019If I click on any control in XAML preview window I would like to see this heighlighted element in xaml.
Do you have this feature?
Sergey Plotnikov says:
December 20, 2019Why is there still no WPFPreview support in .NetCore?
Mehrad says:
March 8, 2020when i opened XAML Preview i receive Referenced assemblies are missing.
how can i fix that
Puschie says:
May 19, 2020it looks like they removed the feature in Rider 2020
Maarten Balliauw says:
May 19, 2020Should still be there, what type of project do you have? .NET Framework or .NET Core?
Chris says:
May 20, 2020Different guy, same issue.
.Net Core 3.1
The option to enable it is still there, but there is nolonger any way to launch it.
Maarten Balliauw says:
May 20, 2020Hi Chris, is this .NET Framework or .NET Core 3?
The XAML preview is supported for full framework, not yet for .NET Core 3 unfortunately.
Jeroen says:
May 29, 2020Hi Maarten,
Do you have an indication as to when .NET Core 3 will be supported?
Maarten Balliauw says:
May 29, 2020Just checked, work is being done but tere is no official ETA we can give yet.
Ali says:
June 17, 2020You have to add .NetCore support please! I am tired of switching back and forth between Visual Studio for designing and Rider for coding..
Maarten Balliauw says:
June 17, 2020Hi Ali, feel free to follow progress/upvote here: https://youtrack.jetbrains.com/issue/RIDER-35773