仿Iconfont-阿里巴巴矢量图标库 搜索动画

2017-01-13 19:11:27来源:cnblogs.com作者:闫驚鏵人点击

第七城市

效果图如下

 

style

 <Style x:Key="BtnSearch" TargetType="{x:Type Button}">            <Setter Property="Width" Value="200"/>            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate  TargetType="{x:Type Button}">                        <ControlTemplate.Resources>                            <Storyboard x:Key="Timeline1">                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_Border" Storyboard.TargetProperty="Width">                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000"  Value="200"/>                                </DoubleAnimationUsingKeyFrames>                            </Storyboard>                            <Storyboard x:Key="Timeline2">                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="_Border" Storyboard.TargetProperty="Width">                                    <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>                                </DoubleAnimationUsingKeyFrames>                            </Storyboard>                        </ControlTemplate.Resources>                        <Border>                            <Grid HorizontalAlignment="Right">                                <Border x:Name="_Border" Background="#FF0000" CornerRadius="30" Height="60" Width="0">                                    <TextBox VerticalAlignment="Center" BorderThickness="0" BorderBrush="Transparent" Background="Transparent" Margin="10,0" Foreground="White" FontSize="14" CaretBrush="White">                                    </TextBox>                                </Border>                                <Grid HorizontalAlignment="Right">                                <Rectangle Fill="#FF0000" RadiusX="30" RadiusY="30"  Height="60" Width="60"/>                                    <Path x:Name="_path" Data="M850.453 800.653l0.105-0.223-197.89-193.493c38.961-45.944 61.363-103.043 63.198-161.203 3.664-70.834-24.038-144.003-74.073-195.682-42.739-45.105-102.838-75.421-164.821-83.209-12.031-1.639-24.352-2.458-36.625-2.458-61.344 0-121.126 19.942-168.322 56.113-54.705 40.781-92.468 101.996-103.616 167.925-11.054 61.446 0.911 127.372 32.811 180.82 21.819 37.152 52.888 69.073 89.828 92.298 33.909 21.453 72.924 35.474 112.775 40.485 11.958 1.62 24.219 2.439 36.445 2.439 56.586 0 112.572-17.3 158.132-48.773l197.642 193.343 3.655 3.368 0.105-0.091c6.515 5.235 14.768 8.14 23.319 8.14 20.202 0 36.637-16.127 36.637-35.947 0-8.787-3.358-17.279-9.308-23.853M649.856 536.743c-32.378 64.734-97.46 112.073-169.899 123.548-33.909 5.773-69.646 3.986-102.941-5.139-64.972-17.433-120.583-63.58-148.808-123.528-32.677-66.559-28.602-150.391 10.387-213.6 34.702-58.404 95.873-99.427 163.56-109.707l4.802-0.71c2.525-0.409 5.069-0.799 7.555-1.082 8.369-0.858 16.882-1.286 25.282-1.286 34.569 0 68.716 7.283 98.811 21.085 55.059 24.691 98.955 70.579 120.409 125.929 23.529 59.109 20.125 128.061-9.157 184.488z" Fill="White" Stretch="Fill" Height="30" Width="30"/>                                </Grid>                            </Grid>                        </Border>                        <ControlTemplate.Triggers>                            <Trigger Property="IsMouseOver" Value="True">                                <Trigger.EnterActions>                                    <BeginStoryboard Storyboard="{StaticResource Timeline1}"/>                                </Trigger.EnterActions>                                <Trigger.ExitActions>                                    <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>                                </Trigger.ExitActions>                            </Trigger>                        </ControlTemplate.Triggers>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

  

 

引用

 <Button x:Name="btnSearch" Style="{StaticResource BtnSearch}" >

 转载请注明地址http://www.cnblogs.com/yanjinhua/

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台