wpf ListBoxItem 选中动画

XAML


    <Grid>

        <Grid.Resources>
            <Style x:Key="SliderStyle" TargetType="Rectangle">
                <!--  设置两端为圆角  -->
                <Setter Property="RadiusX" Value="2" />
                <Setter Property="RadiusY" Value="2" />
                <!--  使用同颜色填充  -->
                <Setter Property="Fill" Value="SlateGray" />
                <Setter Property="Width" Value="4" />
                <!--  这里设置为置顶,高度为每一个 listboxitem 的高度  -->
                <Setter Property="VerticalAlignment" Value="top" />
                <Setter Property="Height" Value="40" />
                <!--  默认不可见  -->
                <Setter Property="Opacity" Value="0" />
                <Setter Property="Grid.Column" Value="0" />
                <Setter Property="HorizontalAlignment" Value="Right" />
                <Setter Property="Margin" Value="0,0,-8,0" />
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <TranslateTransform Y="5" />
                    </Setter.Value>
                </Setter>

            </Style>
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ListBox
            x:Name="ListBox"
            Grid.Column="1"
            VerticalAlignment="Top">
            <ListBox.ItemContainerStyle>
                <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="ListBoxItem">
                    <Setter Property="Height" Value="50" />
                    <EventSetter Event="Selected" Handler="ListBox_Selected_OnHandler" />
                    <EventSetter Event="MouseLeave" Handler="ListBox_MouseLeave_OnHandler" />
                    <EventSetter Event="MouseEnter" Handler="ListBox_MouseEnter_OnHandler" />
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem>选项 1</ListBoxItem>
            <ListBoxItem>选项 2</ListBoxItem>
            <ListBoxItem>选项 3</ListBoxItem>
        </ListBox>

        <!--  这个作为鼠标移上后的效果  -->
        <Rectangle
            x:Name="FloatingSlider"
            Grid.Column="0"
            Opacity="0"
            Style="{StaticResource SliderStyle}" />

        <!--  这个作为选中后的效果  -->
        <Rectangle
            x:Name="Slider"
            Grid.Column="0"
            Fill="Brown"
            Style="{StaticResource SliderStyle}" />

    </Grid>

代码

        // 先显示
        this.FloatingSlider.Visibility = Visibility.Visible;
        StartShowAnimation(this.FloatingSlider, true);
        // 再移动
        var y = this.GetSliderY(item, listBox);
        this.MoveSliderAnimation(this.FloatingSlider, y);

    // 设置显示块显示出来
    private static void StartShowAnimation(DependencyObject target, bool show)
    {
        var animation = new DoubleAnimation
        {
            To = show ? 1d : 0d,
            Duration = TimeSpan.FromSeconds(0.5)
        };

        Storyboard.SetTarget(animation, target);
        Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));

        Storyboard storyboard = new();
        storyboard.Children.Add(animation);

        storyboard.Begin();
    }

    // 进行移动
    private void MoveSliderAnimation(DependencyObject target, double to)
    {
        var animation = new DoubleAnimation
        {
            To = to,
            Duration = TimeSpan.FromSeconds(0.3),
            EasingFunction = new ElasticEase() { EasingMode = EasingMode.EaseInOut }
        };

        Storyboard.SetTarget(animation, target);
        Storyboard.SetTargetProperty(animation, new PropertyPath("RenderTransform.Y"));

        Storyboard storyboard = new();
        storyboard.Children.Add(animation);

        storyboard.Begin();
    }
上一篇
下一篇