CODEWITHSUNDEEP
wpfbuttontriggerscontroltemplate
Nainil Patel
Nainil Patel

Reputation: 55

How to set Content for a Button inside of ControlTemplate for IsMouseOver Trigger

I am changing the ControlTemplate of my Button and am successfully able to change the visual appearance, however when I try to changee the Content of a Button on IsMouseOver Trigger inside of a ControlTemplate, it does not work. Below is my xaml:

<Window x:Class="WpfApplication1.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window2" Height="300" Width="300">

  <Window.Resources>        

    <ControlTemplate x:Key="ngButton" TargetType="Button">
        <Grid>
            <Border Name="templateBorder" BorderThickness="2" Background="Blue" />


            <Ellipse  Name="el2" Margin="10,10,10,10" Fill="Magenta" />

            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/>
        </Grid>


        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="templateBorder" Property="Background" Value="DarkRed" />
                <Setter TargetName="el2" Property="Fill" Value="Green" />
                <Setter Property="Content">
                    <Setter.Value>
                            <TextBlock Text="Mouse is over" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="templateBorder" Property="Background" Value="LightBlue" />
                <Setter TargetName="templateBorder" Property="BorderBrush" Value="DarkKhaki" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


</Window.Resources>

<Grid>

    <Button Content="Hello World" Template="{StaticResource ngButton}" Name="ngButtonHello" Height="200" Width="200"/>

</Grid>

Thanks for your help.

Upvotes: 2

Views: 742

Answers (1)

Julien Lebosquain
Julien Lebosquain

Reputation: 41253

Please read Dependency Property Value Precedence: a local value ("Hello World" in your example) always has priority over a value set by a trigger.

Either set the original content property in a style, or use a converter in the local value attribute to convert from IsMouseOver to a specific string.

Upvotes: 2

Related Questions