I have a application that already uses a style template to defining font family, font size, foregrounds colors and so on.
One funcionnality of that app is enable users to picker a particular color and then apply to all texts, including textblocks, listviews, buttons and etc.
I've already read this link (Find all controls in WPF Window by type), where I could find all objects' type of FrameworkElement and then apply the color to each element according with his type. However, I am not sure that is the best approach.
As you said, there are lots of way of doing this.
For starter, you can have a style template and then use StaticResource to get the style for it. For example:in your view mainwindow.xaml
<Window.Resources>
<Style TargetType="{x:Type Control}" x:Key="baseStyle">
<Setter Property="FontSize" Value="100" />
</Style>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource baseStyle}"></Style>
<Style TargetType="{x:Type Label}" BasedOn="{StaticResource baseStyle}"></Style>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource baseStyle}"></Style>
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource baseStyle}"></Style>
<!-- ComboBox, RadioButton, CheckBox, etc... -->
</Window.Resources>
OR Another way is:
View: mainwindow.xaml
<Window>
<Window.resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="FontSize"
Value="14" />
</Style>
</Window.resource>
<Grid>
<TextBox Text="blah"/>
</Grid>
</Window>
OR
you can do it from mainwindow constructor
Style = (Style)FindResource(typeof(Window));
and this, you will put this in the app.xaml
<Style TargetType="{x:Type Window}">
<Setter Property="FontSize"
Value="14" />
</Style>
In my application I'm using ResourceDictionaries for styles. Example:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="SimpleButton">
<Setter Property="Foreground" Value="{DynamicResource SpecialRed}"/>
<Setter Property="FontSize" Value="40"/>
<Setter Property="Margin" Value="10"/>
</Style>
</ResourceDictionary>
Lets say that as a user I know how resource dictionary look like. Is it possible to overwrite the resource from my own file from HDD? I want to add the functionality which allows user to do this.
My HDD file:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="SimpleButton">
<Setter Property="Foreground" Value="{DynamicResource SpecialRed}"/>
<Setter Property="FontSize" Value="70"/>
<Setter Property="Margin" Value="20"/>
</Style>
</ResourceDictionary>
If you insist on doing that (I wouldn't), you can merge resource dictionaries at runtime: Dynamically loading resource dictionary files to a wpf application gives an error
I'm starting to use styles in WPF. I'm using MahApps styles as a base, which so far has been really good. I've been able to make specific modifications using the BasedOn property.
One of the simpler changes is to add a default margin so when adding controls they don't touch. It's worked really well so far until I tried to use the MetroCheckBox. With this specific control it throws an xaml parse exception: "Cannot find resource named 'MetroCheckBox'. Resource names are case sensitive."
I had a look in the source code, trying to track down this issue and coppied the name directly from the GitHub:
https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.CheckBox.xaml
It's definately and all my other controls work fine:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
Any ideas on how to fix this?
Note, I'm including the reference to the styles like so:
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extra="http://schemas.extra.com/ui"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
xmlns:Custom="http://metro.mahapps.com/winfx/xaml/controls"
x:Class="MyApp.App"
StartupUri="/MyApp;component/GUI/Window/Window3.xaml"
>
<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/BaseDark.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>-->
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--Chart Style-->
<Style TargetType="{x:Type chartingToolkit:Chart}
...
</Style>
<!--Top Tab Item-->
<Style x:Key="TopTabItemStyle" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
...
</Style>
<!--Tab Item-->
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">
...
</Style>
<!-- Group Box-->
<Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MetroGroupBox}">
<!--<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Foreground" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Background" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="Custom:ControlsHelper.HeaderFontSize" Value="{DynamicResource ContentFontSize}"/>
<Setter Property="Custom:GroupBoxHelper.HeaderForeground" Value="{x:Null}"/>-->
<Setter Property="Custom:ControlsHelper.HeaderFontWeight" Value="SemiBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid x:Name="GroupBoxRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,2" Background="Transparent" Grid.Row="0">
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" TextElement.FontWeight="{TemplateBinding Custom:ControlsHelper.HeaderFontWeight}" TextElement.FontStretch="{TemplateBinding Custom:ControlsHelper.HeaderFontStretch}" TextElement.FontSize="{TemplateBinding Custom:ControlsHelper.HeaderFontSize}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"/>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="Transparent" Grid.Row="1">
<ContentPresenter Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
You are missing the required ResourceDictionary to bring in the styles for the MahApps. You can do by including the ResourceDictionary definition in the XAML of either the XAML file where you are composing your view or you can add it to the APP.XAML file - the later will give you better performance in the short term.
For example: here is the MahApps controls xaml included with other MahApps resource dictionaries, the controls xaml is the one you need in this case:
<Application x:Class="MyApp"
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:,,,/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>
</Application>
I ran it today and it works fine:
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
As far as I can tell I've changed nothing to do with the project or references.
However, in the last few days Visual Studio had corrupted somehow with the designer throwing exceptions left right and center, solution explorer failing to display anything (was fixed after clearing Component Model Cache) and NuGet failing to work for me to check the MahApps version.
So I set off the installer on a repair install, and now the style works fine.
I have no idea if these are connected... but they may be, so I'll leave this up as an answer in case anyone else comes across this same issue.
This can be caused if you upgrade from a version of MahApps prior to 2.0 to a more recent version.
For more details, see:
mahapps.com: Migration to v2.0 - MahApps.Metro
https://mahapps.com/docs/guides/migration-to-v2.0
I want to implement application level resources in my pages, but seems it's not working.
App.xaml:
<Application.Resources>
<Style TargetType="phone:PhoneApplicationPage">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"></Setter>
<Setter Property="shell:SystemTray.BackgroundColor" Value="Transparent"></Setter>
<Setter Property="shell:SystemTray.Opacity" Value="0.5"></Setter>
</Style>
</Application.Resources>
The Page
<phone:PhoneApplicationPage
...
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True" >
</phone:PhoneApplicationPage>
I would like the system tray should look the way its styled in App.xaml, but it doesn't.
Thanks!
Application-wide implicit styles work on Windows Phone since Mango. The thing you need to remember is that implicit style is applied to TargetType only, not to its descendants. Your Pages are new classes that inherit from PhoneApplicationPage. What will work is:
<Application.Resources>
<Style TargetType="local:MainPage">
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"/>
</Style>
</Application.Resources>
But obviously you would have to define that for every Page in your project, which makes it useless. For Pages it's best to use Explicit Styles (with x:Key):
<Application.Resources>
<Style x:Key="PageStyle" TargetType="phone:PhoneApplicationPage">
<Setter Property="Foreground" Value="Black" />
<Setter Property="shell:SystemTray.ForegroundColor" Value="Black"/>
</Style>
</Application.Resources>
and for every Page in your project simply:
<phone:PhoneApplicationPage
Style="{StaticResource PageStyle}"
The application I'm working on has 2 ResourceDictionary, DefaultStyles.xaml and CustomStyles.xaml.
Is it possible that a style in the CustomStyles dictionary uses a base style defined in the other dictionary?
DefaultStyles.xaml:
<Style x:Key="TextBlockDefaultStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="4" />
</Style>
CustomStyles.xaml:
<Style x:Key="SectionTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource TextBlockDefaultStyle}">
<Setter Property="FontSize" Value="16" />
</Style>
App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Styles/DefaultStyles.xaml"/>
<ResourceDictionary Source="Assets/Styles/CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
When the code runs, the following exception is thrown:
Cannot find a Resource with the Name/Key TextBlockDefaultStyle.
It works well if both styles are in the same file.
You need to reference the dictionary with the other style directly.
CustomStyles.xaml:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="DefaultStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="SectionTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource TextBlockDefaultStyle}">
<Setter Property="FontSize" Value="16" />
</Style>