如何显示"更多的项目"在一个ItemsControl时元件的数目超过n更大？

问题描述

我有一个的ItemsControl ，在Windows 8的方式与2列4行显示的瓷砖。每瓦可点击并触发命令，将在另一个视图加载所选项目

我的问题从这里开始：我的绑定的IList<> 可以包含在时间超过8个元素，但必须超过8瓦显示没了。

我想实现是创建一个不同类型的瓷砖（链接到另一个命令），将出现（例如：使用转换器），只有当我的的IList<> 比8大请检查下面的图示来了解我的目的

到目前为止，我可能会限制在的IList<检索元素的数量;> 容器7时，它是大于8，但加入特殊第八元素仍然是对我来说是一个谜。

解决方案

我用 CompositeCollection 来解决这个问题使多个集合和项显示为一个列表。有关

下面是一个示例

XAML

<的ItemsControl的ItemsSource ={绑定表项}>
< ItemsControl.ItemsPanel>
< ItemsPanelTemplate>
< UniformGrid列=2/>
< / ItemsPanelTemplate>
< /ItemsControl.ItemsPanel>
< ItemsControl.Resources>
<数据类型的DataTemplate ={X：键入SYS：的Int32}>
< BORDER =保证金4
背景=天蓝>
< TextBlock的文本={结合}字号=15
的Horizo​​ntalAlignment =中心
VerticalAlignment =中心/>
< /边框>
< / DataTemplate中>
<数据类型的DataTemplate ={X：键入SYS：字符串}>
< BORDER =保证金4
背景=暗紫>
< TextBlock的文本={结合}粗细=SemiBold
的Horizo​​ntalAlignment =中心
VerticalAlignment =中心/>
< /边框>
< / DataTemplate中>
< /ItemsControl.Resources>
< / ItemsControl的>


请注意，我有两种不同类型的定义数据模板，即int和string，这将有助于我渲染同样的相应

公共视图模型（）
{
的IEnumerable< INT> originalData = Enumerable.Range（1，12）;
项=新CompositeCollection（）;
Items.Add（新CollectionContainer（）{集合= originalData.Take（originalData.Count（）→8 7：8）}）;
如果（originalData.Count（）→8）
Items.Add（originalData.Count（） - 7 +的更多）;
}

公共CompositeCollection项目{搞定;组; }


整体思想是要限制主集合中的元素的数量和添加额外的元件向不同类型的如最初的名单中收集int和额外的是一个字符串

这样的项目控制将使得集合中的所有元素，我们可以基于数据控制的外观类型

您也可以使用附加属性或转换器来简化或执行更复杂的功能。

结果

I have an ItemsControl that displays tiles in a Windows 8 manner with 2 columns and 4 rows. Each tile is clickable and triggers a command that will load the selected item in another view.

My problem starts here: my bound IList<> can contain more than 8 elements at the time, but must display no more than 8 tiles.

What I am trying to achieve is to create a different type of tile (linked to another command) that will appear (ex: using a Converter) only when my IList<> is bigger than 8. Please check the drawing below to understand my aim.

So far I could limit the number of elements retrieved in the IList<> container to 7 whenever it is bigger than 8, but adding the "special" 8th element is still a mystery for me.

解决方案

I have used CompositeCollection to solve the problem this enables multiple collections and items to be displayed as a single list. more on CompositeCollection

here is a sample

xaml

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Resources>
        <DataTemplate DataType="{x:Type sys:Int32}">
            <Border Margin="4"
                    Background="LightSkyBlue">
                <TextBlock Text="{Binding}" FontSize="15"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
            </Border>
        </DataTemplate>
        <DataTemplate DataType="{x:Type sys:String}">
            <Border Margin="4"
                    Background="MediumPurple">
                <TextBlock Text="{Binding}" FontWeight="SemiBold"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center" />
            </Border>
        </DataTemplate>
    </ItemsControl.Resources>      
</ItemsControl>

note that I have defined data templates for two different types i.e. int and string which will help me render the same accordingly

    public ViewModel()
    {
        IEnumerable<int> originalData = Enumerable.Range(1, 12);
        Items = new CompositeCollection();
        Items.Add(new CollectionContainer() { Collection = originalData.Take(originalData.Count() > 8 ? 7 : 8) });
        if (originalData.Count() > 8)
            Items.Add(originalData.Count() - 7 + " more");
    }

    public CompositeCollection Items { get; set; }

whole idea is to limit the number of elements in the primary collection and add an extra element to the collection of different type eg original list is int and extra is a string

so item control will render all the elements in the collection and we can control the appearance based on the data type

you may also make use of Attached Properties or Converters to simplify this or perform more sophisticated functions.

result

这篇关于如何显示"更多的项目"在一个ItemsControl时元件的数目超过n更大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！