我試圖制作一個包含多個元素的 UserControl，當單擊按鈕時，控制元件將內部元素布局從垂直更改為水平。
我在 ItemsControl 模板中放置了一個布局更改 ToggleButton。我還創建了一個帶有觸發器的樣式，該樣式應該通過更改 ItemsControl 中的 ItemsPanel 來更改專案的位置。此外，觸發 ItemsControl 的更改背景。
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="True">
<DataTrigger.Setters>
<Setter Property="ItemsControl.Background" Value="LightGreen"/>
<Setter Property="ItemsControl.ItemsPanel" Value="{DynamicResource HorizontalPanelTemplate}"/>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="False">
<DataTrigger.Setters>
<Setter Property="ItemsControl.Background" Value="LightBlue"/>
<Setter Property="ItemsControl.ItemsPanel" Value="{DynamicResource VerticalPanelTemplate}"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<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>
</ItemsControl.Template>
結果，觸發器起作用，顏色切換，但元素的排列始終保持不變。
我嘗試按照文章中的描述通過 GroupStyle 做到這一點：https ://social.msdn.microsoft.com/Forums/vstudio/en-US/b0ecb187-134e-4868-b56e-b67fb5ad18ff/itemscontrol-with-groupstyle-how -to-dynamically-switch-itemspanel?forum=wpf但是失敗了，外觀沒有改變。
完整的用戶控制代碼
<UserControl x:Class="HeaderControlDemo.HeaderControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<UserControl.Template>
<ControlTemplate>
<ItemsControl x:Name="ItemsControl" Margin="{TemplateBinding Padding}"
ItemsSource="{Binding Path=HeaderItems}">
<ItemsControl.Resources>
<ItemsPanelTemplate x:Key="HorizontalPanelTemplate">
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
<ItemsPanelTemplate x:Key="VerticalPanelTemplate">
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.Resources>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="True">
<DataTrigger.Setters>
<Setter Property="ItemsControl.Background" Value="LightGreen"/>
<Setter Property="ItemsControl.ItemsPanel" Value="{DynamicResource HorizontalPanelTemplate}"/>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=HideShowButton, Path=IsChecked}" Value="False">
<DataTrigger.Setters>
<Setter Property="ItemsControl.Background" Value="LightBlue"/>
<Setter Property="ItemsControl.ItemsPanel" Value="{DynamicResource VerticalPanelTemplate}"/>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
<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>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left"
Background="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
HorizontalAlignment="Center" VerticalAlignment="Center"
Text="Header"/>
<Border Grid.Row="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Padding="5"
Background="LightGray">
<ContentControl>
<ContentControl.ContentTemplate>
<DataTemplate>
<TextBox DataContext="{Binding RelativeSource={RelativeSource AncestorType=ContentControl}, Path=DataContext}"
Text="{Binding Path=PropertyValue, UpdateSourceTrigger=PropertyChanged}"
FontSize="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=FontSize}"
FontFamily="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=FontFamily}"
VerticalAlignment="Top"
Background="White"/>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ControlTemplate>
</UserControl.Template>
</UserControl>
uj5u.com熱心網友回復：
您可以使用 DataTrigger 更改用作 ItemsPanel 的 StackPanel 的方向：
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsChecked, ElementName=tb}"
Value="True">
<Setter Property="Orientation" Value="Horizontal"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
</StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<ToggleButton x:Name="tb" Content=" Horizontal "/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/313964.html