listbox动态选择模版

最新推荐文章于 2023-03-03 15:18:38 发布
最新推荐文章于 2023-03-03 15:18:38 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： WPF 文章标签： WPF listbox动态模版
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ff1990723/article/details/52756953
版权

献上效果图：

预期效果

1）Listbox动态选择模版

2）鼠标移上去后显示操作按钮


模版实现

（FButton请参考 Fbutton模版）

1.加号模版

 <span style="font-size:14px;"> <ControlTemplate x:Key="AddNewTemplate" TargetType="{x:Type ListBoxItem}">
        <Border x:Name="Border"
                BorderThickness="0"
                CornerRadius="5"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
            <Border.Background>
                <ImageBrush ImageSource="/Management;component/Images/mohmoo/bg_card.png" />
            </Border.Background>
            <!--<Grid Width="{TemplateBinding Width}"
                  Height="{TemplateBinding Height}"
                  ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30" />
                    <ColumnDefinition Width="auto" />
                    <ColumnDefinition Width="30" />
                </Grid.ColumnDefinitions>-->

            <local:FButton Width="{TemplateBinding Width}"
                           Height="{TemplateBinding Height}"
                           HorizontalAlignment="Center"
                           VerticalContentAlignment="Center"
                           Background="Transparent"
                           Command="{Binding AddClickCommand}"
                           FIcon="&#xe604;"
                           FIconSize="70"
                           Foreground="#0068FD"
                           MouseOverBackground="Transparent"
                           MouseOverForeground="Red"
                           PressedBackground="Transparent"
                           Template="{StaticResource FButton_Template}" />

            <!--</Grid>-->

        </Border>
        <ControlTemplate.Triggers>

            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="Border" Property="BorderThickness" Value="2" />
                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate></span>

2.名片模版

<ControlTemplate x:Key="CardTemplate" TargetType="{x:Type ListBoxItem}">
        <Border x:Name="Border"
                BorderThickness="0"
                CornerRadius="5"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
            <Border.Background>
                <ImageBrush ImageSource="/Management;component/Images/mohmoo/bg_card.png" />
            </Border.Background>

            <Grid Margin="1">
                <Grid Background="Transparent">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="*" />
                        <!--<RowDefinition Height="40" />-->
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width=".5*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <!--  Region 名称、编号  -->
                    <TextBlock Grid.Row="0"
                               Grid.Column="1"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="{TemplateBinding FontSize}"
                               Foreground="{TemplateBinding Foreground}"
                               Text="名称:" />

                    <TextBlock Grid.Row="0"
                               Grid.Column="2"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="{TemplateBinding FontSize}"
                               Foreground="{TemplateBinding Foreground}"
                               Text="{Binding Name}" />

                    <TextBlock Grid.Row="1"
                               Grid.Column="1"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="{TemplateBinding FontSize}"
                               Foreground="{TemplateBinding Foreground}"
                               Text="编号:" />
                    <TextBlock Grid.Row="1"
                               Grid.Column="2"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               FontFamily="{TemplateBinding FontFamily}"
                               FontSize="{TemplateBinding FontSize}"
                               Foreground="{TemplateBinding Foreground}"
                               Text="{Binding Sequence}" />
                    <!--  EndRegion  -->
                    <WrapPanel Grid.Row="2"
                               Grid.Column="1"
                               Grid.ColumnSpan="3"
                               Margin="0 0 0 30"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom">

                        <TextBlock HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom"
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="40"
                                   Foreground="#0E72FD"
                                   Text="{Binding RoomID}" />

                        <WrapPanel Margin="20 0 0 7"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Bottom">
                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="房" />
                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="{Binding UnitID}" />

                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="单元" />
                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="{Binding BuildID}" />

                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="栋" />
                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="{Binding AreaID}" />

                            <TextBlock VerticalAlignment="Bottom"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"
                                       Text="区" />
                        </WrapPanel>
                    </WrapPanel>
                </Grid>


                <Canvas x:Name="maskCanvas"
                        Background="#F3F2F4"
                        Visibility="Collapsed">
                    <Grid Width="300"
                          Height="50"
                          Margin="50">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width=".2*" />
                            <ColumnDefinition Width=".3*" />
                            <ColumnDefinition Width=".3*" />
                            <ColumnDefinition Width=".2*" />
                        </Grid.ColumnDefinitions>

                        <local:FButton Grid.Column="1"
                                       Width="50"
                                       Height="50"
                                       Background="Transparent"
                                       Command="{Binding EditClickCommand}"
                                       FIcon="&#xe609;"
                                       FIconSize="31"
                                       Foreground="Black"
                                       MouseOverBackground="Transparent"
                                       MouseOverForeground="Red"
                                       PressedBackground="Transparent"
                                       Template="{StaticResource FButton_Template}" />
                        <local:FButton Grid.Column="2"
                                       Width="50"
                                       Height="50"
                                       Background="Transparent"
                                       Command="{Binding DeleteClickCommand}"
                                       FIcon="&#xe601;"
                                       FIconSize="32"
                                       Foreground="Black"
                                       MouseOverBackground="Transparent"
                                       MouseOverForeground="Red"
                                       Padding="0 0 0 3"
                                       PressedBackground="Transparent"
                                       Template="{StaticResource FButton_Template}" />
                    </Grid>
                </Canvas>

            </Grid>

        </Border>
        <ControlTemplate.Triggers>

            <Trigger Property="IsSelected" Value="True">
                <Setter TargetName="Border" Property="BorderThickness" Value="2" />
                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="maskCanvas" Property="Visibility" Value="Visible" />
                <Setter TargetName="Border" Property="BorderThickness" Value="2" />
                <Setter TargetName="Border" Property="BorderBrush" Value="#24A6CA" />
            </Trigger>

            <Trigger Property="IsEnabled" Value="False">
                <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

