WPF中Expander样式GroupBox初始ToggleButton状态不同步问题

我将GroupBox样式化为类Expander的组件，要求ToggleButton箭头收起时指向右，展开时指向下。但应用启动后，箭头显示为指向右（收起状态），但UniformGrid已处于显示状态，说明ToggleButton实际为Checked状态；点击两次ToggleButton后，其状态与箭头显示才同步。

样式和模板 #

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Style x:Key="ExpanderGroupBoxStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid SnapsToDevicePixels="False" Background="Transparent">
                    <Ellipse x:Name="circle" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" 
                         Fill="{DynamicResource ButtonNormalBackgroundFill}" Stroke="DarkGray"/>
                    <Ellipse x:Name="shadow" HorizontalAlignment="Center" VerticalAlignment="Center" Width="13" Height="13" 
                         Fill="{DynamicResource ExpanderShadowFill}" Visibility="Hidden"/>
                    <Path SnapsToDevicePixels="false" x:Name="arrow" VerticalAlignment="Center" HorizontalAlignment="Center" 
                      Stroke="#000" StrokeThickness="2" Data="M1,1 L4,4 7,1" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Data" TargetName="arrow" Value="M1,1 L4,4 7,1 "/>
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Data" TargetName="arrow" Value="M 2 7 L 5 4 L 2 1"  />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#0046D5"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                        <Setter Property="Visibility" TargetName="shadow" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<DataTemplate x:Key="GroupboxAsExpanderHeader">
    <WrapPanel>
        <ToggleButton
            Style="{StaticResource ExpanderGroupBoxStyle}"
            IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
        </ToggleButton>
        <Label Content="Example" Background="#00000000" Foreground="#000" FontWeight="Bold" />
    </WrapPanel>
</DataTemplate>
<Style x:Key="GroupbBoxAsExpanderStyle" TargetType="{x:Type GroupBox}">
    <Setter Property="HeaderTemplate" Value="{StaticResource GroupboxAsExpanderHeader}"></Setter>
    <Setter Property="BorderBrush" Value="#FF88B1D8"></Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="32" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="ToggleButton.Checked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>
</ResourceDictionary>

使用示例 #

<GroupBox Margin="10" Height="150" Style="{StaticResource GroupbBoxAsExpanderStyle}">
   <UniformGrid Columns="2">
       <Label Content="Label 1"></Label>
       <Button Content="Button 1"></Button>
       <Label Content="Label 2" />
       <Button Content="Button 2"></Button>
       <Label Content="Label 3" />
       <Button Content="Button 3"></Button>
   </UniformGrid>
</GroupBox>

问题排查与修复 #

核心问题1：箭头Path的逻辑完全搞反 #

• 默认Path的Data="M1,1 L4,4 7,1"是向下的箭头，但你设置IsChecked=True（展开）时仍用这个Data，IsChecked=False（收起）时用的M 2 7 L 5 4 L 2 1是向左的箭头，既不符合需求，还和状态对应关系完全颠倒。
• 启动时GroupBox默认展开（UniformGrid显示），ToggleButton的IsChecked为True，但箭头因Trigger错误显示为向左（你误以为是向右），导致视觉与实际状态不符。

核心问题2：GroupBox无IsExpanded属性，绑定失效 #

你在ToggleButton中绑定IsExpanded到TemplatedParent（GroupBox），但GroupBox本身没有这个依赖属性，绑定直接失效，状态同步彻底混乱——点击两次后只是巧合让视觉与状态暂时对齐，本质逻辑错误。

修复方案 #

1. 修正箭头Trigger的Data对应关系

• 展开（IsChecked=True）：箭头向下，对应DataM1,1 L4,4 7,1
• 收起（IsChecked=False）：箭头向右，对应DataM1,4 L4,1 L4,7
• 默认Path的Data设置为展开状态，确保初始显示正确。

2. 替换无效绑定，改用ToggleButton自身状态控制

因为GroupBox没有IsExpanded属性，直接通过HeaderTemplate内的ToggleButton名称绑定状态，控制内容显示与动画。

修复后的完整样式代码

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!-- 修正箭头逻辑的ToggleButton样式 -->
<Style x:Key="ExpanderGroupBoxStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Grid SnapsToDevicePixels="False" Background="Transparent">
                    <Ellipse x:Name="circle" HorizontalAlignment="Center" VerticalAlignment="Center" Width="15" Height="15" 
                         Fill="{DynamicResource ButtonNormalBackgroundFill}" Stroke="DarkGray"/>
                    <Ellipse x:Name="shadow" HorizontalAlignment="Center" VerticalAlignment="Center" Width="13" Height="13" 
                         Fill="{DynamicResource ExpanderShadowFill}" Visibility="Hidden"/>
                    <!-- 默认展开状态，箭头向下 -->
                    <Path SnapsToDevicePixels="false" x:Name="arrow" VerticalAlignment="Center" HorizontalAlignment="Center" 
                      Stroke="#000" StrokeThickness="2" Data="M1,1 L4,4 7,1" />
                </Grid>

                <ControlTemplate.Triggers>
                    <!-- 展开（Checked）时箭头向下 -->
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="Data" TargetName="arrow" Value="M1,1 L4,4 7,1"/>
                    </Trigger>
                    <!-- 收起（Unchecked）时箭头向右 -->
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Data" TargetName="arrow" Value="M1,4 L4,1 L4,7"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Stroke" TargetName="circle" Value="#0046D5"/>
                        <Setter Property="Stroke" TargetName="arrow" Value="#222"/>
                        <Setter Property="Visibility" TargetName="shadow" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- 修正HeaderTemplate，添加内容状态绑定 -->
<DataTemplate x:Key="GroupboxAsExpanderHeader">
    <WrapPanel>
        <ToggleButton x:Name="ExpanderToggle"
            Style="{StaticResource ExpanderGroupBoxStyle}"
            IsChecked="True"> <!-- 初始展开状态 -->
        </ToggleButton>
        <Label Content="Example" Background="#00000000" Foreground="#000" FontWeight="Bold" />
    </WrapPanel>
</DataTemplate>

<!-- 修正GroupBox样式，用ToggleButton状态控制动画 -->
<Style x:Key="GroupbBoxAsExpanderStyle" TargetType="{x:Type GroupBox}">
    <Setter Property="HeaderTemplate" Value="{StaticResource GroupboxAsExpanderHeader}"></Setter>
    <Setter Property="BorderBrush" Value="#FF88B1D8"></Setter>
    <Setter Property="Height" Value="150"/> <!-- 初始展开高度 -->
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsChecked, ElementName=ExpanderToggle}" Value="False">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="32" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Height" Duration="0:0:.2" To="150" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </Style.Triggers>
</Style>
</ResourceDictionary>

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