WPF(C#)中的组件1:ItemsControl

<ItemsControl>是XAML中的一个功能强大的组件,常用于动态渲染,类似VUE中的v-for。不过功能比v-for更加强大,使用方式也更加复杂。下面我将在Prism框架下,写一个简单的Demo演示ItemsControl的功能。

1.在XAML编写绑定的路径

XML 复制代码
<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- 绑定到 info 属性 -->
            <TextBlock Text="{Binding Info}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

2.在VIEWMODEL中设置数据格式

cs 复制代码
//自己定义的类 
public class MyItem
 {
     public int Id { get; set; }

     public string Info { get; set; }
 }

public class MainWindowViewModel : BindableBase
{

    public MainWindowViewModel()
    {
        Items = new ObservableCollection<MyItem>
        {   
            new MyItem { Id = 1, Info = "Item 1" },
            new MyItem { Id = 2, Info = "Item 2" },
            new MyItem { Id = 3, Info = "Item 3" }
        };
    }
    
//定义类的集合
    private ObservableCollection<MyItem> items;
    public ObservableCollection<MyItem> Items
    {
        get { return items; }
        set { items = value; RaisePropertyChanged(); }
    }

}

3.执行结果

相关推荐
爱喝水的小周10 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021113 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅17 分钟前
介绍electron
前端·javascript·electron
周胡杰19 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691320 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑22 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7737 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人41 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD43 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟43 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计