触发ItemTemplateSelector变化

Question

我不知道如何手动触发模板选择器(按一下按钮)。在加载时使用Template1，但希望在btn按下使用Temaplte2进行更改。OnPorpertyChanged有类似的地方吗？

我要去<ItemsControl x:Name="OptionItemsControl" ItemTemplateSelector="{StaticResource optionItemTemplateSelector}" -我想触发ItemTemplateSelector的改变.

<!-- BODY (elements)-->
        <FlipView x:Name="OptionPagesFlipView"  Grid.Row="1" TabNavigation="Cycle" SelectionChanged="OptionPagesFlipView_SelectionChanged" ItemsSource="{Binding OptionsPageItems}">
            <FlipView.ItemTemplate>
                <DataTemplate x:Name="OptionMonthPageTemplate">
                    <ScrollViewer x:Name="OptionsScrollViewer" HorizontalScrollMode="Disabled" HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto">
                        <Grid>
                            <ItemsControl x:Name="OptionItemsControl" ItemTemplateSelector="{StaticResource optionItemTemplateSelector}" ItemsSource="{Binding OptionItems, Mode=OneWay}" Visibility="{Binding OptionsPageVisibility}">                                
                            </ItemsControl>
                            <Grid x:Name="LoadingGrid" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding LoadingGridVisibility}">
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <ProgressRing x:Name="CustomProgressRing" Height="40" Width="40" IsActive="true" Grid.Column="0" Margin="20" Foreground="White"/>
                                <TextBlock Text="Loading Data" x:Name="CustomTextBlock" Height="auto" Width="auto" FontSize="25" Grid.Column="1" Margin="20"/>
                            </Grid>
                        </Grid>
                    </ScrollViewer>
                </DataTemplate>
            </FlipView.ItemTemplate>

和资源：

<UserControl.Resources>
    <DataTemplate x:Key="template1">
        <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>
            <!-- Content -->    
        </Grid>
    </DataTemplate>
    <DataTemplate x:Name="template2">
        <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="*" />
            </Grid.ColumnDefinitions>
            <!-- Content -->
        </Grid>
    </DataTemplate>

    <local:OptionDataItemTemplateSelector x:Key="optionItemTemplateSelector"
      Template1="{StaticResource template1}"
      Template2="{StaticResource template2}"/>
</UserControl.Resources>

和模板选择器类：

public class OptionDataItemTemplateSelector : DataTemplateSelector
{

    public DataTemplate Template1 { get; set; }
    public DataTemplate Template2 { get; set; }

    protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, Windows.UI.Xaml.DependencyObject container)
    {
        if(someCondition == 1)
            return Template1;
        else
            return Template2;         
    }
}

Answer 1

除非不更改ItemTemplateSelector中的ItemsSource或Item's实例，否则不能触发ItemsSource。因此，您想要使用ItemTemplateSelector实现的是有点扭曲。简单的方法是在您的ViewModel/CodeBehind上拥有一个属性，比如说

bool IsClicked
{
   get{return _isClicked;}
   set
   { 
     _isClicked = value
     RaisePropertyChanged("IsClicked");
   }
}

并在CommandHandler of按钮或Click事件处理程序中切换此属性。

现在，您只需要为下面的项目定义一个模板，并根据上面的属性切换它的ContentTemplate：

  <DataTemplate x:Key="myTemplate">
     <ContentControl Content="{Binding}">
       <ContentControl.Style>
           <Style TargetType="ContentControl">
             <Setter Property="ContentTemplate" Value="{StaticResource template1}"/>
              <Style.Triggers>
                  <DataTrigger Binding="{Binding DataContext.IsClicked, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" Value="false">
                       <Setter Property="ContentTemplate" Value="{StaticResource template2}"/>
                   </DataTrigger
              </Style.Triggers>
           </Style>
       </ContentControl.Style>
     </ContentControl>
  </DataTemplate>

Answer 2

如何运行您的项目，并设置someCondition不为1？

protected override Windows.UI.Xaml.DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
    if(ITEM.someCondition == 1)
        return Template1;
    else
        return Template2;         
}

在SelectTemplate方法中，您拥有所需的所有信息。该项来自数据源和容器，容器是数据源项的当前可视对象。使用这些信息来决定哪个模板。

更改条件，将返回另一个模板。