方案: 图标位置不变化的情况下设置透明度实现
代码:
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:local="clr-namespace:WpfApp1" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Title="MainWindow" Width="300" Height="300" mc:Ignorable="d"> <Window.Resources> <Duration x:Key="AnimationTime">0:0:.84</Duration> </Window.Resources> <Grid Background="Gray"> <Ellipse x:Name="ellipse" Width="80" Height="80" RenderTransformOrigin="0.5,0.5" /> <ec:PathListBox HorizontalAlignment="Left" VerticalAlignment="Top"> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" SourceElement="{Binding ElementName=ellipse}" /> </ec:PathListBox.LayoutPaths> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.770" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.700" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.630" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.560" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.490" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.420" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:.350" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:0.280" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:0.210" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:0.140" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:0.7" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> <Ellipse Width="15" Height="15" Fill="White"> <Ellipse.Triggers> <EventTrigger RoutedEvent="Window.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation BeginTime="0:0:0" RepeatBehavior="Forever" Storyboard.TargetProperty="Opacity" From=".2" To="1" Duration="{StaticResource AnimationTime}" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </ec:PathListBox> </Grid> </Window>