xaml

鼠标移上、移出变色及缩放，工作中呼吸灯效果

    <Grid>

        <!--  为了方便例子中只用了一个  -->
        <Ellipse
            x:Name="WifiEllipse1"
            Width="180"
            Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
            Fill="ForestGreen" />

        <!--  不要设置宽度，不然优先级比较高, Trigger.Setter 中设置不了，要 Trigger 中使用动画才能设置  -->
        <ToggleButton
            HorizontalAlignment="Center" VerticalAlignment="Center"
            Background="#A8B417" ClipToBounds="False">

            <ToggleButton.Template>

                <ControlTemplate TargetType="ToggleButton">

                    <!--  按钮的结构  -->
                    <Grid
                        x:Name="RootGrid"
                        Width="44"
                        Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"
                        RenderTransformOrigin=".5 .5">

                        <!--  呼吸缩放时使用，因为鼠标移上与移下时也与呼吸缩放直接控制 width 可能会冲突，这里呼吸缩放使用 ScaleTransform  -->
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="GridScaleTransform" ScaleX="1" ScaleY="{Binding RelativeSource={RelativeSource Self}, Path=ScaleX}" />
                        </Grid.RenderTransform>

                        <Ellipse
                            x:Name="ButtonEllipse"
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                            Fill="White">
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="30" Opacity=".3" />
                            </Ellipse.Effect>
                        </Ellipse>

                        <Image
                            Width="28" Height="28"
                            Source="/Resource/Images/wifi.png" />
                    </Grid>

                    <ControlTemplate.Triggers>

                        <!--  鼠标移上移下时缩放，只在非点击状态下起效果，使用了 MultiTrigger  -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsChecked" Value="False" />
                            </MultiTrigger.Conditions>

                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <!--  鼠标悬停动画（放大）  -->
                                        <DoubleAnimation
                                            Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width" To="55" Duration="0:0:0.4" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>

                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Width" To="44" Duration="0:0:0.2" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                        </MultiTrigger>

                        <!--  点击后启动呼吸灯效果  -->
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="ButtonEllipse" Property="Fill" Value="LimeGreen" />

                            <!--  呼吸灯效果  -->
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="BreathingBeginStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation
                                            AutoReverse="True" RepeatBehavior="Forever"
                                            Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="1.1"
                                            Duration="0:0:.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>

                            <!--  关闭呼吸灯效果  -->
                            <Trigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="BreathingBeginStoryboard" />
                            </Trigger.ExitActions>

                        </Trigger>

                        <!--  鼠标移上时背景颜色为控制本身背景， 这里需要使用 binding TemplatedParent， 不能简写会报错  -->
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ButtonEllipse" Property="Fill">
                                <Setter.Value>
                                    <Binding Path="Background" RelativeSource="{RelativeSource TemplatedParent}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>

                    </ControlTemplate.Triggers>

                </ControlTemplate>

            </ToggleButton.Template>

            <ToggleButton.Triggers>

                <!--  这里启用信号发射效果动画 ， 要控制外部元素，所以放在外层的 Triggers 中  -->
                <!--  注意：要使用 ToggleButton.Checked  -->
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <EventTrigger.Actions>
                        <BeginStoryboard x:Name="WifiEllipseBeginStoryboard">
                            <Storyboard>
                                <DoubleAnimation
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="WifiEllipse1" Storyboard.TargetProperty="Opacity" From="1" To="0"
                                    Duration="0:0:8" />
                                <DoubleAnimation
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetName="WifiEllipse1" Storyboard.TargetProperty="Width" From="55" To="240"
                                    Duration="0:0:8" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <EventTrigger.Actions>
                        <!--  停止动画  -->
                        <RemoveStoryboard BeginStoryboardName="WifiEllipseBeginStoryboard" />
                    </EventTrigger.Actions>
                </EventTrigger>

            </ToggleButton.Triggers>

        </ToggleButton>

    </Grid>