Search code examples
wpfxamlcontroltemplate

Button BorderBrush won't change


BorderBrush color of my button template does not change to Yellow. Please help.

<Style x:Key="someName" TargetType="{x:Type Button}">
   <Setter Property="Background" Value="LightGreen"/>
   <Setter Property="BorderBrush" Value="Yellow"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type Button}">
            <Border Background="{TemplateBinding Background}">
               <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Background" Value="Green"/>
      </Trigger>
   </Style.Triggers>
</Style>

Solution

  • You have to bind the BorderBrush to the templated control via TemplateBinding so that it applies the value defined in your style. Additionally, you have to set add a BorderThickness of at least one the same way, otherwise there is no border.

    <Style x:Key="someName" TargetType="{x:Type Button}">
       <Setter Property="Background" Value="LightGreen"/>
       <Setter Property="BorderBrush" Value="Yellow"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                   <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
       <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
             <Setter Property="Background" Value="Green"/>
          </Trigger>
       </Style.Triggers>
    </Style>
    

    As a general note, a control template defines all parts and states of a control and transitions between them. Your control template only defines the Mouse Over state apart from the normal state. Missing states may harm the user experience. You can find a list of all parts and states for a button in the documentation.

    It is recommendable to extract the default control template or style for a control with Blend or Visual Studio first and adapting that. I have extracted the default style and merged it with your style. You just have to adapt the Disabled and Pressed colors.

    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
       <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
       <Setter Property="Background" Value="LightGreen"/>
       <Setter Property="BorderBrush" Value="Yellow"/>
       <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" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" 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="Green"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="Yellow"/>
                   </Trigger>
                   <Trigger Property="IsPressed" Value="true">
                      <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                   </Trigger>
                   <Trigger Property="IsEnabled" Value="false">
                      <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                      <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                   </Trigger>
                </ControlTemplate.Triggers>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
    </Style>