首先使用统一网格作为ItemsPanel列填充ItemsControl [英] Populating ItemsControl Using Uniform Grid as ItemsPanel Column First

问题描述

我有24个事物的ObservableCollection.

I have an ObservableCollection of 24 Things.

   private ObservableCollection<Thing> things;
        public ObservableCollection<Thing> Things
        {
            get => things;
            set
            {
                things= value;
                RaisePropertyChanged();
            }
        }

我还选择了一件东西

   private Thing selectedThing;
        public Thing SelectedThing
        {
            get => selectedThing;
            set
            {
                selectedThing= value;
                RaisePropertyChanged();
            }
        }

我需要在网格中显示这些项目.我正在创建一个按钮网格，每个按钮都有一个命令和一个命令参数，可让我设置从集合中选择的Thing.

I need to display these items in a grid. I am creating a grid of buttons, each with a command and a command parameter that allows me to set selected Thing from the collection.

我需要首先填充此网格列.即:

I need to populate this grid COLUMNS first. I.E:

在WPF中是否可以使用ItemsControl和Uniform网格来做到这一点?

Is there a way to do this in WPF Using an ItemsControl and a Uniform grid?

   <ItemsControl ItemsSource="{Binding Things}" HorizontalAlignment="Center" Margin="20">

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                   <UniformGrid Columns="3" Rows="8"  />




                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>
                <DataTemplate>



                    <Button Content="{Binding ThingPosition}" 
                        Height="30"
                        Width="80"
                            Margin="3"
                        FontSize="8"
                        Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}, Path=DataContext.SelectThingCommand}" 
                        CommandParameter="{Binding Path=.}"/>



                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

推荐答案

如果无法简单地对ItemsSource集合中的元素进行重新排序，则以下LayoutTransforms应该可以完成此工作:

In case a simple reordering of the elements in the ItemsSource collection is not possible, the following LayoutTransforms should do the job:

<ItemsControl ...>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="3">
                <UniformGrid.LayoutTransform>
                    <TransformGroup>
                        <RotateTransform Angle="-90"/>
                        <ScaleTransform ScaleY="-1"/>
                    </TransformGroup>
                </UniformGrid.LayoutTransform>
            </UniformGrid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <TransformGroup>
                        <ScaleTransform ScaleY="-1"/>
                        <RotateTransform Angle="90"/>
                    </TransformGroup>
                </Setter.Value>
            </Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        ...
    </ItemsControl.ItemTemplate>
</ItemsControl>

这篇关于首先使用统一网格作为ItemsPanel列填充ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！