Databases
StackOverflow2013
Postsdbo
POHow can I shorten a BasedOn style
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I shorten a BasedOn style
    text
    copied!<p>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).</p> <p>So, the base button works fine, now I want to create other buttons based on that style.</p> <p>This is the code for the base button:</p> <pre><code>&lt;Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}"&gt; &lt;Setter Property="Height" Value="24"/&gt; &lt;Setter Property="Width" Value="150" /&gt; &lt;Setter Property="Foreground" Value="{DynamicResource OffWhiteBrush}"/&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Center"/&gt; &lt;Setter Property="VerticalContentAlignment" Value="Center"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type Button}"&gt; &lt;Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5"&gt; &lt;Grid x:Name="LayoutGrid"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="*"/&gt; &lt;RowDefinition Height="*"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/&gt; &lt;Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/&gt; &lt;ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" /&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsPressed" Value="True"&gt; &lt;Setter Property="Margin" TargetName="OuterBorder" Value="1"/&gt; &lt;Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/&gt; &lt;Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopBlueGradientBrush}"/&gt; &lt;Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomBlueGradientBrush}"/&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>When I create a second button I can do it "BasedOn" the other style:</p> <pre><code>&lt;Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}"&gt; ... </code></pre> <p>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:</p> <pre><code>&lt;Style x:Key="RedButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type Button}"&gt; &lt;Border x:Name="OuterBorder" BorderBrush="{DynamicResource GrayBorderBrush}" BorderThickness="2" CornerRadius="5"&gt; &lt;Grid x:Name="LayoutGrid"&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="*"/&gt; &lt;RowDefinition Height="*"/&gt; &lt;/Grid.RowDefinitions&gt; &lt;Border x:Name="TopBorder" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="4,4,0,0" Background="{DynamicResource TopGrayGradientBrush}"/&gt; &lt;Border x:Name="BottomBorder" BorderBrush="{x:Null}" BorderThickness="0" Grid.Row="1" CornerRadius="0,0,4,4" Background="{DynamicResource BottomGrayGradientBrush}"/&gt; &lt;ContentPresenter x:Name="contentPresenter" Grid.RowSpan="2" HorizontalAlignment="Center" /&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter Property="Control.Foreground" TargetName="contentPresenter" Value="{DynamicResource DisabledBrush}"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsPressed" Value="True"&gt; &lt;Setter Property="Margin" TargetName="OuterBorder" Value="1"/&gt; &lt;Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopGrayGradientBrush}"/&gt; &lt;Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomGrayGradientBrush}"/&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Setter Property="Background" TargetName="TopBorder" Value="{DynamicResource TopRedGradientBrush}"/&gt; &lt;Setter Property="Background" TargetName="BottomBorder" Value="{DynamicResource BottomRedGradientBrush}"/&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>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</p> <p>How should I handle this?</p> <p>PS. I've looked at this <a href="https://stackoverflow.com/questions/1282492/wpf-override-style-colors-best-practice">WPF -- override style colors, best practice</a>, but I can't figure out the TemplateBinding :/</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload