WPF 模板

@果酱  March 28, 2025

久了没写WPF会忘了

WPF控件模板

动画

属性值更改时触发动画

<Window x:Class="ControlTemplateDemo.MainWindow"
        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:ControlTemplateDemo"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent="WidthAndHeight" MinWidth="250">
    <Window.Resources>
        <ControlTemplate x:Key="roundbutton" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <!--用VisualState管理动画-->
                    <!--<VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                                    To="{TemplateBinding Background}"
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="backgroundElement" 
                                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                                    To="Yellow" 
                                    Duration="0:0:0.3"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>-->
                </VisualStateManager.VisualStateGroups>
                <Ellipse x:Name="backgroundElement" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding Foreground}" />
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <!--用Triggers触发动画-->
                    <Setter Property="Fill" TargetName="backgroundElement" Value="Yellow"/>
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 From="1"
                                    To="0" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                                 From="0"
                                    To="1" Duration="0:0:3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <StackPanel Margin="10">

        <Label>Unstyled Button</Label>
        <Button>button1</Button>
        <Label>Rounded Button</Label>
        <Button Template="{StaticResource roundbutton}" Width="65" Height="65">
            Button2
            <!--<CheckBox>Checkbox in a button</CheckBox>-->
        </Button>
    </StackPanel>

</Window>

添加新评论