WPF效果第一百九十篇之再耍ListBox

前面一篇效果基于Expander和ListBox实现了一下所需要的效果;今天再次实现点底部不一样的效果;最终实现的效果:

1、ItemContainerStyle我是比较简单粗暴直接分了二行:ListBox+Canvas实现:

<ControlTemplate TargetType="{x:Type ListBoxItem}"><Grid Background="#18191B" Margin="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"><Grid.RowDefinitions><RowDefinition/><RowDefinition Height="80"/></Grid.RowDefinitions><ListBox Style="{StaticResource SignalCardListBox}" Name="SignalCardListBox" ItemsSource="{Binding SignalDistributionCards}"/><Canvas Grid.Row="1" Width="{Binding ElementName=SignalCardListBox,Path=ActualWidth}"><Border Canvas.Left="{Binding LeftCardCount,Converter={StaticResource LeftCardCountToVideoCardLeft}}" Canvas.Top="30" BorderBrush="Green" HorizontalAlignment="Center" VerticalAlignment="Bottom" BorderThickness="2" Padding="0" Width="150" Height="40"><CheckBox Margin="4,0,0,0" Content="视频接入卡"Style="{StaticResource CheckCheckBoxStyle}"IsChecked="{Binding IsChecked}"/></Border><Path Data="M13.170958,0L14.585027,1.4149784 3.8476841,12.144024 32.000095,12.144024 32.000095,14.145017 3.8188674,14.145017 14.607,24.922982 13.191954,26.338998 0,13.159001z"Stretch="Fill"  Fill="White" Height="26" Width="50" RenderTransformOrigin="0.5,0.5"Canvas.Left="{Binding LeftCardCount,Converter={StaticResource LeftCardCountToVideoCardLeftArrowValue}}"><Path.RenderTransform><RotateTransform Angle="45"/></Path.RenderTransform></Path><Path Data="M13.170958,0L14.585027,1.4149784 3.8476841,12.144024 32.000095,12.144024 32.000095,14.145017 3.8188674,14.145017 14.607,24.922982 13.191954,26.338998 0,13.159001z"Stretch="Fill"  Fill="White" Height="26" Width="49" RenderTransformOrigin="0.5,0.5"Canvas.Left="{Binding LeftCardCount,Converter={StaticResource LeftCardCountToVideoCardRightArrowValue}}"><Path.RenderTransform><RotateTransform Angle="135"/></Path.RenderTransform></Path></Canvas></Grid>
</ControlTemplate>

2、左侧箭头Canvas.Left的转换器:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{double leftValue = 0.0;if(value != null){//左侧带载的信号分配卡的数量int count = System.Convert.ToInt32(value);if(count != 0){//单个信号分配卡的宽度是200，所以有几个就要乘以几个，在减去左侧箭头的宽度(50)leftValue = count * 200 - 50;}}return leftValue;
}

3、右侧箭头Canvas.Left的转换器：

public object Convert(object value, Type targetType, object parameter, CultureInfo culture){double leftValue = 0.0;if(value != null){//左侧带载的信号分配卡的数量int count = System.Convert.ToInt32(value);if(count != 0){//单个信号分配卡的宽度是200，所以有几个就要乘以几个leftValue = count * 200;}}return leftValue;}

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下！