大周末的接著上一篇又玩了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的冷靜、編碼的激情、完成后的喜悅、挖坑的激動 、填坑的興奮;這也許就是屌絲程序員的樂趣吧;今天就到這里吧;希望自己有動力一步一步堅持下去;生命不息,代碼不止;大家抽空可以看看今天分享的效果,有好的意見和想法,可以在留言板隨意留言;我看到后會第一時間回復大家,多謝大家的一直默默的關注和支持!如果覺得不錯,那就伸出您的小手點個贊并關注一下,多謝您的支持！
