Metro (MahApps) WPF: Override TabItem style - c#

There are a lot of things I like about MahApps Metro for WPF, and there are some I'm less fond of. One of them is the Metro tab style, so I'm trying to tweak it. Or write my own, really.
My problem is that while I can create a tab control style, I can't seem to override the TabItem style at all. I've started simple: Just red, static text, regardless of what's there. But I can't even get that right. It keeps using the Metro style.
(Binding is through Caliburn.Micro.)
ShellView.xaml:
<TabControl Style="{StaticResource TabControlStyle}" DockPanel.Dock="Top"
x:Name="AvailableTabs">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Inside App.xaml:
<ResourceDictionary Source="Resources/CustomControls.xaml" />
<!-- 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" />
TabControl/Item Styles:
<Style TargetType="TabItem" BasedOn="{StaticResource MetroTabItem}">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<TextBlock Text="Tab" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Result:
The TabControl's style is definitely working -- the presence of the horizontal line between tabs and content is proof enough of that. I also tried using {DynamicResource WhiteBrush} (from mahapps) in the style to see if maybe it couldn't find mahapps resources, but that worked just fine. But the tabs themselves are still using the Metro style.
What am I doing wrong? This is driving me crazy, and I can't shake the feeling that I'm doing something that's both simple, and stupid. :)
(Also, I tried adding BasedOn={StaticResource MetroTabItem} to the TabItem style and that didn't work either.)

It's the order in which you reference your global / implicit styles.
The style in Resources/CustomControls.xaml
<Style TargetType="TabItem" BasedOn="{StaticResource MetroTabItem}">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<TextBlock Text="Tab" Padding="10" Margin="1,0"
Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
is shadowed by the MahApps styles, as it is referenced first. It should be the other way around:
App.xaml
<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" />
<!-- Last in line will prevail -->
<ResourceDictionary Source="Resources/CustomControls.xaml" />
</ResourceDictionary.MergedDictionaries>

Related

How to change the font size in a mahapps project?

So I am trying to change the default font family and the font size in my project. I decided to start with buttons.
I do it like this (I am gonna create a separated file for my style, but now I just want to make it work somehow):
<Controls:MetroWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Templates/MyTemplateSelector.xaml"/>
<ResourceDictionary Source="/Templates/FullMenu.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style BasedOn="{StaticResource MetroButton}" TargetType="Button">
<Setter Property="FontFamily" Value="Calibri" />
</Style>
</ResourceDictionary>
</Controls:MetroWindow.Resources>
and nothing changes. What is wrong?
I guess it's because program can't find "{StaticResource MetroButton}".
App.xaml
<Application x:Class="WpfApp2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp2"
xmlns:dialogYesNo="clr-namespace:WpfApp2.DialogYesNo"
StartupUri="Views/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 Source="ViewModels.xaml" />
<ResourceDictionary Source="Dialogs.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
So, you just need to use it in App.xaml after declaring metro references:
<Style TargetType="Label">
<Setter Property="FontFamily" Value="Segoe UI Light"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI Light"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="FontFamily" Value="Segoe UI "/>
</Style>
Button uses TextBox, so button will be changed automatically.
Instead of define a style just to set fontfamily/weight you can just define in your resource directly the fontfamily and weight with a key(an example with a font that i use)
<Controls:MetroWindow.Resources>
<FontFamily x:Key="FontAwesome">/tuseradm;component/assets/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Controls:Flyout.Resources>
then in your button just set the font family
<Button FontFamily="{StaticResource FontAwesome}" Content="" />
EDIT adding another answer:
by default mahapps override the default wpf style. If you want to modify a style for let's say buttons in all your view you don't need to use based on
<Style BasedOn="{StaticResource {x:Type Button}}" TargetType="Button">
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontWeight" Value="ExtraLight"/>
</Style>
EDIT 2
At least for me, even if i see the change at design time using the approach exposed in the first edit, at run time the problem persist. So in my opinion, is much better to stick with my first answer. Maybe it could be annoying to set fontfamily and fontweight for each button, but it is the safest way to deal with mahapps styles. The only way to solve this 100% for sure is to find (no clue where) the template of mahapps buttons and modify it

Metro Styles in resource dictionary

I am trying to style my WPF application with Mahapps Metro. I have added the all the needed .xaml files in my MergedDictionary in the App.xaml. If I write the following in a view file,
<Button DockPanel.Dock="Left" VerticalAlignment="Top" Style="{DynamicResource SquareButtonStyle}"/>
it works, i.e., the button is styled in the SquareButtonStyle style. But if I instead add the following in my own resource dictionary,
<Style TargetType="Button">
<Setter Property="Style" Value="{DynamicResource SquareButtonStyle}"/>
</Style>
I get an error message,
Setting of the property
"System.Windows.ResourceDictionary.DeferrableContent" has caused an
exception.
(my transation of the German error message). So how can I style all buttons, e.g., with SquareButtonStyle without having to do that on each button individually?
EDIT: Here is my app.xaml (the last dictionary, ResourceDic.xaml, is my own one where the above code is):
<Application xmlns:local="clr-namespace:MGM8" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<local:MGM8_BootStrapper p7:Key="bootstrapper" xmlns:p7="http://schemas.microsoft.com/winfx/2006/xaml" />
</ResourceDictionary>
<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 Source="ResourceDic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Style property can't be set inside Style of any element.
Just declare your style at root level(a root resource Dictionary or App.xmal resources). Just create the style with TargetType Button don't give any key to it. it will be applied to all the buttons in the app.
for ex:
<Style TargetType="Button" BasedOn="{StaticResource SquareButtonStyle}" >
<Setter Property="Height" Value="50"/>
<Setter Property="BorderThickness" Value="2,1" />
</Style>
So above is extending your SquareButtonStyle for your application for all buttons(only if defined at root level).
Update:
You have to use following in your own Resource Dictionary:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SquareButtonStyle dictionary"/>
</ResourceDictionary.MergedDictionaries>
Then only you can create a button style based on SquareButtonStyle in your ResourceDictionary.

external xaml resource not found by designer when referenced from control template

I have external library libccc with its own resources defined like this:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ccc="clr-namespace:libccc"
>
<ccc:BooleanToHiddenVisibilityConverter x:Key="BooleanToHiddenVisibilityConverter" />
</ResourceDictionary>
In my main project I include it using ResourceDictionary.MergedDictionaries in main app.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/libccc;component/Resources/Converters.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Now my problem is that when I reference that resource from Control template only like this:
<window style="{StaticResource MyDialog}">
</window>
where style is defined in application like this:
<ResourceDictionary>
<Style x:Key="MyDialog" TargetType="{x:Type Window}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Grid>
<Label HorizontalAlignment="Center" Content="{Binding UpdateResultDescription}" Visibility="{Binding UpdateEnded, Converter={StaticResource BooleanToHiddenVisibilityConverter}, FallbackValue=Hidden}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary
VisualStudio Designer throws exception:
Exception: Cannot find resource named 'BooleanToHiddenVisibilityConverter'. Resource names are case sensitive.
My application works as expected, but designer throws exception. When I reference my libccc in other windows that do not use control template then designer works fine.
Anyone can give me a hint what can I change to make designer work?

How to add specific Style to Framework Elements contained on a User Control, with XAML?

I create a basic UserControl, called InputTag; it has two FrameworkElements a TextBlock and a Textbox.
Using the dependency properties I control the input for this control. The name of dependency properties are "Field" for the textblock, and "Value" for the Textbox.
The user control is compiled into a DLL (Class Library) and then loaded on a Windows Application.
Here is the XAML code for the UserControl:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="FieldName" Text="Tag"/>
<TextBox x:Name="FieldValue" Grid.Column="0" Text="0"/>
</Grid>
And in the windows app MainWindow.xaml I insert the control like this
<t:InputTag Field="Name" Value="" />
I want to add different styles to the Textblock and the TextBox using a Resource Dictionary, it should work like this
<t:InputTag Field="Name" Value="" Style="{StaticResource InputTagStyle}"/>
For this example lets say we had two different font sizes. My Resource dictionary looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:t="clr-namespace:Terra.Controls;assembly=Terra">
<Style x:Key="InputTagStyle" TargetType="{x:Type t:InputTag}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Style="{StaticResource InputTagStyle}"/>
<TextBox Style="{StaticResource InputTextStyle}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style x:Key="InputTagStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="15"/>
</Style>
<Style x:Key="InputTextStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="12"/>
</Style>
</ResourceDictionary>
The problem is that I don't know how to access a subkey of my control, and it seems that if I use ControlTemplate is like creating new content to my control.
You need to refer to import the resources into your xaml as a pack URI format thus to import your styling keys in the section like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/Terra;component/Styles/ButtonStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>

How to make a Style that only exists within the context of a ResourceDictionary

How can I create a style that only exists within the context of a ResourceDictionary, but not in the context of controls that include that ResourceDictionary?
For instance, I want to be able to have a ResourceDictionary that looks like this:
<!-- ControlTemplates.xaml -->
<ResourceDictionary>
<!-- Private Local styles used to set up the publicly usable templates -->
<Style x:Key="TextBoxes" TargetType="TextBox">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<!-- End of Private Local Stuff -->
<!-- Public Dictionary Resources Follow -->
<ControlTemplate x:Key="CustomTextBox">
<TextBox Style="{StaticResource TextBoxes}" />
</ControlTemplate>
</ResourceDictionary>
And then in some other control or window, I want to be able to go:
<Window>
<Window.Resources>
<ResourceDictionary Source="ControlTemplates.xaml">
</Window.Resources>
<Grid>
<!-- This Should Work -->
<CustomControl Template="{StaticResources CustomTextBox}">
<!-- This Should NOT Work! -->
<TextBox Template="{StaticResources TextBoxes}">
</Grid>
</Window>
One way to get quite close to what you are looking for is to move the "private" styles from ControlTemplates.xaml into their own ResourceDictionary, and then reference that resource dictionary from within the control templates in ControlTemplates.xaml:
ControlTemplates.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- By referencing the ResourceDictionary from within the ControlTemplate's
resources it will only be available for the ControlTemplate and not for those
who reference ControlTemplates.xaml -->
<ControlTemplate x:Key="CustomTextBox">
<ControlTemplate.Resources>
<ResourceDictionary Source="ControlTemplatePrivateStyles.xaml" />
</ControlTemplate.Resources>
<TextBox Style="{StaticResource TextBoxes}" Text="Some text" />
</ControlTemplate>
</ResourceDictionary>
ControlTemplatePrivateStyles.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TextBoxes" TargetType="TextBox">
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</ResourceDictionary>
Then the xaml for the window would look like this:
<Window x:Class="ResourceDictionaryPrivateStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ResourceDictionaryPrivateStyle="clr-namespace:ResourceDictionaryPrivateStyle"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary Source="ControlTemplates.xaml" />
</Window.Resources>
<StackPanel>
<!-- This works -->
<ResourceDictionaryPrivateStyle:CustomControl Template="{StaticResource CustomTextBox}" />
<!-- This does not work, unless you explicitly reference ControlTemplatesPrivateStyles.xaml here in the window-->
<TextBox Text="Text" Style="{StaticResource TextBoxes}" />
</StackPanel>
</Window>
This way you could not use the "private" styles unless you explicitly reference that resource dictionary. They will not be accessible by just referncing the ControlTemplates.xaml resource dictionary.

Categories