Develop Reference

Textbox style setter breaks functionality

for some reason in my code behind (WPF), the "setter" section makes the text box not function anymore. I can't type in it or add any functionality to it. When I remove the setter section, the text box works. I've seen other people online do it this exact way and it works for them but I'm not sure what I'm doing wrong.
Here's what I have in the main window.
<TextBox Style="{DynamicResource inputBox}" Margin="0,50,125,0"/>
And here's what I have in the code behind
<Style x:Key="inputBox" TargetType="TextBox">
<Setter Property="Padding" Value="3"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Width" Value="65"/>
<Setter Property="FontSize" Value="10"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Text" Value=""/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<!--This setter somehow breaks the text box-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="Transparent" CornerRadius="5" BorderThickness="1" BorderBrush="Black">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thanks

Your template only shows the border. Not the content. It needs a PART_ContentHost Do yourself a favor and copy the existing template and edit that. You can do this on the XAML designer. For example, here is what it looks like when I copy it on mine:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Border Color For Toggle Button Does not change?

I have the following style
<Style TargetType="{x:Type ToggleButton}" x:Key="ListToggleButton">
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#FF232A2E"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}" BorderBrush="#FFECECEC" BorderThickness="0,0,0,1">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="#FF232A2E"/>
<Setter Property="BorderBrush" Value="#FFECECEC"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FFF5F5F5"/>
<Setter Property="BorderBrush" Value="#FF25a0da"/>
<Setter Property="BorderThickness" Value="0,0,0,2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to change the border color when I checked the button, background changes but border no !
What I miss
Thanks in advance

You need to specify a name for the border, and specify it under TargetName in the Setter. When you omit TargetName, it will set the value of the property of the owner of the trigger (in this case the ToggleButton itself). Background setter is working because the border's background is template-bound to the togglebutton's background property.
<Style TargetType="{x:Type ToggleButton}" x:Key="ListToggleButton">
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#FF232A2E"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="ButtonBorder" Background="{TemplateBinding Background}" BorderBrush="#FFECECEC" BorderThickness="0,0,0,1">
<Grid>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="#FF232A2E"/>
<Setter Property="BorderBrush" Value="#FFECECEC" TargetName="ButtonBorder"/>
<Setter Property="BorderThickness" Value="0,0,0,1" TargetName="ButtonBorder"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FFF5F5F5"/>
<Setter Property="BorderBrush" Value="#FF25a0da" TargetName="ButtonBorder"/>
<Setter Property="BorderThickness" Value="0,0,0,2" TargetName="ButtonBorder"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to resize the contents inside a button when it is resized

I am making an application in WPF in which i have several buttons and inside each button there is a grid and inside that grid there is rectangle and a text box. Now the problem i am facing is that when i resize the button the grid inside the button is not resized and stays the same i.e. the rectangle also stays the same.
I have tried putting the rectangle directly into the button(without any grid) but same results.
How do i resize the content inside the button?
Help Please!!

The content of a button is centered by default. To make it stretch, use this:
<Button VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
...
This setup works fine for resizing the rectangle:
<Button DockPanel.Dock="Bottom" Width="200" Height="200"
VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Rectangle Margin="5" Stroke="Black"></Rectangle>
<TextBlock Grid.Column="1" Margin="5">Button text</TextBlock>
</Grid>
</Button>
If you need to change the font size of the text box, then it would probably be easiest to wrap the grid in a ViewBox.

Do not set Button's content like this:
<Button HorizontalAlignment="Left" Margin="123,200,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle2}">
<Rectangle Fill="#FFBF8127" Stroke="Black" Height="100" Width="100"/>
</Button>
Set it's ControlTemplate instead:
<Window x:Class="WpfApplication67.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<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 x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<Grid>
<Rectangle Fill="#FFBF8127" Stroke="Black" Margin="0"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<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 x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="207,46,0,0" VerticalAlignment="Top" Width="221" Style="{DynamicResource ButtonStyle1}" Height="127"/>
</Grid>
You can see the different of button's template.(sorry i can't upload pic, u can see the template in Blend)
Default: Template-border-contentPresent
Edit:Template-border-grid-rectangle

WPF: Cant find correct BorderBrush after setting Style

