WPF 自定义ItemsControl/ListBox/ListView控件样式
一、前言
ItemsControl、ListBox、ListView这三种控件在WPF中都可作为列表信息展示控件。我们可以通过修改这三个控件的样式来展示我们的列表信息。
既然都是展示列表信息的控件，那他们有什么相同点和不同点呢。
同：
1、这三个控件都是列表型控件，可以进行列表绑定（ItemsSource）；
2、这三个控件均使用ItemsPresenter来展示列表信息；
异：
1、ListBox继承于ItemsControl，比ItemsControl一个Selector对象；
2、ListView继承于ListBox，比ListBox多一个View属性。
也就是说ItemsControl不支持列表项选择功能，ListBox支持单选、多选。ListView能以不同的视图形式展示列表信息。
下面我们通过例子来展现：
1.1、ItemsControl实现的图片选择预览控件
控件的效果如下：
下面贴上代码：
<StackPanel Orientation="Horizontal" Margin=" 0 0" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Rectangle x:Name="rectangle" RadiusX="0" RadiusY="0" Width="50" Height="50" MouseLeftButtonUp="UpLoadCaptrue_Click" SnapsToDevicePixels="True" StrokeDashArray="3 3 3 3" StrokeThickness="1" Margin="5 0">
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/UpLoad.png" Opacity="0.3" Stretch="Fill" Viewport="0.25 0.25 0.5 0.5"/>
</Rectangle.Fill>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Stroke" Value="#999999"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Stroke" Value="#1dc0a5"/>
</Trigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
</Grid>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Hidden" Width="360">
<ItemsControl x:Name="itemsControl" Background="Transparent" ItemsSource="{Binding }">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel>
<Grid Width="60" Height="60" SnapsToDevicePixels="True">
<Border BorderBrush="#999999" Width="50" Height="50" BorderThickness="1" Margin="5 0">
<Image Source="{Binding}" Width="40" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<Image Source="/Images/Close.png" Width="16" Height="16" MouseLeftButtonUp="ReMoveCaptrue_Click" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 2 0 0">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Color="Red" Opacity="1" BlurRadius="5"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
上面ItemsControl设置了ItemsPanel，由于我们的列表展示是横向的，所以设置StackPanel，并将Orientation设置为Horizontal。
里面有两个事件，添加图片UpLoadCaptrue_Click和移除图片ReMoveCaptrue_Click。代码如下：
public MainWindow()
{
InitializeComponent();
this.itemsControl.ItemsSource = Capture;
} public ObservableCollection<string> Capture = new ObservableCollection<string>(); /// <summary>
/// 上传截图
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void UpLoadCaptrue_Click(object sender, MouseButtonEventArgs e)
{
OpenFileDialog logoSelected = new OpenFileDialog();
logoSelected.Filter = "图片|*.jpg;*.png;*.bmp;*.gif";
if (logoSelected.ShowDialog() ==true)
{
Capture.Add(logoSelected.FileName);
}
} /// <summary>
/// 移除截图
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void ReMoveCaptrue_Click(object sender, MouseButtonEventArgs e)
{
Capture.Remove(((Image)sender).DataContext.ToString());
}
控件中用到的素材：
1.2、基于ListBox实现用户列表展示
下面的实例一般用于通讯软件用户列表展示。主要是通过修改ListBoxItem的样式来实现。
先看下实现的效果：
大体思路：先定义ListBoxStyle，定义ListBox的Style是为了实现去掉列表项的间隙，默认的ListBox里面有Padding值。我们把Padding改为0；然后定义ListBoxItem项的Style样式，因为我们是通过绑定数据的方式呈现，因此对于需要动态显示的值我们把它放到一个类中。
public List<UserInfo> UserList { get; set; }
public class UserInfo
{
public Brush UserBackground { get; set; }
public string Header { get; set; }
public string Name { get; set; }
public string Info { get; set; }
public int Count { get; set; }
}
ListBoxItem样式代码如下：
<Style x:Key="UserInfoStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid Height="50" x:Name="grid">
<Border Background="{Binding UserBackground}" Width="40" Height="40" CornerRadius="4" HorizontalAlignment="Left" Margin="5 0 0 0">
<TextBlock Text="{Binding Header}" FontSize="23" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<TextBlock Text="{Binding Name}" Margin="55 7 0 0" FontSize="13"/>
<TextBlock Text="{Binding Info}" Foreground="#808080" Margin="55 30 0 0"/>
<TextBlock Text="{Binding Count,StringFormat={}{0}人}" Foreground="#808080" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0 0 5 0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="grid" Property="Background" Value="#fceeb9"/>
</Trigger>
<Trigger Property="Selector.IsSelected" Value="true">
<Setter TargetName="grid" Property="Background" Value="#fae388"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ListBox样式代码如下：
<ListBox BorderThickness="1" ItemContainerStyle="{StaticResource UserInfoStyle}" x:Name="UserInfoList" BorderBrush="#eaeaeb" Background="Transparent" Width="280" Height="300" Margin="50 5 0 0">
<ListBox.Style>
<Style TargetType="ListBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0">
<ScrollViewer Focusable="False">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Style>
</ListBox>
后台C#代码初始化数据，及设定数据源：
UserList = new List<UserInfo>()
{
new UserInfo(){
UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),
Header="群",
Name="DESKTOP-0N",
Info="我要像风一样自由!",
Count=
},
new UserInfo(){
UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#ff9f4c")),
Header="张",
Name="张三丰",
Info="我要像风一样自由!",
Count=
},
new UserInfo(){
UserBackground=new SolidColorBrush((Color)ColorConverter.ConvertFromString("#9d9d9d")),
Header="鬼",
Name="鬼见愁",
Info="我要像风一样自由!",
Count=
},
};
this.UserInfoList.ItemsSource = UserList;
1.3、ListBoxView列表信息展示
ListBoxView信息展示有点像DataGrid控件，以下为ListBoxView基本样式代码：
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
<GridViewRowPresenter VerticalAlignment="Center" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FF866C"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FFEAE4"></Setter>
<Setter Property="Foreground" Value="Black"></Setter>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="35" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListViewStyle1" TargetType="{x:Type ListView}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="ItemContainerStyle" Value="{StaticResource ListViewItemStyle}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<ScrollViewer Padding="{TemplateBinding Padding}" Style="{DynamicResource {x:Static GridView.GridViewScrollViewerStyleKey}}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GridViewColumnHeaderStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Background" Value="#FFEAE4" />
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid SnapsToDevicePixels="True" >
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="7"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
<ContentPresenter x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<Canvas>
<Thumb x:Name="PART_HeaderGripper">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Canvas.Right" Value="-9"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" Padding="{TemplateBinding Padding}">
<Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" Value="#FF866B"/>
<Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="HeaderBorder" Value="#FF866B"/>
<Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="35"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
引用示例：
<ListView x:Name="ListView" Style="{StaticResource ListViewStyle1}" Width="500">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyle}">
<GridViewColumn Header="序号" DisplayMemberBinding="{Binding Num}" Width="100"/>
<GridViewColumn Header="名称" DisplayMemberBinding="{Binding Name}" Width="100"/>
<GridViewColumn Header="Template" Width="auto">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Content="{Binding Template}"></CheckBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
后台代码需要给ListBoxView绑定数据：
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ListViewDataList = new List<ListViewData>();
for (int i = ; i < ; i++)
{
ListViewDataList.Add(new ListViewData()
{
Num = i,
Name = "No_" + i.ToString(),
Template="Temlate:"+i.ToString()
});
}
this.ListView.ItemsSource = ListViewDataList;
}
public List<ListViewData> ListViewDataList { get; set; }
public class ListViewData
{
public int Num { get; set; }
public string Name { get; set; }
public string Template { get; set; }
} }
效果图：
所有代码已经上传到github：https://github.com/cmfGit/WpfDemo.git
WPF 自定义ItemsControl/ListBox/ListView控件样式的更多相关文章
- 【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式 首先上图看下样式 原理 总览 ItemsControl内容的生成 实现 界面的实现 后台ViewModel的实现 首先上图,看下样式 原理 ...
- WPF自定义LED风格数字显示控件
原文:WPF自定义LED风格数字显示控件 版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP11199988899/article/de ...
- FastReport自定义数据源及ListView控件的使用
##1.想批量生成一堆物资信息卡,效果如下图所示,fastreport可以一下全部生成,并且发现不用单独写东西, ##2.发现FastReport官方给出的Demo.exe很友好,基本可以满足要求,想 ...
- WPF 自定义TextBox带水印控件，可设置圆角
一.简单设置水印TextBox控件,废话不多说看代码: <TextBox TextWrapping="Wrap" Margin="10" Height=& ...
- WPF中在后台实现控件样式
加入现在有一个Button的样式如下: <Style TargetType="{x:Type Button}" x:Key="MyButton">. ...
- 初步探讨WPF的ListView控件(涉及模板、查找子控件) - GavinJun
本文结合模板的应用初步介绍ListView的应用 一.Xaml中如何建立数据资源 大部分数据都会来自于后台代码,如何Xaml同样的建立数据源呢?比如建立一个学生List: 首先引入命名空间: xmln ...
- WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...
- WPF中Expander控件样式，ListBox的样式(带checkbox)恢复
Expander控件样式: <ControlTemplate x:Key="ExpanderToggleButton" TargetType="ToggleButt ...
- WPF 自定义TabControl控件样式
一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居中.或平均分布:或者我们希望TabContr ...
随机推荐
- Error:Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files define Lcom/google/android/gms/internal/adp;
Q:版本号不对,广告插件的版本号和项目中用的版本号不一致 A:adsplugins的build gradle里面用的版本号是10.0.1,修改app的build gradle 的google类都改成1 ...
- 获取SHA1
进入命令行,依次输入: 此处密钥默认为android.
- angularjs 缓存详解
一.什么是缓存 一个缓存就是一个组件,它可以透明地存储数据,以便未来可以更快地服务于请求. 缓存能够服务的请求越多,整体系统性能就提升得越多. 二.Angular 中的缓存 2.1 $cacheFac ...
- CucumberJS 资源
https://cucumber.io/docs/reference/javascript https://github.com/cucumber/cucumber-js
- 兄弟连PHP培训教你提升效率的20个要点
兄弟连PHP培训教你提升效率的20个要点 用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则 不会,注意:只有echo能这么做,它是一种可以把多个字 ...
- LinkedList源码解析（JDK1.8）
package java.util; import java.util.function.Consumer; /** * LinkedList是List和Deque接口的双向链表的实现.实现了所有可选 ...
- 笔记：Spring Cloud Feign 声明式服务调用
在实际开发中,对于服务依赖的调用可能不止一处,往往一个接口会被多处调用,所以我们通常会针对各个微服务自行封装一些客户端类来包装这些依赖服务的调用,Spring Cloud Feign 在此基础上做了进 ...
- 排序算法Java实现（选择排序）
算法描述:对于给定的一组记录,经过第一轮比较后得到最小的记录,然后将该记录与第一个记录的位置进行交换:接着对不包括第一个记录以外的其他记录进行第二轮比较,得到最小的记录并与第二个记录进行位置交换:重复 ...
- Redis查询，设置超时时间
1.定义 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...
- 求逆序对[树状数组] jdoj
求逆序对 题目大意:给你一个序列,求逆序对个数. 注释:n<=$10^5$. 此题显然可以跑暴力.想枚举1到n,再求在i的后缀中有多少比i小的,统计答案即可.这显然是$n^2$的.这...显然过 ...