如何通过DataTrigger动态修改ItemsControl的ItemsPanel实现布局切换

问题根源 #

你的触发器定义在ItemsControl内部模板的Grid样式中，Setter设置的ItemsControl.Background和ItemsControl.ItemsPanel实际是为Grid设置附加属性，并没有作用到外层的ItemsControl实例上。之前背景色看起来生效，只是Grid的背景透出来的效果，ItemsControl本身的ItemsPanel属性完全没有被修改，因此布局不会发生变化。

修复方案 #

将触发器从Grid的Style中移除，放到ItemsControl的ControlTemplate触发器集合中，此时Setter默认作用于当前模板对应的ItemsControl实例，就能正确修改ItemsPanel属性实现布局切换。

修改后的ItemsControl模板代码如下：

<ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition x:Name="HeaderRow" Height="*"/>
                <RowDefinition x:Name="ToggleRow" Height="50"/>
            </Grid.RowDefinitions>

            <ItemsPresenter x:Name="ItemsPresenter" Grid.Row="0"/>

            <ToggleButton x:Name="HideShowButton" Grid.Row="1"
                          Content="Change"
                          VerticalAlignment="Center" HorizontalAlignment="Right"
                          Margin="5"/>
        </Grid>
        <!-- 触发器移到ControlTemplate.Triggers中 -->
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="True">
                <Setter Property="Background" Value="LightGreen"/>
                <Setter Property="ItemsPanel" Value="{DynamicResource HorizontalPanelTemplate}"/>
            </DataTrigger>
            <DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="False">
                <Setter Property="Background" Value="LightBlue"/>
                <Setter Property="ItemsPanel" Value="{DynamicResource VerticalPanelTemplate}"/>
            </DataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ItemsControl.Template>

内容的提问来源于stack exchange，提问作者Loraler