WPF 自定義窗口關閉按鈕 - kybs0－IT工程師數位筆記本

文章出處

關閉圖標設計主要涉及主要知識點：

1、Path，通過Path來畫線。當然一般水平、豎直也是可以用Rectangle/Border之類的替代

一些簡單的線條圖標用Path來做，還是很方便的。

2、簡單的動畫，Animation用法

Button樣式如下：

    <Button x:Name="BtnClose" Click="BtnClose_OnClick">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <Grid x:Name="Uc_Grid" VerticalAlignment="Center" Height="25" Width="25">
                        <Path x:Name="Uc_Path1" Stroke="DodgerBlue" StrokeThickness="4" Data="M0,0 L20,20" VerticalAlignment="Center" HorizontalAlignment="Center"></Path>
                        <Path x:Name="Uc_Path2" Stroke="DodgerBlue" StrokeThickness="4" Data="M20,0 L0,20" VerticalAlignment="Center" HorizontalAlignment="Center"></Path>
                        <Grid.RenderTransform>
                            <RotateTransform x:Name="Uc_Transform" Angle="0" CenterY="12.5" CenterX="12.5"></RotateTransform>
                        </Grid.RenderTransform>
                    </Grid>
                    <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"></ContentPresenter>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="Uc_Path1" Property="Data" Value="M0,0 L22,22"></Setter>
                        <Setter TargetName="Uc_Path2" Property="Data" Value="M22,0 L0,22"></Setter>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Uc_Path1" Property="Data" Value="M0,0 L24,24"></Setter>
                        <Setter TargetName="Uc_Path2" Property="Data" Value="M24,0 L0,24"></Setter>
                    </Trigger>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                            <Storyboard TargetName="Uc_Transform" TargetProperty="Angle">
                                <DoubleAnimation From="0" To="90" Duration="0:0:0.1"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>