使用样式制作不一样的listbox

最新推荐文章于 2024-06-07 16:44:28 发布
最新推荐文章于 2024-06-07 16:44:28 发布
阅读量7.4k 收藏 4
点赞数
分类专栏： WPF 文章标签： binding datatemplate setter string border image
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljf5566/article/details/7315681
版权 
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="336" Width="532">
    <Grid>
        <Grid.Resources>
            <!--第一种样式-->
            <Style x:Key="styledItems" TargetType="{x:Type ListBox}">
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" SharedSizeGroup="MiddleColumn" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="60" />
                                </Grid.RowDefinitions>

                                <Border Margin="4,0" Grid.Column="2" BorderThickness="2" CornerRadius="4">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#aaa" Offset="0" />
                                            <GradientStop Color="#222" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>

                                    <Grid>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#444" Offset="0" />
                                                    <GradientStop Color="#fff" Offset="1" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
                                    </Grid>
                                </Border>

                                <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" FontStyle="Italic">User:</TextBlock>
                                <TextBlock FontSize="16" VerticalAlignment="Center" Margin="5" Text="{Binding Name}" FontWeight="Bold" Grid.Column="1" />
              </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>

                <Setter Property="Grid.IsSharedSizeScope" Value="True" />
            </Style>
            <!--第二种样式-->
            <Style x:Key="styledList1" TargetType="{x:Type ListBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBox}">
                            <Border 
                      Background="{TemplateBinding Panel.Background}" 
                      BorderBrush="{TemplateBinding Border.BorderBrush}"
                      BorderThickness="{TemplateBinding Border.BorderThickness}">
                                <ScrollViewer HorizontalScrollBarVisibility="Auto">
                                    <StackPanel x:Name="StackPanel1" IsItemsHost="True"
                     Orientation="Horizontal"/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="60" />
                                    <RowDefinition Height="30" />
                                </Grid.RowDefinitions>
                                <Border Margin="4,0" Grid.Column="0" BorderThickness="2" CornerRadius="4"
                        HorizontalAlignment="Center">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#aaa" Offset="0" />
                                            <GradientStop Color="#222" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>

                                    <Grid>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#444" Offset="0" />
                                                    <GradientStop Color="#fff" Offset="1" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
                                    </Grid>
                                </Border>

                                <TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center"
                           Margin="5" Text="{Binding Name}" FontWeight="Bold"/>
              </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>

                <Setter Property="Grid.IsSharedSizeScope" Value="True" />
            </Style>
            <!--第三种样式-->
            <Style x:Key="styledList2" TargetType="{x:Type ListBox}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBox}">
                            <Border 
            Background="{TemplateBinding Panel.Background}" 
						BorderBrush="{TemplateBinding Border.BorderBrush}"
						BorderThickness="{TemplateBinding Border.BorderThickness}">
                                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                                    <WrapPanel IsItemsHost="True" />
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition  Width="140"  />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition  Height="60" />
                                    <RowDefinition  Height="30" />
                                </Grid.RowDefinitions>

                                <Border Margin="4,0" Grid.Column="0" BorderThickness="2" CornerRadius="4"
                        HorizontalAlignment="Center">
                                    <Border.BorderBrush>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#aaa" Offset="0" />
                                            <GradientStop Color="#222" Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.BorderBrush>

                                    <Grid>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                    <GradientStop Color="#444" Offset="0" />
                                                    <GradientStop Color="#fff" Offset="1" />
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <Image Width="48" Margin="2,2,2,1"  Source="{Binding ImagePath}" />
                                    </Grid>
                                </Border>

                                <TextBlock Grid.Row="1" FontSize="14" HorizontalAlignment="Center"
                           Margin="5" Text="{Binding Name}" />
              </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>

                <Setter Property="Grid.IsSharedSizeScope" Value="True" />
            </Style>

        </Grid.Resources>
        <ListBox ItemsSource="{Binding}" Style="{StaticResource styledItems}" Margin="27,22,40,13" Name="listBox1">
            <!--ListBox ItemsSource="{Binding}绑定数据源 Style="{StaticResource styledItems}"绑定listBox样式-->
        </ListBox>
    </Grid>
