2023年8月22日

WPF Border element background animation

作者 dikangqie
<ListBox Height="158" Name="lstStats" Width="Auto" HorizontalAlignment="Stretch" Margin="0" ItemsSource="{Binding ApplicationStatsValues}" Background="Transparent" BorderThickness="0">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="1" Opacity="0.8" BorderBrush="LightGreen" CornerRadius="3" Margin="0,0,0,2">
                <Border.Background>
                    <SolidColorBrush />
                </Border.Background>
                <Border.Triggers>
                    <EventTrigger RoutedEvent="Border.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#6990EE90" Duration="0:0:0.3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Border.MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent" Duration="0:0:3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Border.Triggers>

                    <DockPanel Height="60" Width="284" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                    <TextBlock DockPanel.Dock="Bottom" Text="{Binding Description}" Height="30" Width="Auto" VerticalAlignment="Center" />
                    <TextBlock DockPanel.Dock="Left" Text="{Binding Title}" Height="30" Width="220" VerticalAlignment="Center" />
                    <TextBlock DockPanel.Dock="Right" Text="{Binding Value}" Height="30" Width="80" VerticalAlignment="Center" />
                </DockPanel>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>