WPF: How to pass Content property between styles and ControlTemplate - wpf

I'm trying to switch between two styles in WPF according to a property.
To switch between the styles I used ControlTemplate for each style and one style with triggers that switching between the ControlTemplates.
My problem is that I have a ContentPresenter inside each basic style and I cannot set it from outside (from the usages).
This is my code in xaml:
<Style x:Key="SecondaryButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,5,5,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SecondaryButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Padding" Value="20,0"/>
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="NormalButton">
<Button Style="{StaticResource SecondaryButtonStyle}" />
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton">
<Button Style="{StaticResource SecondaryButtonWithArrowStyle}" />
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
</Trigger>
</Style.Triggers>
</Style>
The usage is:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />
How can I make the button to take the Content="Back"?
Thank You!
Anna.


I found a solution for this:
I changed the styles to ControlTemplate and created a basic style that will be the BasedOn style of the main style with the triggers.
The new code is:
<Style x:Key="BaseButtonWithArrowStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{StaticResource GrayButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Foreground" Value="#FF494F5A"/>
<Setter Property="FontSize" Value="24.5" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="76" />
<Setter Property="Effect" Value="{StaticResource ButtonEffect}"/>
</Style>
<ControlTemplate x:Key="NormalButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,0,0,0">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ArrowButton" TargetType="Button">
<Border Background="{TemplateBinding Background}" CornerRadius="5,32,32,5"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="12,4,0,4">
<Path Data="F1M46,23.478C46,10.512 35.704,0 23,0 10.299,0 0,10.512 0,23.478 0,36.44 10.299,46.951 23,46.951 35.704,46.951 46,36.44 46,23.478"
Fill="#FF646A74" x:Name="Path"/>
<Path Data="F1M12.504,9.03L9.823,9.028 5.15,9.025 12.273,1.903 10.369,0 1.903,8.466 0,10.369 10.369,20.739 12.273,18.836 5.144,11.706 9.822,11.709 12.502,11.711 20.912,11.715 20.913,9.035z"
Fill="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<ContentPresenter Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Viewbox Width="55" Height="55" Grid.Column="2">
<Grid HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,4,4,4" RenderTransformOrigin="0.5,0.5">
<Path Data="F1M53.214,40.132C54.801,36.559 55.708,32.607 55.708,28.435 55.708,12.757 43.212,0 27.854,0 12.495,0 0,12.757 0,28.435 0,44.116 12.495,56.873 27.854,56.873 32.587,56.873 37.042,55.653 40.95,53.521"
Fill="White"/>
<Path Data="F1M46.556,38.537L45.676,39.265 45.723,46.108 28.875,46.108 28.875,44.318 28.221,44.594 28.221,42.656 46.556,35.641z M27.854,0C23.121,0,18.666,1.221,14.759,3.353L24.395,25.827C33.549,28.967 39.062,26.315 40.16,25.926 41.325,25.514 42.419,25.702 43.139,25.904 44.271,26.215 46.152,28.391 45.442,29.216 41.664,33.584 30.583,38.32 28.825,38.204 27.066,38.092 23.007,38.156 23.007,38.156L22.645,39.563 14.373,41.318C14.373,41.318 13.041,38.472 12.885,37.841 12.728,37.209 13.26,36.858 13.26,36.858 12.355,36.334 11.869,33.725 11.626,31.787L9.378,32.791 2.494,16.743C0.906,20.314 0,24.267 0,28.439 0,44.117 12.496,56.873 27.854,56.873 43.213,56.873 55.708,44.117 55.708,28.439 55.708,12.759 43.213,0 27.854,0"
Fill="#FFFF8241" RenderTransformOrigin="0.5,0.5" >
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="1" ScaleX="-1"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Viewbox>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonMouseOverBackground}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource GrayButtonIsPressedBackground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="SwitchButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonWithArrowStyle}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="Template" Value="{StaticResource NormalButton}" />
<Setter Property="Padding" Value="42,0,70,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Template" Value="{StaticResource ArrowButton}" />
<Setter Property="Padding" Value="20,0"/>
</Trigger>
</Style.Triggers>
</Style>
And now the content of the button changing according to the Content property in:
<Button Style="{StaticResource SwitchButtonStyle}" Content="Back" HorizontalAlignment="Center" VerticalAlignment="Center" />

Related

how to override selected radiobutton background in wpf

i have some problem with wpf radio button :
first of all i should add border to radio button so instead of wrapping radiobutton in border
i decide to override radiobutton default template , something like below code :
<Style TargetType="RadioButton" x:Key="navigationButton" >
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
so now i should add background color to this radiobutton when is checked but because of
overriding ,background color should apply on border(when radiobutton is checked)
but i dont know how should i do that .

