WPF 项目开发入门（五）ListView列表组件与 Expander组件

Zht_bs

已于 2022-09-13 13:14:55 修改

阅读量2.6k

点赞数 1

分类专栏： c# 文章标签： wpf c# 开发语言

于 2022-08-09 10:36:48 首次发布

本文链接：https://blog.csdn.net/zhtbs/article/details/125440906

版权

c# 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍WPF中ListView组件的使用方法，包括数据绑定、ItemTemplate与DataTemplate的应用、事件绑定及GridView视图展示等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ListView数据绑定

ListView 组件通过 ItemsSource属性绑定数据集合。

 public partial class Frame1 : Window {
     private List<Customer> _customers = new List<Customer>();
     public Frame1(){
         InitializeComponent();
         //装入列表数据结构内容
         _customers.Add(new Customer { Id = 1, Name = "name1", Path = "../Page1.xaml" });
         _customers.Add(new Customer { Id = 2, Name = "name2", Path = "../Page2.xaml" });
         _customers.Add(new Customer { Id = 3, Name = "name3", Path = "../布局/Page1.xaml" });
         ListViewName.ItemsSource = _customers;//ListView组件名称全局唯一引用
        }
     //定义列表数据结构
     public class Customer {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Path { get; set; }
            public override string ToString(){
            	return $"{Id} - {Name} - {Phone}";
            }
     }
 }

xaml代码

<ListView x:Name="CustomerListView"
           Margin="0,5,0,0">
</ListView>

在这里插入图片描述
执行程序后，页面显示 3 个数据项，但显示“Customer”，数据没有启到作用。这是因为显示了Customer 类默认的ToString() 字符串。需要定义Customer 类的ToString() 内容。

数据类型 ToString()

数据类中覆盖 ToString() 方法。在ToString()方法中定义组件显示的文字内容字符串。

如下所示：在类中ToString() 将生成一个由连字符分隔的 ID、名称的字符串。

public class Customer {
    public int Id { get; set; }
    public string Name { get; set; }
    public string Path { get; set; }
    public override string ToString(){
        return $"{Id} -{Name}";//ListView组件显示内容
    }
}

在这里插入图片描述
现在可以查看到菜单中显示的数据信息内容了。

ItemTemplate、DataTemplate 绑定组件数据

在Xaml代码的ListView 组件中使用 ListView.ItemTemplate 属性创建一个 DataTemplate 模板块。使用 StackPanel 布局来摆放TextBlock控件。设置TextBlock控件进行数据绑定 Text = ”{Binding Id}” 来指定要显示数据类的哪个值。如果您想更改字体大小、文本颜色等，您只需更改 TextBlock 的这些属性，即可创建您喜欢的任何布局。

<ListView x:Name="CustomerListView1"
                      Margin="0,5,0,0">
    <ListView.ItemTemplate>------------------------数据模板设置
        <DataTemplate>
            <StackPanel Orientation="Horizontal">--水平布局
                <TextBlock Text="{Binding Id}"/>---显示Customer类中的id属性
                <TextBlock Text="{Binding Name}"/>---显示Customer类中的Name属性
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在这里插入图片描述
ListView的Height属性滚动条

<ListView x:Name="CustomerListView"
          Margin="0,5,0,0"
          Height="250">------超过出现滚动条

ListView 事件绑定

ListView 事件绑定SelectionChanged事件。

<ListView x:Name="CustomerListView"
          Margin="0,5,0,0" SelectionChanged="OnListViewChangedZht">
 </ListView>

事件处理

private void OnListViewChangedZht(object sender, SelectionChangedEventArgs e){
    ListView t = (ListView)sender;
    Customer c=(Customer)t.SelectedItem;
    Uri uri = new Uri(c.Path, UriKind.Relative);
    framemain.Source = uri;
}

ListView 表格GridView

<ListView ItemsSource="{Binding}" x:Name="listView"  Grid.Row="0">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="分数" DisplayMemberBinding="{Binding Path=Subj}" Width="50"/>
            <GridViewColumn Header="名称" DisplayMemberBinding="{Binding Path=Name}" Width="50"/>
            <GridViewColumn Header="班级" DisplayMemberBinding="{Binding Path=ClassName}" Width="100"/>
        </GridView>
    </ListView.View>
</ListView>

----------------------------      数据绑定      ----------------------------------
 listView.DataContext = list;

在这里插入图片描述

Expander组件

Expander 控件是可以打开和关闭区域的控件。如果不指定 Expander 本身的 Height，则当您关闭 Expander 时，区域会缩小，其下方的控件也会随之跟进。如果指定高度，则区域在关闭时的高度保持不变。

IsExpanded属性自动展开
BorderBrush 背景色内容

<Expander SnapsToDevicePixels="True" Header="管理系统" IsExpanded="True">
    <StackPanel Orientation="Horizontal">
        <ListView x:Name="CustomerListView"  Width="196"
                  Margin="0,5,0,0" SelectionChanged="OnListViewChangedZht">
        </ListView>
    </StackPanel>
</Expander>