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>

这个时候的显示效果为:

相关推荐
hhcccchh几秒前
学习vue第十一天 Vue3组件化开发指南:搭积木的艺术
前端·vue.js·学习
AntoineGriezmann3 分钟前
基于 Unocss 的后台系统 SVG 图标方案实践
前端
小夏卷编程4 分钟前
ant-design-vue 2.0 a-table 中实现特殊行样式,选中样式,鼠标悬浮样式不一样
前端·javascript·vue.js
wulijuan8886664 分钟前
前端性能优化之图片webp
前端
一颗烂土豆5 分钟前
ECharts 水球图不够炫?试试 RayChart 的创意可视化玩法
前端·vue.js·数据可视化
天才熊猫君6 分钟前
Vue 3 命令式弹窗组件
前端
NEXT067 分钟前
CSS基础-标准盒模型与怪异盒模型
前端·css
flysh057 分钟前
委托实战案例
开发语言·c#
DaMu8 分钟前
Dreamcore3D ARPG IDE “手搓”游戏引擎,轻量级实时3D创作工具,丝滑操作,即使小白也能轻松愉快的创作出属于你自己的游戏世界!
前端·架构·three.js
代码猎人10 分钟前
什么是尾调用,使用尾调用有什么好处?
前端