WPF界面设计技巧(4)—自定义列表项样式-阿里云开发者社区

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

WPF界面设计技巧(4)—自定义列表项样式

简介: 原文:WPF界面设计技巧(4)—自定义列表项样式   有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分。   打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局。
+关注继续查看
原文:WPF界面设计技巧(4)—自定义列表项样式



 

有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分。

 

打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局。

 

  Window1.xaml 中为窗体 Loaded 事件及按钮 Click 事件添加事件处理:

 

 

 

Code
<Window x:Class="自定义列表项.Window1"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    Title
="Window1" Height="351" Width="416" Loaded="Window_Loaded">
    
<Grid>
        
<ListBox Margin="26,21,27,54" Name="listBox1" />
        
<Button Height="23" Click="button1_Click" Margin="26,0,0,13" Name="button1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="75" Background="AliceBlue">选择文件</Button>
    
</Grid>
</Window>

 

 

在项目的引用中添加对 System.Windows.Froms 的引用,因为我们要使用其中的“打开文件对话框”组件。

 

 

 

添加 using 语句,引用以下所示的命名空间。为 System.Windows.Froms 设置别名是为了防止和现有的命名空间内的名称冲突。

 

  

Window1.xaml.cs 中书写以下代码:

 

 

 

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.IO;
using System.Collections.ObjectModel;
using Forms=System.Windows.Forms;


namespace 自定义列表项
{
    
/**//// <summary>
    
/// Window1.xaml 的交互逻辑
    
/// </summary>

    public partial class Window1 : Window
    
{
        
public Window1()
        
{
            InitializeComponent();
        }


        
public ObservableCollection<FileInfo> FileList=new ObservableCollection<FileInfo>();


        
private void Window_Loaded(object sender, RoutedEventArgs e)
        
{
            listBox1.ItemsSource 
= FileList;
        }


        
private void button1_Click(object sender, RoutedEventArgs e)
        
{
            var open
=new Forms.OpenFileDialog { Multiselect = true };
            
if (open.ShowDialog() == Forms.DialogResult.OK)
            
{
                
foreach (string f in open.FileNames) FileList.Add(new FileInfo(f));
            }

        }

    }

}

 

 

我们采用泛型集合 ObservableCollection<FileInfo> 装载文件列表,ObservableCollection 不同于以往的集合类型,它会在其内容更改时向 WPF 控件发送更新通知,以确保显示和数据的同步,所以 WPF 开发中,集合类型应多使用该类型。

 

在窗体载入完毕后,将 ListBox1 绑定到文件列表 FileList

 

这时编译并运行程序,选择一些文件,应当是这个样子:

 

 

在App.xaml中添加如下样式设定:

 

 

Code
         <!--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>

 

 

最终效果(按钮是沿用以前教程制作的样式):

 

 

样式代码部分基本没什么可讲的了,看看前面的教程应该都可以搞明白了,有不懂的地方请留言发问吧。

 

源代码下载

 

这次教程主要是为了后面做铺垫,在下一篇教程中,我将会为大家讲述如何定制列表项的内容,比如让每个项目都可以显示图片、文件尺寸等信息,借助 WPF 的强大界面设计特性,我们不需开发自定义控件,只需用一些 XAML 代码,就可以为普通控件赋予丰富的呈现功能,敬请关注。

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

相关文章
WPF界面设计技巧(2)—自定义漂亮的按钮样式
原文:WPF界面设计技巧(2)—自定义漂亮的按钮样式  上次做了个很酷的不规则窗体,这次我们来弄点好看的按钮出来,此次将采用纯代码来设计按钮样式,不需要 Microsoft Expression Design 辅助了。
1813 0
WPF界面设计技巧(3)—实现不规则动画按钮
原文:WPF界面设计技巧(3)—实现不规则动画按钮    发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作。   不规则按钮的做法实际上和先前我们做不规则窗体的方法差不多,只是为按钮弄个不是那么方方正正的背景而已。
970 0
WPF下的视频录制界面设计
原文: WPF下的视频录制界面设计 在去年12月份,我曾经写过三篇文章讨论C#下视频录制、播放界面的设计。这三篇文章是:利用C#画视频录制及播放的界面(一) 利用C#画视频录制及播放的界面(二)利用C#画视频录制及播放的界面(三)  今天,我又来写写WPF下视频录制及播放界面的制作。
727 0
借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制
原文:借助Photoshop,Illustrator等设计软件进行WPF图形图像的绘制 本文所示例子是借助第三方设计软件,制作复杂的矢量图形,转成与XAML酷似的SVG,再转换成xaml而实现的。
914 0
WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容。
1121 0
自定义QGraphicsItem选中样式
简述 在 Scene 中添加 QGraphicsItem 后,当选中该 item 时,会看到边缘区域出现虚线,感觉不太美观。下面,我们来讲解如何去掉虚线并自定义选中样式。 简述 默认样式 虚线的由来 去掉虚线 自定义选中样式 默认样式 以椭圆为例,其它如:矩形、多边形等 item 类似。 // 构建一个椭圆 QGraphicsEllipseItem
3362 0
WPF界面设计技巧(5)—自定义列表项呈现内容
原文:WPF界面设计技巧(5)—自定义列表项呈现内容    接续上次的程序,稍微改动一下原有样式,并添加一个数据模板,我们就可以达成下面这样的显示功能:     鼠标悬停于文件列表项上,会在工具提示中显示图像缩略图及文件名、文件大小信息。
918 0
WPF界面设计技巧(4)—自定义列表项样式
原文:WPF界面设计技巧(4)—自定义列表项样式   有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分。   打开 Microsoft Visual Studio 2008 ,建立一个WPF应用程序,调整窗体大小,在窗体内创建一个 ListBox 和一个 Button ,按下图所示布局。
771 0
+关注
杰克.陈
一个安静的程序猿~
10427
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载