具有多个 DataTemplate 的 ItemsControl.ItemTemplate

Question

我有一个可以水平滚动页面的 FlipVIew。 每个页面都包含一个带有 ItemsControl 的 ScrollViewer（垂直滚动）。 itemsControl 包含一个 itemTemplate，它是一行（每个页面包含数据行）。

I want to change the template of a row at some button click。现在我有 1 种类型的行，但我想实现另外 2 种类型，但不知道如何......基本上当前行类型是通过 DataTemplate 定义的，我想定义另外 2 个 DataTemplate 并将 dataTemplate 绑定到 ItemsControl。项目模板

<ItemsControl x:Name="RowItemsControl" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="{Binding OptionsPageVisibility}">
      <ItemsControl.ItemTemplate>
           <DataTemplate x:Name="RowType1">
               <Grid x:Name="OptionItemGrid" Background="White" HorizontalAlignment="Stretch">
                     <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                              <!-- here is the content of the rowType1 -->                  
                 </Grid>
             </DataTemplate>
            <!--<DataTemplate x:Name="RowType2">  --- I want just 1 of these 3 data to be my item template
            </DataTemplate x:Name="RowType2">
            <DataTemplate x:Name="RowType3">
            </DataTemplate x:Name="RowType3"> -->
        </ItemsControl.ItemTemplate>
   </ItemsControl>

Answer 1

首先，您需要在Resources 部分定义您的DataTemplate 对象...甚至可以使用您的ItemsControl.Resources：

<ItemsControl x:Name="RowItemsControl" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="{Binding OptionsPageVisibility}">
      <ItemsControl.Resources>
           <DataTemplate x:Name="RowType1">
               <Grid x:Name="OptionItemGrid" Background="White" HorizontalAlignment="Stretch">
                     <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition Height="Auto"/>
                      </Grid.RowDefinitions>
                      <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                          <ColumnDefinition Width="*" />
                       </Grid.ColumnDefinitions>
                 </Grid>
             </DataTemplate>
            <DataTemplate x:Name="RowType2">
                ...
            </DataTemplate x:Name="RowType2">
            <DataTemplate x:Name="RowType3">
                ...
            </DataTemplate x:Name="RowType3">
        </ItemsControl.Resources>
   </ItemsControl>

接下来，您需要从Resources 访问和设置它，可能在Button.Click 处理程序中：

private void Button_Click(object sender, RoutedEventArgs e)
{
    DataTemplate rowType2DataTemplate = RowItemsControl.FindResource("RowType2") as 
        DataTemplate;
    if (rowType2DataTemplate != null) RowItemsControl.ItemTemplate = 
        rowType2DataTemplate;
}

这应该可以解决问题...如果您有任何问题，请告诉我。