WPF - 网格中的扩展器 - 吃空间答案

【问题标题】：WPF - Expander in Grid - eating spaceWPF - 网格中的扩展器 - 吃空间
【发布时间】：2013-11-12 11:10:51
【问题描述】：

我有一个非常简单的 xaml。

<Grid Margin="0,50,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30*" />
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <!--<RowDefinition Height="50"/>-->
        </Grid.RowDefinitions>
 <Expander Header=""
          HorizontalAlignment="Left"
          VerticalAlignment="Stretch"
          ExpandDirection="Right"
          IsExpanded="True"
          Grid.Column="0" 
          Grid.Row="0"
          Height="Auto"
           >
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</Grid>

现在在折叠扩展器后，左侧部分 [row=0,col=0] 显示为带有空格的空白。我们想要的是正确的部分 [row=0,col=1] 应该占据整个空间。

在这种情况下应该怎么做？我已尝试将 HorizontalAlignment="Stretch" 设置为 Tab 控件，但无法正常工作。

我是否需要在折叠时添加事件处理程序并更改网格的宽度..但这似乎不是一个好方法？

谁能提出更好的方法？

谢谢

【问题讨论】：

标签： c# wpf expander

【解决方案1】：

使用网格并不是实现您想要的最佳方式。您应该使用 DockPanel 而不是 LastChildFill = "true"。我现在不能尝试，但我会这样想象：

<DockPanel LastChildFill="true">
 <Expander Header=""
          HorizontalAlignment="Left"
          VerticalAlignment="Stretch"
          ExpandDirection="Right"
          IsExpanded="True"
          DockPanel.Dock="Left"
          Height="Auto"
           >
<!-- My List control -->
</Expander>
<TabControl Name="ExecutionTab" HorizontalAlignment="Stretch">
<!-- soem tabs here -->
</TabControl>
</DockPanel>

这应该使选项卡控件始终占据整个剩余空间。

【讨论】：

感谢 cmets。尝试了这个，但是在此更改之后，仅显示 Expander，并且在折叠时仅显示 Tabcontrol。所以一次只显示扩展器或选项卡控件。
我刚在本地尝试过，效果很好。反正我们可以看到整个页面代码？
是的.. 它对我有用。问题是 xaml 再次使用 Grid。谢谢！

【解决方案2】：

您可以通过将列定义设置为：

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

显示此工作的完整代码如下：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Expander ExpandDirection="Right" IsExpanded="True">
     <TextBlock FontSize="50">Text For Expander</TextBlock>
    </Expander>
    <TabControl Name="ExecutionTab" Grid.Column="1">
        <TabItem Header="Tab 1">
            <TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
        </TabItem>
        <TabItem Header="Tab 2">
            <TextBox FontSize="50" TextWrapping="Wrap">Text for Tab 1</TextBox>
        </TabItem>
    </TabControl>
</Grid>

如果将上面的 xaml 添加到窗口中，您应该会看到以下内容

【讨论】：

在上面尝试使用 columndefination auto 但之后只显示 Expander 并且当它折叠时只显示 Tabcontrol。
如果你把上面的代码放在一个大小合适的窗口中，你首先会看到扩展文本和标签。标签会变窄。当展开器收起时，展开器文本将消失，选项卡将占据整个窗口（除了展开器按钮）。您是否完全按照上述方式尝试了 xaml？
您看到了什么问题？它按我的预期工作，但也许你正在尝试做一些不同的事情。

【解决方案3】：

您必须将ColumnDefinition.Width 设置为Auto，如果您想要TabControl 的固定宽度，您应该将Width 设置为TabControl。

<Grid Margin="0,50,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto"/>
     </Grid.ColumnDefinitions>

【讨论】：

感谢 cmets。尝试了这个，但是在此更改之后，仅显示 Expander，并且在折叠时仅显示 Tabcontrol。所以一次只显示扩展器或选项卡控件。