Develop Reference

How to repeat programming lines in XAML?

... by the term "programming lines" I mean parts of code .
I am currently creating an UI using c# and XAML. But the XAML code is getting longer and longer, so I realised that if I could somehow set inside the code or store separately, repeatable parts of code and use them every time I needed, the whole XAML code would be shorter and clearer.
For example, let's say that I have a specific label which I want to repeat in several points of the code:
<Label Name="myLabel" Content="something">
</Label>
How could I possibly apply and repeat that label inside my XAML code?

There is a quick example of how the XAML code can be shared between different views/windows. Create a ResourceDictionary, define the shared properties/styles/control templates, like this
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="Segoe UI" />
</Style>
<Style TargetType="Label" x:Key="TitleStyle" BasedOn="{StaticResource {x:Type Label}}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="FontSize" Value="16" />
</Style>
</ResourceDictionary>
Than you can add this dictionary to App/Window MergedDictionaries to use them, like
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
Please, note that this is just a quick example to briefly explain the idea. You can also have look at Style.TargetType docs to see explanation between TargetType and x:Key in styles

Adding one WPF style property kills all other style properties

I've a style for my WPF buttons, defined in the main window:
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Background" Value="#3fa9f5" />
...
</Style>
</Window.Resources>
In an UserControl, I want to set the content and the background depending on a binding:
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="Text123" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=myControl, Path=IsHidden}"
Value="true">
<Setter Property="Content" Value="TextABC" />
<Setter Property="Background" Value="#ff1d25" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
The problem: The button in the UserControl looses all other properties it gets from the main window style (color, width, margins, ...).
I tried to let the UserControl button's style know the parent style via
BasedOn="{StaticResource {x:Type Button}}"
but with no result.

UWP Xaml : Container style that applies to children

Let say I want to style a grid background like that :
<Page.Resources>
<Style x:key="MainGridStyle" TargetType="Grid">
<Setter Property="Background" Value="Blue" />
</Style>
</Page.Resources>
How can I make all TextBlocks inside that MainGridStyle Foreground=White through that Style?
Thanks

This works in WPF at least:
<Style x:key="MainGridStyle" TargetType="Grid">
<Setter Property="Background" Value="Blue" />
<Setter Property="TextElement.Foreground" Value="White" />
</Style>

Setting WindowButtonCommands styles in Mahapps.Metro

I want to change the style of the Min, Max and Close buttons for my WPF application.
I'm using Mahapps.Metro and I have successfully managed to achieve the result I want, but only with the obsolete WindowMinButtonStyle, WindowMaxButtonStyle and WindowCloseButtonStyle properties in the MetroWindow class. The obsolete message on for example the WindowMinButtonStyle property reads:
This property will be deleted in the next release. You should use LightMinButtonStyle or DarkMinButtonStyle in WindowButtonCommands to override the style.
The problem is that I can't figure out how specifically to do that. The MetroWindow class has a field called WindowButtonCommands, but it is internal, so that seems to be the wrong tree to bark up. I'm fairly new to WPF and there is no info on how to do this in the guides on their website, so I'm pretty lost. I'm hoping someone can provide me with a short code example to point me in the right direction.
EDIT - Here is XAML that produces the warning:
<controls:MetroWindow x:Class="Project.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
WindowMinButtonStyle="{DynamicResource DarkWindowButtonStyle}"
WindowMaxButtonStyle="{DynamicResource DarkWindowButtonStyle}"
WindowCloseButtonStyle="{DynamicResource DarkWindowCloseButtonStyle}">
<Grid>
</Grid>
</controls:MetroWindow>
I should also mention I'm using the new v1.2.0 of Mahapps.Metro, but I had the same issue with the previous version.
Mahapps.Metro source code that has the Obsolete attributes: https://github.com/MahApps/MahApps.Metro/blob/develop/MahApps.Metro/Controls/MetroWindow.cs#L88-L93

based on crumbl3d changes, a short how to...
There are now two styles (Light, Dark) which will be used based on OverrideDefaultWindowCommandsBrush property (available at MetroWindow) and it's lightness (default is the Light style).
So, put these at your App.xaml (or something else)
<Style x:Key="CustomLightMetroWindowButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource LightMetroWindowButtonStyle}">
<Setter Property="Foreground" Value="Chocolate" />
</Style>
<Style x:Key="CustomDarkMetroWindowButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource DarkMetroWindowButtonStyle}">
<Setter Property="Foreground" Value="Crimson" />
</Style>
<Style TargetType="{x:Type controls:WindowButtonCommands}" BasedOn="{StaticResource {x:Type controls:WindowButtonCommands}}">
<Setter Property="LightMinButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="LightMaxButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="LightCloseButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="DarkMinButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
<Setter Property="DarkMaxButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
<Setter Property="DarkCloseButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
</Style>
Edit
If you only want to use this at one window then you can create a style with a key and use it at this window like this:
<controls:MetroWindow.WindowButtonCommands>
<controls:WindowButtonCommands Style="{DynamicResource CustomWindowButtonCommandsStyleLocatedtInAppXaml}" />
</controls:MetroWindow.WindowButtonCommands>
The style located in App.xaml
<Style x:Key="CustomWindowButtonCommandsStyleLocatedtInAppXaml" TargetType="{x:Type controls:WindowButtonCommands}" BasedOn="{StaticResource {x:Type controls:WindowButtonCommands}}">
<Setter Property="LightMinButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="LightMaxButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="LightCloseButtonStyle" Value="{StaticResource CustomLightMetroWindowButtonStyle}" />
<Setter Property="DarkMinButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
<Setter Property="DarkMaxButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
<Setter Property="DarkCloseButtonStyle" Value="{StaticResource CustomDarkMetroWindowButtonStyle}" />
</Style>
Hope this helps.

while Inherit style in WPF it affect parent style

In WPF i have a style for the control like below,
<Style TargetType="local:CustomControl">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="0,0,0,1" />
<Setter Property="Padding" Value="3,0,3,0" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
Now i need to override customcontrol border for some other place like below,
<Style TargetType="local:CustomControl" BasedOn="{StaticResource {x:Type local:CustomControl}}">
<Setter Property="BorderThickness" Value="1" />
</Style>
My problem is when i am using above code it override the 1st written code. is my code is correct.
Note: the base style is only written with target type. i need to override that control border in some other place without affect base code.
is it possible ? please help me to resolve this problem.
thanks in advance.

If you declare a Style without an x:Key, it will override the default style for that control.
<Style TargetType="local:CustomControl">
So the code above will effect all CustomControl elements throughout the entire application (or within the scope).
If you do not want to override the base style, you can give your Style an x:Key, like so:
<Style TargetType="local:CustomControl" x:Key="MyAwesomeStyle">
When you create your control, you will then have to reference the Style. Here's an example:
<local:CustomControl Style="{DynamicResource MyAwesomeStyle}" ... />

Accidentally I saw some example which can be useful in solving the mentioned problem. In your example own custom control has been used, in my example - a button.
<Grid>
<Button Style="{StaticResource AddButtonStyle}" Tag="Add" Click="addClick" />
</Grid>
Code for AddButtonStyle:
<Style x:Key="AddButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="Content" Value="✅"/>
</Style>
AddButtonStyle based on AppBarButtonStyle. Below code for it.
<Style x:Key="AppBarButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="40" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="88" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontFamily" Value="Segoe UI Symbol" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">. . .
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On this example base, you must declare a Style with an x:Key, and should not set any value to Content (in you example BorderThickness) property in the inherited style.