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

效果图如下

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/