CODEWITHSUNDEEP
c#wpfxamlcontroltemplate
Parker
Parker

Reputation: 8851

Change the Button contents in XAML on trigger

I'm trying to make a template that will change a Button's background as well as the color of it's TextBlock. I tried the following XAML in my template, but it just makes the button dissapear on mouseover. Is there any way to change the properties of a buttons contents on triggers?

                <ControlTemplate TargetType="{x:Type Button}">
                <Border 
                        x:Name="Border"  
                        CornerRadius="0" 
                        BorderThickness="0"
                        Background="{x:Null}"
                        BorderBrush="#FF404040" />
                    <ControlTemplate.Triggers>
                       <Trigger Property="IsMouseOver" Value="true">
                          <Setter TargetName="Border" Property="Background" Value="White" />
                            <Setter Property="ContentTemplate">
                                <Setter.Value>
                                    <DataTemplate DataType="TextBlock">
                                        <TextBlock Foreground="Blue" />
                                    </DataTemplate>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Upvotes: 1

Views: 2649

Answers (1)

ShadeOfGrey
ShadeOfGrey

Reputation: 1266

Style:

<Style TargetType="{x:Type Button}" x:Key="MyButton">
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="Border"
                        CornerRadius="0"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Background="{TemplateBinding Background}"
                        TextBlock.Foreground="{TemplateBinding Foreground}"
                        BorderBrush="#FF404040">
                    <ContentPresenter Margin="2"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="White" />
                        <Setter TargetName="Border" Property="TextBlock.Foreground" Value="Blue" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage:

<Button Width="100" Height="50" Content="Lalala" Style="{StaticResource MyButton}" Background="Brown" Foreground="Green" BorderThickness="2"></Button>
  1. You're missing the ContentPresenter, responsible for visualizing the Content property of the Button.
  2. To set the foreground you can use TextBlock.Foreground attached property.
  3. Control Styles and Templates has always been very usefull to me :)

Upvotes: 2

Related Questions