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

最新推荐文章于 2023-12-24 10:08:20 发布

转载最新推荐文章于 2023-12-24 10:08:20 发布 · 205 阅读

CC 4.0 BY-SA版权

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654090957&idx=5&sn=060a25233acd393ad7c6c23b44cfafea&chksm=80d81298b7af9b8ec636abcf586e277b06b419c4b237d0a370106c221f6468cbfb6f0943058e&scene=126&&sessionid=0

文章标签：

#canvas #html #css3 #layout #animation

这篇博客展示了如何利用WPF的ListBox和Canvas控件创建一个独特的UI布局。作者通过ControlTemplate创建了一个两行布局，第一行是ListBox，第二行包含两个箭头图标。ListBox的ItemContainerStyle被详细描述，而Canvas上的箭头位置通过转换器动态计算。博客还提供了转换器的代码实现，用于根据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的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下！