两个相关控件上的 WPF 扩展器

Question

我不太明白Expander是如何工作的，

我正在尝试扩展绿色网格，以便黄色网格（包括红色网格）
根据绿色Grid的展开向左移动

目前的情况是，绿色的Grid扩大了，因为超过了第二个Grid，所以把红色的部分给遮住了。

<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无效。此外，带有按钮的 Grid 跨越两列。

这是 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>

两个相关控件上的 WPF 扩展器

WPF Expander on two dependent controls

wpf

expander

doubleanimation