在两个依赖控件上的WPF扩展器

Question

我不太了解expander的工作原理，

我正在尝试扩展绿色网格，以使黄网格（包括红色的网格）

根据绿网格的扩展向左移动。

目前，情况是绿色网格扩展，因此它隐藏了红色部分，因为它超过了第二个网格。

<ControlTemplate x:Key="ExpanderKey" TargetType="Expander">
    <ControlTemplate.Triggers>
        <Trigger Property="IsExpanded" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" AccelerationRatio="1" To="150" Storyboard.TargetName="Container" Storyboard.TargetProperty="Width" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:0.2" AccelerationRatio="1" To="50" Storyboard.TargetName="Container" Storyboard.TargetProperty="Width" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" ColumnSpan="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="0.05*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Background="Yellow"/>
        <Button Grid.Column="1" Background="Red"/>
    </Grid>

    <Expander Grid.Column="1" IsExpanded="{Binding ElementName=SearchButton, Path=IsChecked}" Template="{StaticResource ExpanderKey}" HorizontalAlignment="Right" Background="Green">
        <ToggleButton Grid.Row="0" x:Name="SearchButton" VerticalAlignment="Top" Content="Exp" HorizontalAlignment="Left"/>
    </Expander>
</Grid>

Answer 1

您的ControlTemplate无效。另外，网格带有按钮跨越两个列的。

这是expander的示例，它在扩展其内容时将按钮推到左侧：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="0.05*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Background="Yellow"/>
        <Button Grid.Column="1" Background="Red"/>
    </Grid>

    <Expander Grid.Column="1" IsExpanded="{Binding ElementName=SearchButton, Path=IsChecked}" HorizontalAlignment="Right" Background="Green" ExpandDirection="Right">
        <ToggleButton Grid.Row="0" x:Name="SearchButton" VerticalAlignment="Top" Content="Exp" HorizontalAlignment="Left"/>
    </Expander>
</Grid>