WPF界面设计技巧(8)—自制山寨版CheckListBox-阿里云开发者社区

开发者社区> 杰克.陈> 正文

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

简介: 原文:WPF界面设计技巧(8)—自制山寨版CheckListBox    近年来IT市场山寨横行啊,我们今天也来发扬一下山寨精神,搞个自制的CheckListBox出来。   喏,CheckListBox 就是下面这玩意啦:       为什么要搞它?我们是山寨耶,说搞谁就搞谁!   我也不知道为什么,WPF里没有提供 CheckListBox 控件,但凭借WPF强大的外观定制能力,我们可以轻松的创制一个自己的 CheckListBox 。
+关注继续查看
原文:WPF界面设计技巧(8)—自制山寨版CheckListBox

 

 

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

 

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

 

 

 

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

 

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

 

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

 

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

 

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

 

 

 

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

 

 

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

 

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

 

 

 

 

 

<CheckBox Margin="2,0,0,0" VerticalAlignment="Center" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},Path=IsSelected,Mode=TwoWay}">
  
<ContentPresenter Margin="2"/>
</CheckBox>

 

 

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

 

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

 

 

 

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

 

 

 

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

 

 

 

简直和真的一样!

 

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

 

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

 

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

 

源代码下载

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
WPF界面设计技巧(2)—自定义漂亮的按钮样式
原文:WPF界面设计技巧(2)—自定义漂亮的按钮样式  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了。
1825 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
9802 0
借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的。
914 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10871 0
wpf控件设计时支持(3)
原文:wpf控件设计时支持(3)     wpf设计时调试 编辑模型 装饰器 1.wpf设计时调试   为了更好的了解wpf设计时框架,那么调试则非常重要,通过以下配置可以调试控件的设计时代码 (1)将启动项目配置成外部的visual studio ide启动程序devenv.
809 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13528 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7184 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载