WPF - 网格中的扩展器 - 饮食空间

WPF - Expander in Grid - eating space

提问by Banng

I have very simple xaml.

我有非常简单的 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>

Now after collasping expander the left part [row=0,col=0] being shown as empty with space. What we want is right part [row=0,col=1] should take whole space.

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

What should be done in this case ? I have tried HorizontalAlignment="Stretch" to Tab control but not working.

在这种情况下应该怎么做？我试过 Horizo​​ntalAlignment="Stretch" 到 Tab 控件但不起作用。

Do I need to add event handler like on collapse and change width of grid.. but it does not seems to good way ?

我是否需要添加事件处理程序，如折叠和更改网格宽度.. 但它似乎不是好方法？

Can anyone suggest better way ?

谁能建议更好的方法？

Thanks

谢谢

回答by Charbel

Using a Grid is not the best way to achieve what you want. You should use a DockPanel instead with LastChildFill = "true". I can't try it now but I would imagine it like this:

使用网格不是实现您想要的最佳方式。您应该使用 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>

This should make the tab control always take the entire remaining space.

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

回答by grantnz

You can make this work by setting your column definitions to:

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

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

The complete code to show this working is below:

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

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

If you add the xaml above to a window, you should see the following

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

回答by Nitin

You will have to make you ColumnDefinition.Widthto Autoand if you want fixed width for your TabControlyou should give Widthto TabControl.

你将不得不让你ColumnDefinition.Width来Auto，如果你想固定宽度为您TabControl你应该给Width到TabControl。

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