Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何让ItemsControl根据运行时类型选择不同的模板

如何让ItemsControl根据运行时类型选择不同的模板
EN

Stack Overflow用户
提问于 2010-06-28 13:47:01
回答 2查看 3.8K关注 0票数 2

我有一个包含ItemsControl控件的xaml页面。ItemsControl绑定到Guest,也就是ObservableCollection。Guest集合可以有两种不同类型的对象: USGuest和UKGuest,这两种对象都是从Guest继承的。有没有可能为ItemsControl创建两个(或更多)模板,并让它根据集合中当前项的运行时类型自动在它们之间进行选择?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-06-30 00:36:14

对不起,我不是故意要扫兴的,也不是想提供解决方案。但这是我在Silverlight中使用MVVM时遇到的最大障碍之一。

我过去做过的一件事就是使用内部只有一个ContentPresenter的UserControl作为ItemsTemplate。(这么多层!)在UserControl中,当DataContext发生变化时,我会从UserControl的资源中选择要使用的模板。(模板实际上不一定要在UserControl中,但我最喜欢这种封装。)

MainPage

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<UserControl>

  <UserControl.Resources>
    <DataTemplate x:key="itemTemplate">
      <my:ItemView />
    </DataTemplate>
  </UserControl.Resources>

  <ItemsControl ItemTemplate="{StaticResource itemTemplate}" />
</UserControl>

ItemView.xaml:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<UserControl>
  <UserControl.Resources>
    <DataTemplate x:Key="Template1">
      <!-- Template #1 -->
    </DataTemplate>
    <DataTemplate x:Key="Template2">
      <!-- Template #2 -->
    </DataTemplate>
  </UserControl.Resources>

  <ContentPresenter Name="presenter"
                    Content="{Binding}" />

</UserControl>

ItemView.xaml.cs

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
...
OnDataContextChanged(...)
{
  var content = this.DataContext as MyDataType;
  DataTemplate template;
  switch (content.State) 
  {
    case State1:
      template = this.Resources["template1"] as DataTemplate;
      break;
    case State2:
      template = this.Resources["template2"] as DataTemplate;
      break;
  }
  this.presenter.ContentTemplate = template;
}
...

如果您还在继续学习,请注意,Silverlight也不像在WPF中那样提供OnDataContextChanged方法。所以,为了涵盖这一点,看看Jeremy Likness在这里是怎么说的:

http://www.codeproject.com/Articles/38559/Silverlight-DataContext-Changed-Event.aspx

我经常用这句话。谢谢,杰里米!

此外,与WPF在该领域提供的所有功能相比,这也有一些相当严重的限制。例如,真的没有好的方法来伪造ItemContainerStyle选择器。(据我所知。)

票数 2
EN

Stack Overflow用户

发布于 2010-06-28 13:59:49

我还没有尝试过这样做,但是您是否尝试过将ItemsSource设置为Guest对象的ObservableCollection,并为这两种类型设置DataTemplate?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<DataTemplate DataType="{x:Type my:USGuestViewModel}">
    <my:USGuestView/>
</DataTemplate>
<DataTemplate DataType="{x:Type my:UKGuestViewModel}">
    <my:UKGuestView/>
</DataTemplate>

编辑:'my‘是您的ViewModels和视图所在的名称空间的声明,因此您应该在xaml的请求中添加类似以下内容:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<UserControl x:Class="my.namespace.SuperView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:my.namespace">

我已经检查过了,您不能在ItemTemplate属性中设置两个DataTemplates。但您可以在UserControl资源属性中设置它们:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<UserControl.Resources>
    <DataTemplate DataType="{x:Type my:USGuestViewModel}">
        <my:USGuestView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type my:UKGuestViewModel}">
        <my:UKGuestView/>
    </DataTemplate>
</UserControl.Resources>
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3132885

