WPF 自定义窗口关闭按钮

2016-09-09 08:05:17来源:cnblogs.com作者:WinterFish人点击

关闭图标设计主要涉及主要知识点:

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>

 

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台