具有多个DataTemplate的ItemsControl.ItemTemplate

Question

我有一个FlipVIew,页面可以水平滚动.每个页面都包含一个带有ItemsControl的ScrollViewer(垂直滚动).itemsControl包含一个itemTemplate,它是一行(每个页面包含数据行).

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

<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

首先,您需要DataTemplate在Resources部分中定义对象...甚至可以使用您的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;
}

这应该是诀窍......如果你有任何问题,请告诉我.