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();
}