It is very simple. Just give a name to the border and implement Triggers on the ControlTemplate.
FYI, check below code snippet (modified your code)
<Style TargetType="RadioButton" x:Key="NavigationButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="MainBorder" Background="Red" Style="{StaticResource navigationButtonBorder}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="MainBorder" Property="Background" Value="Black"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Give a try and let us know in case if any further issues.

I advise you to separate the definition of the template and the change of colors depending on the state.
Since the template can be general, and the desired colors, in different places of the application, may be required different.
An example based on the default template:
<Window.Resources>
<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="{x:Type RadioButton}">
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{Binding BorderBrush, ElementName=radioButtonBorder}"
BorderThickness="{Binding BorderThickness, ElementName=radioButtonBorder}"
CornerRadius="100"
HorizontalAlignment="{Binding HorizontalAlignment, ElementName=radioButtonBorder}"
Margin="1,1,2,1"
VerticalAlignment="{Binding VerticalAlignment, ElementName=radioButtonBorder}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<FrameworkElement.Resources>
<Style TargetType="RadioButton">
<Setter Property="Template" Value="{DynamicResource RadioButtonControlTemplate1}"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Foreground" Value="{Binding BorderBrush, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Background" Value="#FFEE9090"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderBrush" Value="Green"/>
<Setter Property="Background" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</FrameworkElement.Resources>
<RadioButton Content="First"/>
<RadioButton Content="Second"/>
</StackPanel>

Changing the opacity of RadioButton text when its disabled

I am trying to change the opacity of the RadioButton's Content which is some Text presumably a TextBlock. Problem is with this current style it changes the opacity of the Text just fine but it doesn't show the actual radio button itself. Please help.
<UserControl.Resources>
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
This is my RadioButton
<RadioButton x:Name="rbn1" Style="{StaticResource RadioLabel}" GroupName="rbnApplication"
IsChecked="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
IsEnabled="{Binding Path=CurrentApplicationType,
Converter={StaticResource EnumComparisonConverter},
ConverterParameter={x:Static utils:ApplicationType.QXManagerRegulatory}}"
Content="QX Manager Regulatory"/>

In general the easiest way to achieve this is to declare a RadioButton (or any other control) and then in the properties tab go to the Miscellaneous -> Template, left-click on the little square button on the right and choose "Convert to local value". This will expand the full existing ControlTemplate, which you can then edit and/or add triggers to etc:
<RadioButton x:Name="template" >
<RadioButton.Template>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid x:Name="markGrid" Margin="2">
<Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
<Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" TargetName="optionMark" Value="1"/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>

This is because you're setting ControlTemplate to your RadioButton. Which changes your whole control. Instead you need to use ContentTemplate to change your Content.
Below Style should work for your case.
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type RadioButton}">
<TextBlock x:Name="RadioLabel"
Text="{TemplateBinding Content}"
Background="{x:Null}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsChecked,
RelativeSource={RelativeSource Mode=TemplatedParent}}"
Value="False">
<Setter TargetName="RadioLabel"
Property="Background"
Value="Transparent"/>
<Setter TargetName="RadioLabel"
Property="Opacity"
Value="0.5"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

Content alignment for the menu item in WPF does not work

I am trying to align the text on the menu item to center. I have already created the code for template, style to take care of other things. Sadly, content alignment is not working, no matter where I declare it. Clearly, I have added some unnecessary tag somewhere that I can't seem to find. Kindly help me find the problem. Below is the full code used.
XAML markup:
<Menu x:Name="MenuBar" Height="40" VerticalAlignment="Top" Background="#ffFF7A00" Loaded="MenuBar_Loaded">
<MenuItem x:Name="HomeMenuItem" Template="{DynamicResource MenuItemTemplate}" Click="HomeMenuItem_Click" Panel.ZIndex="1" Style="{DynamicResource MenuStyle}" >
<MenuItem.Header>
<TextBlock Text="Home" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</MenuItem.Header>
</MenuItem>
Style
<Style x:Name="MenuStyle" x:Key="MenuStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Foreground" Value="#ffffffff"/>
<Setter Property="BorderBrush" Value="#ffffffff"/>
<Setter Property="BorderThickness" Value="0,0,1,0"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="Trebuchet MS"/>
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Background" Value="#FFFF7A00"/>
<Setter Property="Focusable" Value="True"/>
<Setter Property="IsTabStop" Value="True"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF0081A7"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#FF0081A7"/>
</Trigger>
</Style.Triggers>
</Style>
Control template
<ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
<Path x:Name="GlyphPanel" Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z" Fill="#FF212121" FlowDirection="LeftToRight" Margin="3" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="GlyphPanel" Value="Visible"/>
<Setter Property="Visibility" TargetName="Icon" Value="Collapsed"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#0026A0DA"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="#FF707070"/>
<Setter Property="Fill" TargetName="GlyphPanel" Value="#FF707070"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I guess there is a conflicting tag that might be causing this, but I can't seem to find which one. I have already tried using content alignment in hover trigger too, but that didn't work either.

