如何在 ObservableCollection 构建的视图中动态设置用户控件的网格。column/row

Question

我正在尝试在 UserControl 中查看包含我自己的 class 类型 "NodViewModel" 的 ObservableCollection。 UserControl 具有行和列定义，我想做的是动态地将每个 NodViewModel 的 Grid.Column 和 Row -属性设置为 NodView（也是用户控件）。像这样：

<UserControl x:Class="TestarDataBinding.Views.KlassView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:m="clr-namespace:TestarDataBinding.Models"
         xmlns:vm="clr-namespace:TestarDataBinding.ViewModels"
         xmlns:v="clr-namespace:TestarDataBinding.Views"
         mc:Ignorable="d" 
         Height="110" Width="110"
         >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50*"/>
        <RowDefinition Height="50*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50*"/>
        <ColumnDefinition Width="50*"/>
    </Grid.ColumnDefinitions>

    ---"Foreach in ObservableCollection<NodViewModel>"---
        <v:NodView DataContext="{Binding NodModel}" 
                    Grid.Column="{Binding Position.Column}"
                    Grid.Row="{Binding Position.Row}" />
    ---"endforeach"---
</Grid>

Answer 1

您可以使用 Itemscontrol 并将 ObservableCollection 绑定到该 itemscontrol 的 itemsource

Answer 2

这解决了

<ItemsControl ItemsSource="{Binding NodKlassRepository}"
                    ItemTemplate="{StaticResource NodTemplate}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10*"></RowDefinition>
                        <RowDefinition Height="20*"></RowDefinition>
                        <RowDefinition Height="20*"></RowDefinition>
                        <RowDefinition Height="20*"></RowDefinition>
                        <RowDefinition Height="20*"></RowDefinition>
                        <RowDefinition Height="10*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="10*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="20*"/>
                        <ColumnDefinition Width="10*"/>
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Row" Value="{Binding NodKlassModel.Row}"></Setter>
                <Setter Property="Grid.Column" Value="{Binding NodKlassModel.Column}"></Setter>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>

在 NodTemplate 中：

<DataTemplate x:Key="NodTemplate" DataType="{x:Type vm:NodKlassViewModel}">
        <v:NodKlassView DataContext="{Binding}"/>
    </DataTemplate>

如何在 ObservableCollection 构建的视图中动态设置用户控件的网格。column/row

How to dynamiclly set the grid.column/row of a UserControl in a view build by ObservableCollection

c#

wpf

mvvm

observablecollection