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