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

大周末的接着上一篇又玩了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的冷静、编码的激情、完成后的喜悦、挖坑的激动、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！