Question

我正在尝试在UserControl中查看包含我自己的类类型“NodViewModel”的ObservableCollection。 UserControl具有行和列定义，我想要做的是动态地为每个NodViewModel设置Grid.Column和Row -property作为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构建的视图中动态设置UserControl的grid.column /行

2 个答案: