WPF界面设计技巧（4）—自定义列表项样式-白红宇

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

阅读量：6961 次

发布时间：2019-06-27

本文共 8412 字，大约阅读时间需要 28 分钟。

原文:

有前面修改按钮样式的基础，我们可以尝试来定制一个即好看又好用的 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>

</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

</Style>

<Setter.Value>

<Border.Background>

<GradientBrush.GradientStops>

</GradientStopCollection>

</GradientBrush.GradientStops>

</LinearGradientBrush>

</Border.Background>

</Border>

<ControlTemplate.Triggers>

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

<Trigger.EnterActions>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

<Trigger.ExitActions>

</Storyboard>

</BeginStoryboard>

</Trigger.ExitActions>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

最终效果（按钮是沿用以前教程制作的样式）：

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

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

你可能感兴趣的文章

iOS - 更轻量级的 AppDelegate - 面向服务设计

查看>>

什么样的爬虫才是好爬虫：Robots协议探究

[LintCode/LeetCode] Search Insert Position

查看>>

Node处理http跨域请求

查看>>

Gradle for Android 第五篇( 多模块构建 )

查看>>

框架也可以这样用 easy

查看>>

LCUI 1.1.0 Beta 发布，C 的图形界面库

查看>>

recyclerView 遇到IndexOutOfBoundsException 及解决

查看>>

微信支付教程系列之现金红包

查看>>

mybatis中resultMap与resultType的使用说明

MariaDB（mysql）之半同步复制及复制过滤器的使用

查看>>

WCF Ria Service 理解制图版本【待续】

查看>>

【IOS】高仿糗事百科客户端（基本实现了除注册，评论之外的功能）

查看>>

puppet之模块详解

查看>>