</Window>

二、后台代码(设置数据源)

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 ListBoxStyling;

namespace WpfApplication1
{
    /// <summary>
    /// Window1.xaml 的互動邏輯
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            DataContext = UserInfo.Users;//设置listBox绑定用到的数据源
        }
    }
}


using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Media;

namespace ListBoxStyling
{
    /// <summary>
    /// 数据实体类
    /// </summary>
    public class UserInfo
    {
        private string nameVal;

        public string Name
        {
            get { return nameVal; }
            set { nameVal = value; }
        }

        private string imagePathVal;

        public string ImagePath
        {
            get { return imagePathVal; }
            set { imagePathVal = value; }
        }


        public override string ToString()
        {
            return Name;
        }

        public UserInfo(string name, string imagePath)
        {
            this.nameVal = name;
            this.imagePathVal = imagePath;
        }

        /// <summary>
        /// 构造一个用户信息数组【绑定到listbox的数据源】
        /// </summary>
        public static UserInfo[] Users =
        {
            new UserInfo("Arthur Alfredsen", "Images/airplane.bmp"),
            new UserInfo("Brenda Barret", "Images/astro.bmp"),
            new UserInfo("Carl Christiansen", "Images/beach.bmp"),
            new UserInfo("Delia Davis", "Images/butterfl.bmp"),
            new UserInfo("Egbert Evesham", "Images/car.bmp"),
            new UserInfo("Fenella Ferguson", "Images/cat.bmp"),
            new UserInfo("Graham Garden", "Images/chess.bmp"),
            new UserInfo("Hilary Humperdinck", "Images/dirtbike.bmp"),
            new UserInfo("Ian Ingernook", "Images/dog.bmp"),
            new UserInfo("Joan Jackson", "Images/drip.bmp"),
            new UserInfo("Kevin Kostco", "Images/duck.bmp"),
            new UserInfo("Leah Limbert", "Images/fish.bmp"),
            new UserInfo("Marvin Masterson", "Images/frog.bmp"),
            new UserInfo("Nellie Norbert", "Images/guitar.bmp"),
            new UserInfo("Ollie Ogilvy", "Images/horses.bmp"),
            new UserInfo("Priscilla Peters", "Images/kick.bmp"),
            new UserInfo("Quentin Quasires", "Images/liftoff.bmp"),
            new UserInfo("Roberta Roberts", "Images/palmtree.bmp"),
            new UserInfo("Steve Stuart", "Images/pnkflowr.bmp"),
            new UserInfo("Teri Tobeson", "Images/redflowr.bmp"),
            new UserInfo("Ulysses Uhura", "Images/skater.bmp"),
            new UserInfo("Val Vignette", "Images/snwflake.bmp"),
            new UserInfo("William Watson", "Images/drip.bmp"),
            new UserInfo("Xanthe Xardos", "Images/user.bmp"),
            new UserInfo("Ybrahim Yavin", "Images/guest.bmp"),
            new UserInfo("Zaphod Zacharzewski", "images/soccer.bmp")
        };
    }
}

三、三种样式的UI效果图

1、第一种样式


2、第二种样式


3、第三种样式


