带有GridSplitter的WPF展开器

Question

在我的WPF窗口(.NET 4.0)中，我有一个Grid，其中包含两列：左侧是拉伸的文本框或其他控件，右侧是Expander。在Expander中还有GridSplitter，它旨在在展开Expander时调整左右两个列的大小。但是它无法正常工作。

以下是我的XAML代码：

<Window x:Class="WpfApplication10.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" Name="column"/>
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="Wrap" 
             Text="TextBox" VerticalAlignment="Stretch" Background="Aqua"/>

    <Expander Grid.Column="1" Header="Expander" ExpandDirection="Left" 
              HorizontalAlignment="Right" Background="LightBlue" >
        <Expander.Content>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Some text Some text Some Text" Grid.Column="1"/>
                <GridSplitter Grid.Column="0" Width="5"    
                              ResizeBehavior="PreviousAndCurrent"
                              ResizeDirection="Columns" 
                              HorizontalAlignment="Stretch"/>
            </Grid>
        </Expander.Content>
    </Expander>
</Grid></Window>

适当的解决方案已找到。 XAML:

<Window x:Class="WpfApplication10.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BoolToVisConverter"/>
</Window.Resources>

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" Name="leftColumn"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto" Name="rightColumn" />
    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0"
             HorizontalAlignment="Stretch"
             TextWrapping="Wrap"
             Text="TextBox"
             VerticalAlignment="Stretch"
             Background="Aqua" />

    <Expander Grid.Column="2"
              Name="Expander"
              Header="Expander"
              ExpandDirection="Left"
              Background="LightBlue" 
              Collapsed="Expander_Collapsed" 
              Expanded="Expander_Expanded" >
        <TextBlock Text="Some text Some text Some Text" />
    </Expander>
    <GridSplitter Grid.Column="1"
                  Width="5"
                  ResizeBehavior="PreviousAndNext"
                  ResizeDirection="Columns"
                  VerticalAlignment="Stretch"
                  Height="Auto" 
                  Visibility="{Binding ElementName=Expander, Path=IsExpanded, 
                              Converter={StaticResource BoolToVisConverter}}"/>
</Grid></Window>

代码后台：

    private void Expander_Collapsed(object sender, RoutedEventArgs e)
    {
        leftColumn.Width = new GridLength(1, GridUnitType.Star);
        rightColumn.Width = new GridLength(1, GridUnitType.Auto);
    }

    private void Expander_Expanded(object sender, RoutedEventArgs e)
    {
        rightColumn.Width = new GridLength(1, GridUnitType.Star);
    }

- Ilya Solovyev

---

正是我所需要的。谢谢分享你的解决方案！ - Mat

Answer 1

您的网格分隔器作用于内部网格（在扩展器中），而不是主网格。请尝试以下方法：

<Window x:Class="WpfApplication10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="Auto"
                              Name="column" />
        </Grid.ColumnDefinitions>

        <TextBox Grid.Column="0"
                 HorizontalAlignment="Stretch"
                 TextWrapping="Wrap"
                 Text="TextBox"
                 VerticalAlignment="Stretch"
                 Background="Aqua" />

        <Expander Grid.Column="2"
                  Header="Expander"
                  ExpandDirection="Left"
                  Background="LightBlue">
            <TextBlock Text="Some text Some text Some Text" />
        </Expander>
        <GridSplitter Grid.Column="1"
                      Width="5"
                      ResizeBehavior="PreviousAndNext"
                      ResizeDirection="Columns"
                      VerticalAlignment="Stretch"
                      Height="Auto" />
    </Grid>
</Window>

现在您需要处理用户展开/折叠扩展器时最后一列发生的情况。

- XAMeLi

---

我正在寻找一种不需要代码后台或自定义转换器的答案：据我所知，如果展开器位于左侧，则可以仅使用XAML代码。但是您的答案已经足够好了。我将在我的问题中发布我的代码。 - Ilya Solovyev

Answer 2

如果有帮助解决您的问题，请尝试这个。

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid ShowGridLines="True" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" Name="column"/>

    </Grid.ColumnDefinitions>

    <TextBox Grid.Column="0" HorizontalAlignment="Stretch" TextWrapping="Wrap" 
         Text="TextBox" VerticalAlignment="Stretch"/>

    <Expander Grid.Column="1" Header="Expander" ExpandDirection="Left" 
          HorizontalAlignment="Right">
        <Expander.Content>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="Some text Some text Some Text" Grid.Column="0"/>
                <GridSplitter Grid.Column="1" Width="5"    
                          ResizeBehavior="PreviousAndCurrent"
                          ResizeDirection="Columns" 
                          HorizontalAlignment="Stretch"/>
            </Grid>
        </Expander.Content>
    </Expander>
</Grid>

- saurabh.mridul