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.执行结果

相关推荐
软弹7 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang7 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术7 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛7 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_7 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式
x***r1517 小时前
Notepad++ 8.6 安装教程:详细步骤+自定义安装路径(附注意事项)
linux·前端·javascript
格林威7 小时前
工业相机图像采集:Grab Timeout 设置建议——拒绝“假死”与“丢帧”的黄金法则
开发语言·人工智能·数码相机·计算机视觉·c#·机器视觉·工业相机
Hilaku7 小时前
为什么很多工作 5 年的前端,身价反而卡住了?🤷‍♂️
前端·javascript·面试
ai超级个体7 小时前
前端下午茶:这 3 个网页特效建议收藏(送源码)
前端·three.js·threejs·网页设计·vibe coding·网页灵感·网页分享
维斯187 小时前
VueFlow 图自适应容器尺寸教程
前端