3.ListboxItem模版 

<Style x:Key="DefaultListBoxItem" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontFamily" Value="黑体" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <!--<Setter Property="VerticalContentAlignment" Value="Center" />-->
        <Setter Property="Height" Value="190" />
        <Setter Property="Width" Value="370" />
        <Setter Property="Margin" Value="2" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontFamily" Value="黑体" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Template" Value="{DynamicResource CardTemplate}" />
        <Style.Triggers>
            <DataTrigger Binding="{Binding flag}" Value="1">
                <Setter Property="Template" Value="{DynamicResource CardTemplate}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding flag}" Value="0">
                <Setter Property="Template" Value="{DynamicResource AddNewTemplate}" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

4.ListBox模版 

 <Style x:Key="DefaultListBox" TargetType="{x:Type ListBox}">
        <Setter Property="Background" Value="White" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource DefaultListBoxItem}" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="False" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer HorizontalScrollBarVisibility="Disabled">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Border" Property="Opacity" Value="{StaticResource DisableOpacity}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

5.数据模版 

  public class ResidentCardInfo
    {
        public RelayCommand EditClickCommand { get; private set; }
        public RelayCommand DeleteClickCommand { get; private set; }
        public RelayCommand AddClickCommand { get; private set; }
        public string Name { get; set; }
        public int flag { get; set; }
        public string Sequence { get; set; }
        public string RoomID { get; set; }
        public string UnitID { get; set; }
        public string BuildID { get; set; }
        public string AreaID { get; set; }
        public ResidentCardInfo()
        {
            flag = 1;
            EditClickCommand = new  RelayCommand(() => { MessageBox.Show("EditClickCommand"); });
            DeleteClickCommand = new RelayCommand(() => { MessageBox.Show("DeleteClickCommand"); });
            AddClickCommand = new RelayCommand(() => { MessageBox.Show("AddClickCommand"); });
        }

6.在页面的引用

        <ListBox x:Name="itemsCtrl"
                 Grid.Row="2"
                 Margin="20 0 0 10"
                 HorizontalAlignment="Stretch"
                 Style="{StaticResource DefaultListBox}" />

codeBehind： 

 public ResidentsPage()
        {
            InitializeComponent();
            itemsCtrl.ItemsSource = new List<ResidentCardInfo>()
            {
                new ResidentCardInfo () {flag=0 },
                new ResidentCardInfo () { Name="费劲死了",Sequence="12558992",RoomID="405",UnitID="2",BuildID="1",AreaID="1"},
                new ResidentCardInfo () { Name="放假了",Sequence="787564",RoomID="1312",UnitID="2",BuildID="2",AreaID="3"},
                new ResidentCardInfo () { Name="无人陪外婆",Sequence="12312",RoomID="113",UnitID="2",BuildID="2",AreaID="1"},
                new ResidentCardInfo () { Name="是理论上",Sequence="888",RoomID="778",UnitID="3",BuildID="3",AreaID="3"},
                new ResidentCardInfo () { Name="我日晚",Sequence="3533890",RoomID="617",UnitID="4",BuildID="5",AreaID="2"},
                new ResidentCardInfo () { Name="分身乏术",Sequence="2424222",RoomID="314",UnitID="5",BuildID="6",AreaID="2"},
                new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},
                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},
                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"},
                 new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},
                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},
                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"},
                 new ResidentCardInfo () { Name="啪啪啪",Sequence="9760472",RoomID="122",UnitID="5",BuildID="7",AreaID="2"},
                new ResidentCardInfo () { Name="我呸",Sequence="764",RoomID="445",UnitID="2",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="给对方",Sequence="3322789",RoomID="302",UnitID="8",BuildID="1",AreaID="1"},
                new ResidentCardInfo () { Name="怕是翻盘",Sequence="5353",RoomID="207",UnitID="8",BuildID="2",AreaID="4"},
                new ResidentCardInfo () { Name="哦我",Sequence="78433",RoomID="105",UnitID="6",BuildID="2",AreaID="1"}
            };
        }




