WPF效果第一百九十篇之再耍ListBox
Posted dotNET跨平台
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下!
开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系以上是关于WPF效果第一百九十篇之再耍ListBox的主要内容,如果未能解决你的问题,请参考以下文章