I have a button which I apply a style too. After the style is applied I have a test that checks the BorderBrush of the button to make sure the style was correctly applied. This test always fails, because the BorderBrush never gets updated in the Buttons properties.
Is there a way for me to get the actual BorderBrush being displayed? All i can get is the default BorderBrush, not the applied styles value.
The style I am using is this:
<Style x:Key="ActiveModuleBtnStyleOn" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Margin="0"
BorderThickness="3"
BorderBrush="Green"
Background="White"
VerticalAlignment="Stretch"
CornerRadius="4"
HorizontalAlignment="Stretch">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="325" Opacity=".5" RenderingBias="Quality" ShadowDepth="5" />
</Border.Effect>
</Border>
<TextBlock Margin="2" Text="{TemplateBinding Content}" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsEnabled" Value="true"/>
</Style>
Then I apply the style like this:
if(var1 == 1)
TopologyNvTxBtn.Style = this.FindResource("ActiveModuleBtnStyleOn") as Style;
else
TopologyNvTxBtn.Style = this.FindResource("ActiveModuleBtnStyleOff") as Style;
In my test app, I want to check which style has been applied. The difference between the two styles is the border brush. I would like to do something like this:
if(TopologyNvTxBtn.BorderBrush == Brushes.Green)
return PASS;
But the BorderBrush never changes (e.g. in a watch window, it stays the same as the default buttons style BorderBrush), but its definitely applied correctly as in the GUI it turns green.
How can i access this property in my test?
Many thanks in advance

The BorderBrush property of the Button is not bound to anything in your template. You need to do this in the control template:
<Style x:Key="ActiveModuleBtnStyleOn" TargetType="Button">
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Margin="0"
BorderThickness="3"
BorderBrush="{TemplateBinding BorderBrush}"
Background="White"
VerticalAlignment="Stretch"
CornerRadius="4"
HorizontalAlignment="Stretch">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Color="Black" Direction="325" Opacity=".5" RenderingBias="Quality" ShadowDepth="5" />
</Border.Effect>
</Border>
<TextBlock Margin="2" Text="{TemplateBinding Content}" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsEnabled" Value="true"/>
</Style>
Notice how the BorderBrush is now bound to the BorderBrush property of the Button. Then you you can set the BorderBrush in the style and should be able to access it in this way:
if(TopologyNvTxBtn.BorderBrush == Brushes.Green)
Let me know if that works.
Cheers,
Eric

As I stated above, the Border is part of the Button ControlTemplate. I just launched Blend and got a copy of the "Factory" template. With this, you can do pretty much everything with it (assuming you know about Stylying.):
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<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 x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MSDN has a good introductory tutorial about Style and Templates. Besides, you can find tons of articles around the web!
The Button itself is pretty much this:
<Border
x:Name="border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ContentPresenter
x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
So, what your looking for is Triggers, you'll have to add and change as you wish these tags:
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
Things to pay attention: TargetName and every <Trigger Property="IsDefaulted" Value="true"> alike!
Good luck!

How can I shorten a BasedOn style

I'm currently making a "base style" for our application. I started by making a "base style" for our buttons, which will be a nice double-gradient (I created a template with 2 rows, and both rows have a two-point gradient).
So, the base button works fine, now I want to create other buttons based on that style.
This is the code for the base button:
<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Height" Value="24"/>
<Setter Property="Width" Value="150" />
<Setter Property="Foreground" Value="{DynamicResource OffWhiteBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
<Grid x:Name="LayoutGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
<Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
<ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopBlueGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomBlueGradientBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I create a second button I can do it "BasedOn" the other style:
<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
...
Inside the grid I've named my gradients: topborder and bottomborder. The problem is that I need to duplicate the code in order to be able to set any code, because the redbuttonStyle doesn't "know" topborder or bottomborder:
<Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5">
<Grid x:Name="LayoutGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/>
<Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/>
<ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Margin" TargetName="OuterBorder" Value="1"/>
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopRedGradientBrush}"/>
<Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomRedGradientBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem here is that I've pretty much repeated the entire style, whilst I only want to change the two gradients on the IsMouseOver event
How should I handle this?
PS. I've looked at this WPF -- override style colors, best practice, but I can't figure out the TemplateBinding :/

You can use a technique where you define properties specific to your theme in a separate class and then bind to those properties from your templates. Please see my answer to this question.