liujf
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【愚公系列】2023年10月 WPF控件专题 ListBox控件详解
时光隧道
08-08 5万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
WPF-ListBox样式大解析
SHAO_96822的博客
10-12 6162
本文很长，没有耐心，想直接复制的就别看了。（因为确实没有东西可以复制，这里都是“渔”，没有鱼） ListBox继承自ItemsControl，加入了一个selector对象，可以提供选择（单选、多选功能）。是和显示一个一个的对象。比如文件管理器。 ListView是Listbox上面加入了一个View对象，一般跟GirdView连用，适合显示一条一条的、每一条分好几个栏目的对象。比如百度云的下...
WPF 控件专题 ListBox 自定义样式
^@^lemon tea^@^
09-18 1002
WPF 控件专题 ListBox 自定义样式
C# WPF入门学习主线篇（八）—— ListBox常见属性和事件
最新发布
weixin_56595425的博客
06-07 1232
在《C# WPF入门学习主线篇（八）—— ListBox常见属性和事件》中，我们详细介绍了WPF中ListBox控件的使用。从基础定义开始，深入探讨了ItemsSource、SelectedItem、SelectionMode等常见属性，并通过具体示例展示了如何处理SelectionChanged、Loaded、MouseDoubleClick等事件。此外，我们还展示了自定义项模板和绑定复杂对象的高级用法。本篇文章旨在帮助读者全面掌握ListBox控件的功能，是WPF开发学习的重要参考。
【WPF应用30】WPF中的ListBox控件详解
qq_35320456的博客
04-03 3857
WPF中的ListBox控件详解
WPF —— ListBox控件、GroupBox控件详解
03-18 1108
ListBox 是一个 ItemsControl，这意味着它可以包含任何类型的对象的集合 (，例如字符串、图像或面板)。一个 ListBox 中的多个项是可见的，与仅 ComboBox具有所选项可见的项不同，除非 IsDropDownOpen 属性为 true。该 SelectionMode 属性确定一次是否可以选择多个项 ListBox。
C#程序开发范例宝典（第2版）.part08
11-12
实例113 使用Timer组件制作左右飘动的窗体 166 实例114 使用Timer组件实现奥运倒计时 167 3.8 ServiceController组件 169 实例115 使用ServiceController组件控制计算机的服务 169 3.9 ImageList组件 171 实例...
C# Winform数据库应用设计(附开发案例
02-07
但在任何情况下,C#语言都不可能孤立地使用,它必须同 Microsoft. net framework 起使用,因为使用C#语言编写的所有代码总是在 Microsoft .net framework中运行。 1.1.2 Visual studio 微软针对Net推岀了功能强大的集成...
WPF控件主题样式，含21种不同风格漂亮主题
11-21
WPF控件主题资源，包括TabControl、ListBox、ComboBox、Button、ToggleButton、RadioButton、CheckBox、Slider、ProgressBar、TreeView等多个控件的样式。
WPF之ListBox用法之一源代码
03-25
WPF之ListBox用法之一 介绍ItemTemplate用法以及在ItemTemplate模板中使用ListBoxItem属性的方法。
ListView、ListBox背景样式
10-18
WPF/C#中的ListView、ListBox的背景样式、 选中行样式，可自定义选中行项的背景颜色、圆角、方形等任意形状的背景以及前景色！以ListView为例说明，使用时如下：
WPF listBox 漂亮的listBOX
10-10
WPF listBox 漂亮的listBOX
WPF中ListBox的样式设置
weixin_30832983的博客
08-20 460
设置之后的效果为 1窗体中代码 <Window x:Class="QyNodeTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006...
WPF列表框ListBox横向排列ListBox样式
上山的人啊，请不要嘲讽下山的神
08-16 820
wpfListBox样式横向排布
WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式
weixin_33858249的博客
11-23 429
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要内容： ScrollViewer的样式拆解及基本样式定义； ListBox集合控件的样式定义； 二．ScrollViewer自定义样式 ScrollViewer在各种列表、集合...
wpf 随手写的ListBox简略样式
dxm809的博客
08-18 260
<Window x:Class="WpfApp07.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" .
wpf listBox 设置样式
05-23
可以通过定义样式来自定义 WPF ListBox 的外观。以下是一个简单的样式示例，可以将其添加到 ListBox 控件的 Resources 中。 ```xml <ListBox> <ListBox.Resources> Padding="5" Margin="2" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值