How to add Modern UI WPF style to MVVMLight application? - c#

I am trying to use MVVMLight toolkit along with Modern UI WPF to create a new WPF application using c#.
I created a new MVVMLight-based project. I installed the Modern UI WPF using Nuget.
I added the following xaml to Application.resources section in App.xaml file. Note: i added the x:Key="ModernUI" to this which did not come from the documents. But has to add it for the application to compile. Here is how my App.xaml code look like
<Application x:Class="Project.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Project.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.galasoft.ch/ignore"
StartupUri="MainWindow.xaml"
mc:Ignorable="d ignore">
<Application.Resources>
<!--Global View Model Locator-->
<vm:ViewModelLocator x:Key="Locator"
d:IsDataSource="True" />
<ResourceDictionary x:Key="ModernUI">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
<ResourceDictionary x:Key="ModernUI">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
Then I change my MainWindow.xaml.cs to inheritModernWindowinstead ofWindowand added the following after theInitilizeComponent()`
Style = (Style)App.Current.Resources["BlankWindow"];
Then I slightly change my XAML code to the following
<mui:ModernWindow x:Class="InventoryManagement.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:ignore="http://www.galasoft.ch/ignore"
mc:Ignorable="d ignore"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
WindowState="Maximized"
Title="Inventory Management"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<TextBlock FontSize="36"
FontWeight="Bold"
Foreground="Purple"
Text="{Binding WelcomeTitle}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextWrapping="Wrap" />
</Grid>
</mui:ModernWindow >
The application compiles, but I get a black screen with no content. How can I fix this issue?

Your App.xaml should look like this:
<Application x:Class="Project.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:Project.ViewModel"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ignore="http://www.galasoft.ch/ignore"
StartupUri="MainWindow.xaml"
mc:Ignorable="d ignore">
<Application.Resources>
<ResourceDictionary>
<vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

Related

Apply style from library to wpf

I have found plenty of examples but none of them worked for me.
How do I include the style?
this is my project structure:
and this is my xaml
<Window x:Class="TestLibrary.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:local="clr-namespace:TestLibrary"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Kryptomine_Styling;TabControlStyles.xaml/"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TabControl>
<TabItem Header="test1"></TabItem>
<TabItem Header="test2"></TabItem>
<TabItem Header="test3"></TabItem>
</TabControl>
</Grid>
</Window>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Kryptomine_Styling;component/TabControlStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
you need to add component/ (~base dir) and in the end there may not be a /

Applying PresentationFramework.Royale style to .net 4.8 wpf project

I have a WPF application where I have two stylesheets xaml. But I need to apply base style i.e PresentationFramework.Royale to only one of them, which is not directly loaded in App.xaml.
Below is my App.xaml. I do not want to refer PresentationFramework.Royale here,
<Application
x:Class="UI.Desktop.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="pack://application:,,,/UI.Common;component/Style.Shui.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
I have a login view usercontrol to which i need to add PresentationFramework.Royale as base style along with another stylesheet. How can I achieve this,
<UserControl
x:Class="Views.Implementation.Common.LoginView"
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"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/PresentationFramework.Royale, Version=3.0.0.0, Culture=Neutral, PublicKeyToken=31bf3856ad364e35, ProcessorArchitecture=MSIL;component/themes/royale.normalcolor.xaml" />
<ResourceDictionary Source="pack://application:,,,/Test.APP.UI.Common;component/Style.Test1.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Button
x:Name="Login"
Grid.Row="4"
Grid.Column="2"
Width="85"
Margin="0,0,15,0"
HorizontalAlignment="Left"
Content="Login"
IsDefault="True"
TabIndex="8"
ToolTip="Login" />
</UserControl>
The issue is above code Style.Test1.xaml controls does not take royale.normalcolor.xaml as base. But it works if I put royale.normalcolor.xaml reference in App.xaml

WPF: Mahapps Metro Watermark is not showing up

I am working on a program, and in the settings I want watermarks to tell the user what he can insert there. I used Mahapps Metro, but the watermarks didn't show up, so I created a blank project with only one textbox, but it still doesn't show up.
My Code:
<Controls:MetroWindow x:Class="TestWPF.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:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:TestWPF"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Background="White">
<TextBox Controls:TextBoxHelper.Watermark="TestWater" Height="25" Width="200"/>
</Grid>
</Controls:MetroWindow>
The outcome:
(The background is actually "Wheat" to make the textbox more visible)
Am I missing anything why it doesn't work?
Add this in the App.xaml of the your WPF Project.
<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>
I've tried this and this is working fine after this.
Go through the documentation provided here.

How to make MahApps CleanWindow work?

I want to have CleanWindow on the Title, I'm new in WPF so i really struggle in this
Here's the code for MainWindow.xaml:
<Controls:MetroWindow x:Class="Twitch_Notifier.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Twitch_Notifier"
mc:Ignorable="d"
TitleCaps="False"
ShowTitleBar="True"
ShowIconOnTitleBar="False"
ResizeMode="CanMinimize"
Title="Twitch Notifier" Height="350" Width="525" WindowStartupLocation="CenterScreen"
GlowBrush="{DynamicResource AccentColorBrush}"
Style="{DynamicResource CleanWindowStyleKey}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<Button Content="settings" />
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>
<Grid>
</Grid>
Code for App.xaml:
<Application x:Class="Twitch_Notifier.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Twitch_Notifier"
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/BaseDark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Clean/Clean.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
How can i fix this? Thanks for your help
It's a limitation of the designer but the workaround is simple:
1) Cast the Window-style to a MetroWindow-style in Resources (MyCleanWindowStyle)
2) Apply the MetroWindow Style instead
<Controls:MetroWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Views;assembly=gasby.Wpf"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
ShowTitleBar="True" ShowIconOnTitleBar="False" ResizeMode="CanMinimize"
Title="CleanWindow" Height="350" Width="525" WindowStartupLocation="CenterScreen"
GlowBrush="{DynamicResource AccentColorBrush}"
Style="{DynamicResource MyCleanWindowStyle}">
<Controls:MetroWindow.Resources>
<ResourceDictionary>
<Style x:Key="MyCleanWindowStyle"
TargetType="{x:Type Controls:MetroWindow}"
BasedOn="{StaticResource CleanWindowStyleKey}"/>
...
</ResourceDictionary>
</Controls:MetroWindow.Resources>
...
<Grid>
</Grid>
</Controls:MetroWindow>
You mention wanting to set the Title, this is done by the code Title="CleanWindow". The property TitleCaps determines
whether the Title is displayed in all caps (CAPital letters) or not. The default is TitleCaps="True".

Reference one resource from another ResourceDictionary

For example, we have two ResourceDictionary:
Global.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<FontFamily x:Key="GlobalFontFamily">Segoe UI</FontFamily>
</ResourceDictionary>
Part.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ReousrceDictionary Source="Global.xaml" />
</ResourceDictionary.MergedDictionaries>
<FontFamily x:Key="PartFontFamily">**Reference GlobalFontFamily here**</FontFamily>
</ResourceDictionary>
MainWindow.xaml
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<ResourceDictionary.MergedDictionaries>
<ReousrceDictionary Source="Part.xaml" />
</ResourceDictionary.MergedDictionaries>
</Window.Resources>
<Grid>
<TextBlock FontFamily="{StaticResource PartFontFamily}" />
</Grid>
</Window>
In some view, I would use PartFontFamily to set the element font family. Which I would like to achieve is, use the specified font family when PartFontFamily is set, otherwise use GlobalFontFamily instead. So I want to keep the PartFontFamily key, and reference it to GlobalFontFamily since customers have no specified font family for PartFontFamily.
Any good suggestions?
Merge your Part.xaml to the Global.xaml... so that you can refer every thing from the Global.xaml...
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ReousrceDictionary Source="Part.xaml" />
</ResourceDictionary.MergedDictionaries>
<FontFamily x:Key="GlobalFontFamily">Segoe UI</FontFamily>
Merge the Global.xaml to your MainWindow...
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<ResourceDictionary.MergedDictionaries>
<ReousrceDictionary Source="Global.xaml" />
</ResourceDictionary.MergedDictionaries>
</Window.Resources>
<Grid>
<TextBlock FontFamily="{DynamicResource PartFontFamily}" />
</Grid>
</Window>
You can directly access the PartFontFamily here...
I guess you want to make an alias for your resource.
<DynamicResource x:Key="PartFontFamily" ResourceKey="GlobalFontFamily"/>

Categories

Resources