复制
相关文章
JQuery Div scrollTop ScrollHeight
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
全栈程序员站长
2022/09/15
2.8K0
获取页面滚动距离pageYOffset、scrollY、scrollTop
在获取页面滚动距离的高度时候,往往有不同的获取方式,而且不同的属性浏览器支持稍有差别:
用户1349575
2022/02/13
3.8K0
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…
浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight
全栈程序员站长
2022/09/15
2.3K0
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight…
滚动条三要素scrollTop clientHeight scrollHeight
插件 https://github.com/inuyaksa/jquery.nicescroll
全栈程序员站长
2022/09/15
1.3K0
jQuery第二十一篇 scrollTop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 100px; height: 200px; border: 1p
贵哥的编程之路
2020/10/28
2910
jQuery scroll(滚动)延迟加载
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $(this).scrollTop(); //滚动条卷去高度 var windowHeight = $(this).height(); // 窗口高度 // console.log(scrollHeight, scrollTop, windowHeight) if(scrol
deepcc
2018/05/16
9.1K0
liMarquee – jQuery无缝滚动插件
liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大。它可以应用于任何 Web 元素,包括文字、图像、表格、表单等元素,同时它可以设置不同的滚动方向(左右上下)、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。
kirin
2021/01/29
8.9K0
jquery横向滚动条
此代码献给wendy 由于工作太忙,下次再整理成插件调用,先记录下来,欢迎同学们提意见。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conten
deepcc
2018/05/16
7K0
jquery 页面滚动事件 scroll()
在没有任何元素的情况下,document的宽高是与window的宽高一致的,那么如果给document加入一些元素呢?
Devops海洋的渔夫
2019/06/02
10.1K0
jquery无缝隙连续滚动代码
通常我们在做网页布局的时候,客户为要求在某个地方实现图片滚动或文字滚动的展示,这就是所谓的跑马灯效果,在以前蓝叶用html标签marquee来做跑马灯效果,marquee不是很完美,如果一个层的宽度或高度过长,那么中间会用空隙显得很不美观;现在蓝叶用jquery无缝隙连续滚动代码来实现跑马灯效果,这段jquery无缝隙连续滚动代码可以自由设置,向左、向右、向上、向下的滚动效果,如果你需要就把以下代码复制到你需要的地方,稍微进行修改即可使用了,这是一段jquery代码,需要jquery库的支持才行。
李维亮
2021/07/09
6.8K0
jquery.countup实现数字滚动
效果图 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa
明知山
2020/09/03
5.4K0
SCrollTOP scrollHeight
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。
全栈程序员站长
2022/09/15
2.3K0
SCrollTOP scrollHeight
jQuery实现消息滚动播放的效果
场景需求: 在大屏幕上,消息会进行一个实时滚动播报的效果,将现有的内容进行一个来回滚动的播放~~
王小婷
2021/04/04
4.9K0
jquery 滚轮插件 示例 - 整屏滚动
要做出这个效果,其实不用说,首先要把这五个div的基本HTML+CSS给写出来先。
Devops海洋的渔夫
2019/05/30
4.6K0
jQuery滚动到页面指定位置
        在前端的页面开发中,经常会碰到页面跳转问题,这个跳转指的是页面内部跳转到指定位置,通常是在有滚动条的情况下,网上介绍的方法很多,本文主要是介绍jQuery函数中的一个小trick,.focus()函数。
Tyan
2022/05/09
7K0
jQuery滚动到页面指定位置
jQuery 尺寸、位置操作
​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。
梨涡浅笑
2022/05/08
1.1K0
jQuery 尺寸、位置操作
scrollTop()方法
大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说scrollTop()方法,希望能够帮助大家进步!!!
Java架构师必看
2022/09/26
1.3K0
scrollTop()方法
Vue 滚动条定位问题
作者:matrix 被围观: 9,147 次 发布时间:2018-06-28 分类:零零星星 | 3 条评论 »
HHTjim 部落格
2022/09/26
9110
Vue 滚动条定位问题
scrollIntoView()方法导致整个页面产生偏移
今天在做页面UI改版的时候发现,我之前使用的是dom.scrollIntoView(); 使得点击右侧题目编号的时候,让左侧题目滚动到页面可视区域。
Daotin
2021/01/21
4.3K0
js常用事件整理—兼容所有浏览器
1.鼠标滚动事件。 说明:返回值 大于0向上滚动,小于0向下滚动。 兼容型:所有浏览器。 代码: /*********************** * 函数:鼠标滚动方向 * 参数:event * 返回:滚轮方向[向上(大于0)、向下(小于0)] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//
磊哥
2018/05/08
2.2K0

相似问题

jQuery滚动过远

10

ScrollTop - jQuery不滚动

21

jQuery scrollTop不滚动

40

jQuery .scrollTop没有正确滚动

20

jQuery - scrollTop命令未滚动

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文