WPF模板觸發器Demo

1、界面設計如圖：

2、xaml代碼如下：

<Window x:Class="WpfAppDemo.TemplateDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="模板窗體" Height="466.046" Width="652.49">
    <Window.Resources>
        <ControlTemplate x:Key="RoundBtnTemplte" TargetType="Button">
            <!--定義視覺樹-->
            <Grid>
                <Ellipse Name="roundBtn" Width="80" Height="80" >
                    <Ellipse.Fill>
                        <!--漸變色-->
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0" Color="Blue"/>
                            <GradientStop Offset="1" Color="LightSkyBlue"/>
                        </LinearGradientBrush>

                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse Width="60" Height="60">
                    <Ellipse.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Offset="0" Color="GreenYellow"/>
                            <GradientStop Offset="1" Color="LightPink"/>
                        </LinearGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>

                <ContentPresenter Content="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center">
                </ContentPresenter>
            </Grid>
            <!--定義視覺樹__end-->
            <!--定義觸發器-->
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="roundBtn" Property="Fill" Value="Red">
                    </Setter>
                </Trigger>
                <Trigger Property="IsFocused" Value="true">
                    <Setter TargetName="roundBtn" Property="Fill" Value="Yellow">
                    </Setter>
                </Trigger>

            </ControlTemplate.Triggers>
            <!--定義觸發器_End-->
        </ControlTemplate>
    </Window.Resources>
    <Grid Margin="0,0,0,5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*">

            </ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <StackPanel Margin="10,10,110,10" Grid.Column="0" Orientation="Horizontal">
            <CheckBox Name="TestCheckBox" Content=""/>
            <TextBlock>
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Setter Property="Text" Value="Hello,這是測試！"></Setter>
                        <Setter Property="FontSize" Value="16"></Setter>
                        <Setter Property="Foreground" Value="Green"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=TestCheckBox,Path=IsChecked}" Value="True">
                                <Setter Property="Text" Value="觸發器測試"></Setter>
                                <Setter Property="Foreground" Value="Red"></Setter>
                                <Setter Property="FontSize" Value="26"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                    
                </TextBlock.Style>
            </TextBlock>

        </StackPanel>
        <StackPanel Margin="10" Grid.Column="1" Orientation="Horizontal">
            <Button Padding="5" Margin="5,5,5,312" Content="確定" FontSize="16" Template="{StaticResource RoundBtnTemplte}" RenderTransformOrigin="-0.849,0.498"/>
            <Button Padding="5" Margin="10,20,5,312" Width="83" Content="nomal button"/>
        </StackPanel>
        <StackPanel Margin="10" Grid.Column="1" Orientation="Horizontal"/>
    </Grid>
</Window>

 

3、運行效果：

說明：

1、使用DataTrigger  當TestCheckBox爲選中狀態時，修改控件的顯示字體大小和顏色。

2、資源定義了RoundBtnTemplte模板，應用類型是Button，樣式是橢圓形的漸變色。ContentPresenter呈現內容可以根據自定義

Content="{TemplateBinding Button.Content}"