Adding HorizontalAlignment="Center" to the Grid present in ControlTemplate(inside Border) will solve your problem.
<ControlTemplate x:Name="MenuItemTemplate" x:Key="MenuItemTemplate" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">

You need to supply a HeaderTemplate for the MenuItem style. e.g.
<ContextMenu>
<ContextMenu.Resources>
<DataTemplate x:Key="HeaderControlTemplate">
<TextBlock HorizontalAlignment="Center" Text="{Binding}"/>
</DataTemplate>
</ContextMenu.Resources>
<MenuItem Header="Menu1" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
<MenuItem Header="Menu Item 2" Template="{StaticResource MenuTemplate}" HeaderTemplate="{StaticResource HeaderControlTemplate}"/>
</ContextMenu>

ScrollViewer styled with images doesn't scroll on full track

In my WPF application, I have styled the ScrollBar using images for the background and the thumb. The scrollbar is scrolling along the whole height of the scrollbar. But inside ScrollViewer, the thumb doesn't scroll along the whole track. It scrolls in the middle of the track but doesn't get close to the ends of the scrollbars. Please see the attached image.
Below is the ScrollBar style:
<ImageBrush x:Key="ScrollBar.Static.Background" ImageSource="/WpfApplication1;component/Resources/ZeePad v1.65B for dev Vertical Slide.png" Stretch="Fill" />
<ImageBrush x:Key="ScrollBar.Static.Horizontal.Background" ImageSource="/WpfApplication1;component/Resources/ZeePad v1.65B for dev Vertical Slide - Horizontal.png" Stretch="Fill" />
<ImageBrush x:Key="ScrollBar.MouseOver.Thumb" ImageSource="/WpfApplication1;component/Resources/ZeePad v1.65B for dev Slider Knob.png" Stretch="Uniform" />
<ImageBrush x:Key="ScrollBar.Pressed.Thumb" ImageSource="/WpfApplication1;component/Resources/ZeePad v1.65B for dev Slider Knob.png" Stretch="Uniform" />
<ImageBrush x:Key="ScrollBar.Static.Thumb" ImageSource="/WpfApplication1;component/Resources/ZeePad v1.65B for dev Slider Knob.png" Stretch="Uniform" />
<SolidColorBrush x:Key="ScrollBar.Static.Border" Color="#F0F0F0"/>
<Style x:Key="ScrollBarThumbVertical" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumbHorizontal" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle x:Name="rectangle" Fill="{StaticResource ScrollBar.Static.Thumb}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Width="{TemplateBinding Width}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.MouseOver.Thumb}"/>
</Trigger>
<Trigger Property="IsDragging" Value="true">
<Setter Property="Fill" TargetName="rectangle" Value="{StaticResource ScrollBar.Pressed.Thumb}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Background" Value="{StaticResource ScrollBar.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ScrollBar.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1,0"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
<Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" >
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbVertical}"/>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="BorderThickness" Value="0,1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource ScrollBar.Static.Horizontal.Background}" />
<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}">
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumbHorizontal}"/>
</Track.Thumb>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
The ScrollView style is as given below:
<Style TargetType="ScrollViewer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
<ScrollBar x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" />
<ScrollBar x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any idea why?
Thanks.

Why does margin not work WPF?

<StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Right">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Margin" Value="2,0,0,0"/>
</Style>
</StackPanel.Resources>
<Button Padding="5" x:Name="btnUnlock" Click="btnUserMenu_Click_1" Style="{DynamicResource ButtonStyleBasic}">
<Image Stretch="None" Source="/WpfApplication1;component/Images/view_text.png" ImageFailed="Image_ImageFailed"/>
</Button>
<Button Padding="5" Margin="2,0,0,0" x:Name="btnUserMenu" Click="btnUserMenu_Click_1" Style="{DynamicResource ButtonStyleBasic}" >
<Image Stretch="None" Source="/WpfApplication1;component/Images/personal.png" ImageFailed="Image_ImageFailed"/>
</Button>
<Button Padding="5" x:Name="btnQuit" Margin="2,0,0,0" Click="btnQuit_Click" Style="{DynamicResource ButtonStyleBasic}">
<Image Stretch="None" Source="/WpfApplication1;component/Images/exit.png" UseLayoutRounding="True"/>
</Button>
</StackPanel>
If i remove margin inside <Button ... no margin is applied.This is the case when i apply custom template.. Here is the template...
<Style x:Key="ButtonStyleBasic" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true" CornerRadius="2" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

The template in your style does not bind to the Margin using a TemplateBinding, hence the margin properties on Buttons with this style will be disregarded.

Resources