c# - 如何重用略有不同的 DataTemplate 元素？

Question

在 WPF 中，我定义了一个元素网格。它们将根据ViewModel.

在 XAML 文件中，DataTemplate如下所示：

<DataTemplate DataType="{x:Type implementationInputDevices:InputDevicesViewModel}">
    <Grid Grid.Row="1" Grid.Column="0">
        ...

        <TextBlock Grid.Row="1" 
                   Grid.Column="0" 
                   Text="{Binding MyArray[0].Name}" 
                   Visibility="{Binding MyArray[0].Visible}"/>
        <ComboBox  Grid.Row="1" 
                   Grid.Column="1" 
                   Visibility="{Binding MyArray[0].Visible}" 
                   SelectedItem="{Binding MyArray[0].Foo}" 
                   ItemsSource="{Binding Bar}"/>

        <TextBlock Grid.Row="2" 
                   Grid.Column="0" 
                   Text="{Binding MyArray[1].Name}" 
                   Visibility="{Binding MyArray[1].Visible}"/>
        <ComboBox  Grid.Row="2" 
                   Grid.Column="1" 
                   Visibility="{Binding MyArray[1].Visible}" 
                   SelectedItem="{Binding MyArray[1].Foo}"
                   ItemsSource="{Binding Bar}"/>
        ...

        <TextBlock Grid.Row="n" 
                   Grid.Column="0" 
                   Text="{Binding MyArray[n-1].Name}" 
                   Visibility="{Binding MyArray[n-1].Visible}"/>
        <ComboBox  Grid.Row="n" 
                   Grid.Column="1" 
                   Visibility="{Binding MyArray[n-1].Visible}" 
                   SelectedItem="{Binding MyArray[n-1].Foo}"
                   ItemsSource="{Binding Bar}"/>
    </Grid>
</DataTemplate>

如您所见，我对每一行使用相同的元素块，但值略有不同。这非常不方便，因为添加新行需要手动调整，而在上方（在此网格内）添加一行则需要更多。

我可以一次定义元素集并使用简单的命令重用它们吗？像这样的东西：

<MyRowElement n="1" />
<MyRowElement n="2" />
...
<MyRowElement n="k" />

Answer 1

Create an UserControl

<UserControl x:Class=.......UcMyUserControl >
    <Grid >
        ......... <!-- RowDefinition, ColDefinition ... -->
        <TextBlock Grid.Row="1" 
                    Grid.Column="0" 
                    Text="{Binding Name}" 
                    Visibility="{Binding VisibleProperty}"/>
        <ComboBox  Grid.Row="1" 
                    Grid.Column="1" 
                    Visibility="{Binding VisibleProperty}" 
                    SelectedItem="{Binding Foo}" 
                    ItemsSource="{Binding Bar}"/>
    </Grid>
</UserControl>

And in your View use an ItemsControl (like dymanoid said)

<ItemsControl x:Name="itmWrapPanel" 
            ItemsSource="{Binding MyArray, UpdateSourceTrigger=PropertyChanged}"  
            ScrollViewer.CanContentScroll="True"
            ScrollViewer.VerticalScrollBarVisibility="Auto"
            ScrollViewer.HorizontalScrollBarVisibility="Auto"
            >

    <!-- Panel Type -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- StackPanel || WrapPanel -->
            <WrapPanel Orientation="Horizontal"  
                    Background="White" 
                    AllowDrop="True" 
                    Width="{Binding ActualWidth, ElementName=itmWrapPanel}" 
                    Height="{Binding ActualHeight, ElementName=itmWrapPanel}"  />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemTemplate / Your Template -->
    <ItemsControl.ItemTemplate>
        <DataTemplate  >
            <local:UcMyUserControl  />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

For more information search for ItemsControl, you will find a lot that can help you more

Look this example all itens here is an usercontrol, all items in the image are independent of each other and all are the same usercontrol, nested in an ItemsControl