CODEWITHSUNDEEP
wpfxamlcontroltemplate
NewYorker
NewYorker

Reputation: 73

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>

Upvotes: 0

Views: 236

Answers (1)

thatguy
thatguy

Reputation: 22119

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>

Upvotes: 1

Related Questions