XAML UI Preview on Visual Studio

Hi, I am a beginner in C# trying to read through some popular github repos to learn a bit. I can't figure out how to preview the UI of some XAML files on Visual Studio Community. What I saw online are options that don't appear for me when right clicking the file like "Display in Designer" or options to display after running the program. I know from work that a split display of code and UI is possible in design time but I couldn't figure out the setting to do so on the toolbar or from the menus. Help would be appreciated ❤️
No description
9 Replies
Pobiega
Pobiega2d ago
have you opened the solution properly, and not just the folder its in? that said, the recommendation for xaml is usually to not bother with the designer $rulesofwpf
MODiX
MODiX2d ago
Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
Rules of WPF:

❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)

✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
PadawanSolid
PadawanSolid23h ago
Not all files with '.xaml' ext can display. Some files may be resource dictionaries, only UserControl or Window can display in designer.
OrangeHokage
OrangeHokageOP18h ago
Yes, I opened the .sln file in the root of the project which is PowerToys.sln https://github.com/microsoft/PowerToys/tree/main
GitHub
GitHub - microsoft/PowerToys: Windows system utilities to maximize ...
Windows system utilities to maximize productivity. Contribute to microsoft/PowerToys development by creating an account on GitHub.
OrangeHokage
OrangeHokageOP18h ago
So a C# developer doesn't usually verify the UI in designtime, but rather opt to run the program and use things like XAML Hot Reload to touch up on the UI in runtime?
Pobiega
Pobiega18h ago
yup
OrangeHokage
OrangeHokageOP18h ago
oh interesting. I was trying to open MainWindow.xaml and Pages/MainPage.xaml in the link below which its code looked to have some UI elements like Grid, Image, Rectangle. Can these files display in your opinion? https://github.com/microsoft/PowerToys/tree/main/src/modules/AdvancedPaste/AdvancedPaste/AdvancedPasteXAML
GitHub
PowerToys/src/modules/AdvancedPaste/AdvancedPaste/AdvancedPasteXAML...
Windows system utilities to maximize productivity. Contribute to microsoft/PowerToys development by creating an account on GitHub.
OrangeHokage
OrangeHokageOP18h ago
Okay thanks I will look into the errors I get and see how I can fix them. I just thought I am missing some secret C# package that will allow me to preview the pages I have in design time
Klarth
Klarth7h ago
XAML can pull from many sources, including from objects created by C# at runtime. So it is hard to keep a designer/previewer happy and usable even if one exists for your GUI framework. Running the app + using XAML Hot Reload is a much better dev experience than previewers...which are only as good as the data you feed it.
Want results from more Discord servers?
Add your server