干城
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF ListBoxItem模板
晨曦的专栏
04-30 1万+
这个模板主要是实现一个带有图标的
WPF listBox 漂亮的listBOX
10-10
WPF listBox 漂亮的listBOX
WPF用ListBox动态生成模板数据
weixin_45331546的博客
02-18 1099
在做WPF项目的时候呢，我们会遇到一个问题，就是数据库里面有多少条数据呢，那我们就动态生成数据把它给显示出来，以我做的帝友借贷系统为例：我获取到了所有借款人的信息后，我要把这些数据显示在投资的界面上给想投资的人看，那么我要怎样子办呢？我不能一个一个在页面写出来吧，况且我也不知道到底有多少条数据呀，那么要解决这一类问题就需要用到动态生成数据了，这里呢，我用的是WPF的ListBox去生成，把模板放在资源(style)上，然后在重写ListBox上引用资源（style）.下面请看代码： 首先，你得把你设计好的样
WPF的 ListBox【控件模板&数据模板】 梳理
dbcalgj的博客
03-03 1305
wpf 模板（数据，控件）梳理
WPF-ListBox的几种Template属性
juns6的专栏
04-20 4912
属性名 属性的类名 功能 示例 Template ControlTemplate 定义控件自身的外观. 其子元素的布局可以自定义,也可以由ItemsPresenter定义.             IsItemsHost="True"/>            IsItemsHost=true表示子元素将显示在此容器中.此处StackPa
listboxItem 动态选择模版
白衣如是的专栏
10-08 1784
<Border BorderBrush="Red" BorderThickness="3"> <Border BorderBrush="Yellow" BorderThickness="3"> <Style x:Key="MyListBoxI
WPF 带有checkbox的ListBox控件
09-02
WPF 带有checkbox的ListBox控件,支持绑定！
Windows Phone ListBox选用不同的模板
11-06
Windows Phone ListBox选用不同的模板。具体请见：http://blog.csdn.net/nnnnyyyy/article/details/8152892
listbox数据绑定
02-17
listbox数据绑定 Windows Phone 7 可以把它看成是Android 的 ListView ，WP7 只是预先在XAML里面为它的数据模板规定了格式，而Android 可以通过后期引入数据的方式为其添加数据模板。
wpf treeView数据模板 menu数据模板 Listbox和ComboBox数据模板
11-19
本项目包含treeview中的层级嵌套的数据模板，Listbox的数据模板，ComboBox的数据模板等。能给初学者学习模板起到引导作用。
自绘画ListBox例子
06-17
自绘画ListBox例子 注意有一个属性Style一定要设置对！ 一定要改成自己绘画模式才行！
ListBox 列表控件的折行显示的Delphi实现..rar
05-03
ListBox 列表控件的折行显示的Delphi实现..rar`
delphi Listbox多列显示
06-07
Listbox具有使用简单的特点，但因为没有多列显示，而不得不用Listview等别的控件，本文的方法可以很简单实现Listbox多列显示功能。里面有源码，截图，和实现说明。
listbox动态加载item
11-21
在web上怎么动态加载listbox的item。。怎么让选择项的值显示在其他的frame中
Python的GUI编程（五）Listbox（列表框）
热门推荐
程序猿的视界
01-16 4万+
Listbox：列表框用于显示项目列表 语法： lb=List(master,option，···) 参数 master：父窗口 option：常用的选项列表，可以有多个，用逗号隔开 可以通过for循环向Listbox中插入项目列表和索引值向其中添加项目两种方法。 selectmode 确定可以选择多少项，以及鼠标拖动的影响选择
扩展DropDownList控件和ListBox控件(1) - 支持分组功能(optgroup标签)
webabcd的专栏
01-03 906
DropDownList(ListBox)控件既强大又好用。为了让它更强大、更好用，我们来写一个继承自DropDownList(ListBox)的控件。[源码下载]扩展DropDownList控件和ListBox控件(1) - 支持分组功能(optgroup标签) 作者：webabcd介绍扩展DropDownList控件和ListBox控件：通过Dr
在使用 ItemsSource 之前，项集合必须为空
白衣如是的专栏
06-05 1万+
写好了一个简单的
DataGrid模版(分组效果)
白衣如是的专栏
10-27 9092
样式效果图 其中，矢量字体图标（FIcon之类）请参考wpf使用矢量图标 1.DataGrid总体样式
WPF ListBox 绑定模板
最新发布
04-01
WPF ListBox 绑定模板指的是在 ListBox 中使用数据绑定来绑定数据源，并使用自定义的模板来呈现数据。 以下是实现 WPF ListBox 绑定模板的步骤： 1. 创建数据源：创建一个集合类，用于存储数据源。 2. 绑定数据源...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值