WPF—数据模版绑定数据集合(listbox和panel)

WPF---数据模版绑定数据集合(listbox和panel)

WPF中,可以使用ListBox或者Panel(比如StackPanel或Canvas)来展示数据集合,并使用数据模板DataTemplate来定义数据的呈现方式。以下是一些简单的例子,展示如何将数据集合绑定到ListBox并使用数据模板自定义项的外观。

listbox控件写法

一、创建数据模版并设置list的子项模版

cs 复制代码
<!--绑定模版数据集合 方法一-->
       <!--创建数据模版-->
       <Grid>
           <Grid.Resources>
               <DataTemplate x:Key="ItemTemplate2">
                   <TextBlock Text="{Binding}"
                              Background="Pink"
                              Margin="10" />
               </DataTemplate>
           </Grid.Resources>

     <!--创建listbox标签设置子项模版为panel-->
           <!--
            ScrollViewer.HorizontalScrollBarVisibility="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Disabled"
             这里可以把滚动条禁掉,让外界看不到listbox的影子,而且还可以作一个ListBoxItem的template,
             这样一来连ListBoxItem特有的选中啊之类的特性也去掉   
               -->
           <ListBox Height="200"
                    ItemsSource="{Binding strings}"
                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
                    ItemTemplate="{StaticResource ItemTemplate2}"
                    Background="#5D6B99">
               <ListBox.ItemsPanel>
                   <ItemsPanelTemplate>
                       <WrapPanel></WrapPanel>
                   </ItemsPanelTemplate>
               </ListBox.ItemsPanel>
           </ListBox>
       </Grid>

二、设置数据并且绑定

cs 复制代码
// 设置数据并且绑定
public partial class _999_数据模版绑定数据集合 : Window
{
    public _999_数据模版绑定数据集合()
    {
        InitializeComponent();
        this.DataContext = this;
    }
    public ObservableCollection<string> strings { get; set; } = new ObservableCollection<string>() { "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", };
}

panel控件绑定集合

在WPF中,WrapPanel是一个面板,它可以在布局中的子元素超出可用空间时自动换行。要将WrapPanel绑定到数据集合,你可以将WrapPanel作为ItemsControl的ItemsPanel,并将数据集合绑定到ItemsControl的ItemsSource属性。

一、设置模版

cs 复制代码
<!--绑定模版数据集合 方法一:-->
<!-- 设置模版 -->
<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <TextBlock Text="{Binding}"
                       Background="Pink"
                       Margin="10" />
        </DataTemplate>
    </Grid.Resources>

<!--第二步设置itemsControl标签将wrappanel设为itemsControl的ItemsPanel标签-->
    <ItemsControl Height="100"
                  Background="Gray"
                  VerticalAlignment="Top"
                  ItemsSource="{Binding strings}"
                  ItemTemplate="{StaticResource ItemTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True"></WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

二、设置数据并绑定

cs 复制代码
public partial class _999_数据模版绑定数据集合 : Window
{
    public _999_数据模版绑定数据集合()
    {
        InitializeComponent();
        this.DataContext = this;
    }
    public ObservableCollection<string> strings { get; set; } = new ObservableCollection<string>() { "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", "张三", };
}
相关推荐
就是有点傻2 小时前
WPF中ImageBrush和Image的区别
wpf
冷眼Σ(-᷅_-᷄๑)2 小时前
WPF如何使用外部字体
wpf
月落.1 天前
WPF的<ContentControl>控件
wpf
就是有点傻1 天前
WPF中的依赖属性
开发语言·wpf
wangnaisheng1 天前
【WPF】把一个Window放在左上角/右上角顶格显示
wpf
WineMonk1 天前
.NET WPF CommunityToolkit.Mvvm框架
.net·wpf·mvvm
月落.1 天前
WPF中的INotifyPropertyChanged接口
wpf
界面开发小八哥1 天前
界面控件DevExpress WPF中文教程:Data Grid——卡片视图设置
.net·wpf·界面控件·devexpress·ui开发
平凡シンプル1 天前
WPF 打包
wpf
VickyJames1 天前
基于XAML框架和跨平台项目架构设计的深入技术分析
wpf·开源分享·unoplatform·winui3·项目架构