Mahapps Metro Issue - wpf

Background
I am attempting to build an app in WPF using Mahapps Metro for the very first time. I have followed all of the steps in the Mahapps Quick Start guide here, yet my results look completely different (shown below):
I'm not exactly sure what else I should try. My XAML files are exactly the same as the examples.
Here is what my App.xaml file looks like:
<Application x:Class="RxExample.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RxExample"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<!-- Accent and AppTheme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Here is what my MainWindow.xaml file looks like:
<Window x:Class="RxExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:RxExample"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="368*"/>
<ColumnDefinition Width="149*"/>
</Grid.ColumnDefinitions>
</Grid>
Question
What may be the issue here, or is it Mahapps?

Try adding the following to your App.xaml file:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Also make sure you change in your MainWindow.xaml:
Window x:Class... for <Controls:MetroWindow x:Class..`
and changing Baseclass in your MainWindow.xaml.cs, instead of MainWindow : Window it must be MainWindow : MetroWindow

Related

Can I use ResourceDictionary and UserControl not in WPF app

I am going to create an add-in for a CAD application. Its API allows us to introduce ClassLibrary project, and to implement the UI we can use UserControl.
I've added UserControl and introduced plugin, it works great. But when I try to add Material design styles http://materialdesigninxaml.net/ and add Resources to the UserControl, I get the error on InitializeComponent() method called:
System.Windows.Markup.XamlParseException: 'Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception.'
NotImplementedException: The method or operation is not implemented.
The UserControl code:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
</Grid>
Could you specify can I use ResourceDictionary and UserControl out of the WPF app?
1.- Install MaterialDesignThemes nuget: Install-Package MaterialDesignThemes
2.- Edit AXML file
<UserControl ......
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}">
<UserControl.Resources>
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
I had the same problem, what worked for me was to install the nuget package on the entry point project for the wpf app.
If you don't put the resource dictionaries of MaterialDesign anywhere besides your user control (as you posted) it shouldn't affect other part of the application, it didn't for me at least

UserControl styles not applied when embedded in a Window?

I am creating a simple WPF Gui. I am trying to apply implicit styles to all UserControls to give them some default appearances - the background color, and font. This seems to work on the user control itself. However, when the user control is embedded in a Window the styles are list.
For example, here is a user control:
Code:
<UserControl x:Class="NtpClient.Gui.Components.MainPanel.MainPanelView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:serverSelector="clr-namespace:NtpClient.Gui.Components.ServerSelector"
xmlns:detailsPanel="clr-namespace:NtpClient.Gui.Components.DetailsPanel"
Height="350" Width="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<serverSelector:ServerSelectorView Grid.Column="0" Padding="6" />
<detailsPanel:DetailsPanelView Grid.Column="1" Padding="6" />
</Grid>
</UserControl>
And here is the Window with the UserControl in:
Code:
<Window x:Class="NtpClient.Gui.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mainPanel="clr-namespace:NtpClient.Gui.Components.MainPanel"
Title="Network Time Servers" Height="350" Width="400">
<mainPanel:MainPanelView Width="auto" Height="auto"/>
</Window>
The Themes file is set in app.xaml and looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes_CoreThemes;component/ControlStyles.xaml" />
<ResourceDictionary Source="/Themes_CoreThemes;component/BrushResources.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- Implicit Styles -->
<Style BasedOn="{StaticResource DeepBlueButtonStyle}" TargetType="Button" />
<Style BasedOn="{StaticResource ControlStyle}" TargetType="UserControl" />
</ResourceDictionary>
App.xaml:
<Application x:Class="NtpClient.Gui.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Themes_CoreThemes;component/ControlStyles.xaml" />
<ResourceDictionary Source="/Themes_CoreThemes;component/BrushResources.xaml" />
<ResourceDictionary Source="Themes/Local/Local.MSControls.Core.Implicit.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
Does anyone have any idea what is causing this, and how I resolve it?
I've faces that problem some month's ago.
It's because your xaml files are in other dll's.
I don't know why, but designer isn't handling that properly.
Look like it's external issue of Designer.
I've just moved styles from dll's to the main project.

Resource dictionary cannot be found?

At least I think this is the problem...
I have a project structured like so (files omitted for brevity)
Project
Assets
ResourceDictionaries
Styles.xaml
MainWindow.xaml
I am referencing the resource dictionary as follows in MainWindow.xaml
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ResourceDictionaries/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<Window.Resources/>
But none of the styles are being applied to any elements.
I've checked the Build Action is set to page. I've also tried giving some styles in the dictionary a key, but Blend cannot 'see' these keys.
What am I doing wrong?
Edit: Relevant code. Obviously if I put the properties on the actual elements they work, but in a dictionary they don't:
MainWindowStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Company.Client.Assets.ResourceDictionaries"
xmlns:wpf="http://schemas.syncfusion.com/wpf">
<Style TargetType="{x:Type wpf:RibbonWindow}">
<Setter Property="wpf:SkinStorage.VisualStyle" Value="Office2010Silver"/>
</Style>
<Style TargetType="{x:Type wpf:Ribbon}">
<Setter Property="BackStageColor" Value="#622166"/>
</Style>
</ResourceDictionary>
MainWindow.xaml
<wpf:RibbonWindow x:Class="Company.Client.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wpf="http://schemas.syncfusion.com/wpf"
xmlns:local="clr-namespace:Company.Client"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<wpf:RibbonWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ResourceDictionaries/MainWindowStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</wpf:RibbonWindow.Resources>
<Grid>
<wpf:Ribbon BackStageHeader="DB">
<wpf:Ribbon.BackStage>
<wpf:Backstage>
<wpf:BackStageCommandButton Header="Save"/>
</wpf:Backstage>
</wpf:Ribbon.BackStage>
</wpf:Ribbon>
</Grid>
</wpf:RibbonWindow>
Edit 2:
This is what has been tried so far:
Tried applying styles to normal controls (Button, Label, etc.). Works
Tried adding the styles under <wpf:MainWindow.Resources>. Doesn't work
Tried a pack URI. Doesn't work
Adding the styles/properties to the actual elements. Works (obviously)
Have you tried these two steps:
Add MainWindowStyles.xaml to Application.Resources section in app.xaml
Use explicit style for RibbonWindow, like this:
<RibbonWindow>
...
<RibbonWindow.Style>
<StaticResource ResourceKey="RadRibbonWindowStyle"/>
<RibbonWindow.Style>
Use the pack URI syntax:
<ResourceDictionary Source="pack://application:,,,/Assets/ResourceDictionaries/Styles.xaml"/>
Adding this to supplement the accepted answer.
My code now looks like this. I didn't manage to get it to work with the VisualStyle property, but this will do. If anyone does know how to get that into a Resource Dictionary though, the help would be much appreciated. :)
Long story short, this is the code that works based on the exchange between me and #AlexSeleznyov
MainWindowStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpf="http://schemas.syncfusion.com/wpf">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Syncfusion.Tools.Wpf;component/framework/ribbon/themes/office2010silverstyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="MainRibbon" TargetType="{x:Type wpf:Ribbon}" BasedOn="{StaticResource Office2010SilverRibbonStyle}">
<Setter Property="BackStageColor" Value="#622166"/>
</Style>
</ResourceDictionary>
MainWindow.xaml
<wpf:RibbonWindow x:Class="Company.Client.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:wpf="http://schemas.syncfusion.com/wpf"
xmlns:local="clr-namespace:Company.Client"
mc:Ignorable="d"
wpf:SkinStorage.VisualStyle="Office2010Silver"
Title="MainWindow" Height="600" Width="800"
Icon="Assets/Icons/ApplicationIcon.ico">
<wpf:RibbonWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/ResourceDictionaries/MainWindowStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</wpf:RibbonWindow.Resources>
<Grid>
<wpf:Ribbon BackStageHeader="File" Style="{StaticResource MainRibbon}">
<wpf:Ribbon.BackStage>
<wpf:Backstage>
<wpf:BackStageCommandButton Header="Save"/>
</wpf:Backstage>
</wpf:Ribbon.BackStage>
</wpf:Ribbon>
</Grid>
</wpf:RibbonWindow>

Is there a way to make a DynamicResource be dynamic for a Freezable in a ResourceDictionary?

I have this in Brushes.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:SkinBox.Controls">
<SolidColorBrush x:Key="{x:Static controls:Keys.BackgroundBrushKey}"
Color="{DynamicResource {x:Static controls:Keys.BackgroundColorKey}}" />
</ResourceDictionary>
And use it like this in Generic.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SkinBox.Controls"
xmlns:system="clr-namespace:System;assembly=System">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/SkinBox.Controls;component/Themes/Skins/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/SkinBox.Controls;component/Themes/Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
The problem is that wpf freezes the brush so the DynamicResource has no effect.
Is there a clean way to solve this? I can only think of nasty hacks.
Thought of a workaround:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:SkinBox.Controls">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/SkinBox.Controls;component/Themes/Skins/Yellow.Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/SkinBox.Controls;component/Themes/Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
This still does not give true dynamic resources but it reapplies the brushes so that they update when applying the skin.
Removes the need for duplicating the brushes in every skin.

Merged dictionaries and local resources

I have a Styles.xaml that groups many ResourceDictionarys inside a MergedDictionary.
I imported Styles.xaml in my UserControl.Resources
<UserControl.Resources>
<ResourceDictionary Source="Dictionaries\Styles.xaml" />
</UserControl.Resources>
but when I try to add a converter
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionaries\Styles.xaml" /> <--! Exception -->
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>
it raises
ArgumentNullException: Value cannot be null.
Parameter name: item
Wrapping the converter inside another MergedDictionary has no effect.
How can I solve this?
Thank you all!
SOLVED
I eventually figured it out: the Exception was raised inside one the .xaml files, but Visual Studio does not provide enough info to locate the faulty line.
Following code does work.
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionaries\Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>
Try this
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/PROJECTNAMESPACE (TestProject.Something);component/Dictionaries/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</ResourceDictionary>
</UserControl.Resources>

Resources