ListBox显示图片的一些问题

相关:http://t.csdnimg.cn/xTnu8

显示图片的方案就是:自定义一个Photo类,里面有属性Source;View再绑定ViewModel中的Photo集合,再到View中给ListView设置数据模板

关键点:这样做很容易忘记写数据模板

数据模板可以写成下面这样:

XML 复制代码
<DataTemplate DataType="{x:Type local:Photo}">
    <StackPanel>
        <Image Source="{Binding Source}"/>
    </StackPanel>
</DataTemplate>

-- 将这个数据模板放到Window.Resources中也会起作用的,即使ListBox中绑定的是一个Photo类型的集合。

没有数据模板前

添加数据模板后:

如果想要这些图片横向排列,就得设置ItemsPanel

XML 复制代码
<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <WrapPanel HorizontalAlignment="Center" IsItemsHost="True"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

这个时候的显示效果为:

相关推荐
Mr_pyx2 分钟前
微服务可观测性实战:分布式链路追踪从入门到精通
wpf
少控科技4 分钟前
小数典应用:农场环境数据采集监控
开发语言·windows·c#
IT_陈寒6 分钟前
Vite开发爽是爽,但这个动态导入坑差点让我崩溃
前端·人工智能·后端
Mr_pyx11 分钟前
CompletableFuture 使用全攻略:从异步编程到异常处理
linux·前端·python
Hello--_--World12 分钟前
React:状态管理 官网笔记
前端·笔记·react.js
花归去12 分钟前
a-table 冻结列导致边框
前端·css·css3
kuuailetianzi12 分钟前
Vue 3图片全屏预览组件:打造专业级图像浏览体验
前端·javascript·microsoft
前端杂货铺14 分钟前
manifold-3d——在 Vue 项目中实现干涉检查
前端·vue.js·manifold
恋猫de小郭20 分钟前
Bun 官方将正式支持 Android,Claude Code 未来可以直接在手机上跑
android·前端·ai编程
晓得迷路了31 分钟前
栗子前端技术周刊第 126 期 - Rspack 2.0、TypeScript 7.0 Beta、Git 2.54...
前端·javascript·ai编程