WPF效果第一百八十七篇之再玩ListBox

Posted 2022-06-06 dotNET跨平台

大周末的接着上一篇又玩了ListBox,这不又来再次去玩耍ListBox;毕竟是我的最爱,没办法就喜欢玩耍他;闲话也不多扯了,直接看最终效果:

2、ItemsPanel还是老样子:

<ItemsPanelTemplate x:Key="CommonItemsPanelTemplate">
  <WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>

3、没UI射击狮,暂时贴图回头可以Path:

<ControlTemplate TargetType="x:Type ListBoxItem">
    <Border x:Name="Bd" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" CornerRadius="4" Background="TemplateBinding Background" Padding="TemplateBinding Padding" SnapsToDevicePixels="true">
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Border x:Name="TopBoder" CornerRadius="4" Margin="0,2,0,0" Background="#18191B" Width="50" Height="8" />
            <Border Width="85" Height="50" Margin="0,4,0,0">
                <Border.Background>
                    <ImageBrush ImageSource="Binding Name,Converter=StaticResource NameToImageBrushConverter" Stretch="Fill" /> </Border.Background>
            </Border>
            <WrapPanel HorizontalAlignment="Center" Margin="0,2,0,0">
                <Path Data="M10,5 C10,7.7614237 7.7614237,10 5,10 C2.2385763,10 0,7.7614237 0,5 C0,2.2385763 2.2385763,0 5,0 C7.7614237,0 10,2.2385763 10,5 z" Width="10" Height="10" Fill="#1DF340" Visibility="Binding IsInput,Converter=StaticResource BooleanToVisibilityConverter" />
                <TextBlock Text="Binding Name" Foreground="White" Margin="2,0,0,0" /> </WrapPanel>
        </StackPanel>
    </Border>
</ControlTemplate>

4、简单的一个触发器:

<Trigger Property="IsSelected" Value="True">
    <Setter Property="Background" TargetName="TopBoder" Value="white" />
    <Setter Property="Background" Value="#6F7F8E" />
</Trigger>

5、最后别忘了ScrollViewer：

<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />

6、至于ListBox的不规则背景,我直接用的Blend4的笔一点点纯手工绘制,其中一个:

<Path Grid.RowSpan="2" Data="M141.24989,160.71056 L141.062,270.09375 141.31235,271.93725 142.24932,272.81175 143.87342,273.84348 147.12158,273.84348 153.14944,273.84348 453.64267,273.72864 454.43341,273.33281 455.32892,272.83281 456.01604,271.83282 456.49446,270.60366 457.13959,269.27033 457.40977,267.97867 472.23531,217.20807 472.66184,215.49974 472.59912,214.37475 472.28679,213.12476 471.31857,210.40602 457.95092,162.49999 456.26434,158.50001 455.82708,157.31251 455.32736,156.56301 453.39092,156.18851&#xd;&#xa;450.67366,155.93901 149.49536,155.83535 145.60167,156.25233 143.99838,156.58566 143.16551,156.91898 142.12441,157.5023 141.49976,158.29395 141.24989,159.12726 141.20825,160.04391" Fill="#FF26282C" Stretch="Fill" Stroke="Black" />

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