WPF界面设计技巧(8)—自制山寨版CheckListBox

原文:WPF界面设计技巧(8)—自制山寨版CheckListBox

 WPF界面设计技巧(8)—自制山寨版CheckListBox

 

近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来。

 

喏,CheckListBox 就是下面这玩意啦:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

为什么要搞它?我们是山寨耶,说搞谁就搞谁!

 

我也不知道为什么,WPF里没有提供 CheckListBox 控件,但凭借WPF强大的外观定制能力,我们可以轻松的创制一个自己的 CheckListBox

 

CheckListBox 的基本功能其实和 ListBox 没有太大出入,只要将普通的ListBox 的选择模式设为多选,它就能基本实现 CheckListBox 的功用了,只不过从用户角度来说,它的使用方式不如 CheckListBox 看起来那么明确而已。

 

我们接下来就仅仅采用外观修改的方法,将 ListBox CheckBox 拼插,打造出无敌山寨版 CheckListBox 

 

首先在窗体设计器中建立一个ListBox,并为之填入一些内容项:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

然后我们把第四讲时的列表样式代码COPYApp.xaml里去:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBoxWPF界面设计技巧(8)—自制山寨版CheckListBoxCode
WPF界面设计技巧(8)—自制山寨版CheckListBox         <!--ListBox样式-->
WPF界面设计技巧(8)—自制山寨版CheckListBox        
<Style TargetType="ListBox">
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="BorderBrush" Value="#BDD4F1"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="BorderThickness" Value="1"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="Background" Value="#F8F7F5"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="VerticalContentAlignment" Value="Center"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox        
</Style>
WPF界面设计技巧(8)—自制山寨版CheckListBox        
<!--ListBoxItem样式-->
WPF界面设计技巧(8)—自制山寨版CheckListBox        
<Style TargetType="ListBoxItem">
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="Foreground" Value="#B5BABF"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="OverridesDefaultStyle" Value="True"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="Height" Value="24"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
<Setter Property="Template">
WPF界面设计技巧(8)—自制山寨版CheckListBox                
<Setter.Value>
WPF界面设计技巧(8)—自制山寨版CheckListBox                    
<ControlTemplate TargetType="ListBoxItem">
WPF界面设计技巧(8)—自制山寨版CheckListBox                        
<Border Name="back" BorderBrush="#F8F7F5" BorderThickness="0,1,0,1">
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
<Border.Background>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
<GradientBrush.GradientStops>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
<GradientStopCollection>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<GradientStop Color="#F8F7F5" Offset="0.0"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<GradientStop Color="#F8F7F5" Offset="0.5"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<GradientStop Color="#F8F7F5" Offset="0.51"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<GradientStop Color="#F8F7F5" Offset="1"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
</GradientStopCollection>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
</GradientBrush.GradientStops>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
</LinearGradientBrush>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
</Border.Background>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
<ContentPresenter Margin="2" VerticalAlignment="Center"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                        
</Border>
WPF界面设计技巧(8)—自制山寨版CheckListBox                        
<ControlTemplate.Triggers>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
<Trigger Property="IsSelected" Value="True">
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
<Trigger.EnterActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
<BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
<Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<DoubleAnimation To="32" Duration="0:0:0.3" Storyboard.TargetProperty="Height"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#F3C37C" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#952B00" Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#FFF" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#FFEF99" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#FFE13F" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#FFF3B0" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
</Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
</BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
</Trigger.EnterActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
<Trigger.ExitActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
<BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
<Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<DoubleAnimation BeginTime="0:0:0.4" Duration="0:0:0.2" Storyboard.TargetProperty="Height"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
</Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
</BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
</Trigger.ExitActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
</Trigger>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
<Trigger Property="IsMouseOver" Value="True">
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
<Trigger.EnterActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
<BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
<Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#D8E6F5" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#617A98" Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#F6F9FD" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#E0EBF7" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#D7E5F6" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation To="#F6F9FD" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
</Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
</BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
</Trigger.EnterActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
<Trigger.ExitActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
<BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
<Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetProperty="(ListBoxItem.Foreground).(SolidColorBrush.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                            
<ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[3].(GradientStop.Color)" />
WPF界面设计技巧(8)—自制山寨版CheckListBox                                        
</Storyboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                    
</BeginStoryboard>
WPF界面设计技巧(8)—自制山寨版CheckListBox                                
</Trigger.ExitActions>
WPF界面设计技巧(8)—自制山寨版CheckListBox                            
</Trigger>
WPF界面设计技巧(8)—自制山寨版CheckListBox                        
</ControlTemplate.Triggers>
WPF界面设计技巧(8)—自制山寨版CheckListBox                    
</ControlTemplate>
WPF界面设计技巧(8)—自制山寨版CheckListBox                
</Setter.Value>
WPF界面设计技巧(8)—自制山寨版CheckListBox            
</Setter>
WPF界面设计技巧(8)—自制山寨版CheckListBox        
</Style>

 

修改 ContentPresenter 元素处的代码,用一个 CheckBox 将其包起来:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox<CheckBox Margin="2,0,0,0" VerticalAlignment="Center" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},Path=IsSelected,Mode=TwoWay}">
WPF界面设计技巧(8)—自制山寨版CheckListBox  
<ContentPresenter Margin="2"/>
WPF界面设计技巧(8)—自制山寨版CheckListBox
</CheckBox>

 

 

从上面的代码我们可以看到,CheckBox IsChecked 属性双向绑定到了列表项的 IsSelected 属性上,这时勾选 CheckBox 就会使列表项被选中,反之亦然,这就是模拟 CheckListBox 的技术核心所在。

 

现在我们的界面是这个样子了:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

再完成最后一步,修改 ListBox 的选取模式为多选:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

OK,运行一下就是这样了:

 

 

WPF界面设计技巧(8)—自制山寨版CheckListBox 

简直和真的一样!

 

如何通过代码获取选定的项呢?这样就可以了:listBox1.SelectedItems

 

再附送一个小经验:当你程序运行后,在窗体的“Initialized”事件中自动从配置文件读取到数据,并将之绑定到 ListBox 后,想要将其默认设为全选的话,应当在窗体的“ContentRendered”事件中执行全选命令“listBox1.SelectAll()”,在“Loaded”、“Initialized”等事件中执行均无效,推测可能是控件载入到绑定数据之间会存在一定延迟。

 

最后是广告:本大寨主征押寨夫人数名,名额无限,先到为大。

 

源代码下载

上一篇:Mark一下CAS的搭建,今天刚刚搭建好


下一篇:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心