C# WPF 调整网格行中控件的大小以填充所有宽度

Question

我正在尝试让我的 ComboBox 拉伸以使用展开窗口中的所有空白空间。如果窗口的宽度被缩小，ToolBarTray 将会折叠。

我使用了一个有 2 列的网格，其宽度分别指定为 * 和 300。 如何使 ComboBox 填充行中的所有可用空间？

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>

    <DockPanel LastChildFill="True" Grid.Row="0">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="300" />
            </Grid.ColumnDefinitions>

            <ToolBarTray DockPanel.Dock="Left">
                <ToolBar Name="Standard">
                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>
                </ToolBar>

                <ToolBar Name="Standard2">
                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>

                    <Button Height="32">
                        <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right">
                            <Image Height="24" Width="24" HorizontalAlignment="Center" Source="Images/document.png" />
                        </StackPanel>
                    </Button>
                </ToolBar>
            </ToolBarTray>

            <ComboBox Grid.Column="1" MinWidth="200" ></ComboBox>
        </Grid>
    </DockPanel>
</Grid>

Answer 1

使用 Horizo​​ntalAlignment="Strech"

见以下代码

<ComboBox Grid.Column="1" MinWidth="200" HorizontalAlignment="Stretch"></ComboBox>

Answer 2

好的，如果您希望工具栏完全折叠，我找到的唯一解决方案是编写一点代码。 仅在 XAML 中进行布局会更优雅，但有时​​ C# 代码是唯一的方法。

1. 摆脱网格：

2. 处理画布的大小调整：

   private void ToolbarSizeChanged(object sender, SizeChangedEventArgs e)
   {
       const double COMBO_MIN_DESIRED_WIDTH = 300.0;
       Size newSize = e.NewSize;
   
       Size sizeToolbarTray = new Size(Double.PositiveInfinity, newSize.Height);
       // measure to update DesiredSize
       toolBarTray.Measure(sizeToolbarTray);
   
       Rect toolBarTrayRect = new Rect(0, 0, 0, newSize.Height);
       Rect comboRect =new Rect(0,0,0,newSize.Height);
   
       // 3 cases :
   
       // 1) Much space is available
       if (newSize.Width > toolBarTray.DesiredSize.Width + COMBO_MIN_DESIRED_WIDTH)
       {
           toolBarTrayRect.Width = toolBarTray.DesiredSize.Width;
           comboRect.X = toolBarTrayRect.Width;
           comboRect.Width = newSize.Width -toolBarTrayRect.Width;
   
       }
       // 2) Space to show Combo, but not totally toolbar
       else if (newSize.Width > COMBO_MIN_DESIRED_WIDTH)
       {
           toolBarTrayRect.Width = newSize.Width - COMBO_MIN_DESIRED_WIDTH;
           comboRect.X = toolBarTrayRect.Width;
           comboRect.Width = COMBO_MIN_DESIRED_WIDTH;
       }
       // 3) Not enough space to show toolbar
       else
       {
           toolBarTrayRect.Width = 0;
           comboRect.Width = newSize.Width;
       }
       // Layout the two components :
       toolBarTray.Arrange(toolBarTrayRect);
       combobox.Arrange(comboRect);
   }
   

这是一个工作解决方案的链接，以便您检查它是否是您想要的：
http://1drv.ms/1MySnde

希望我能理解您的意愿，并且对您有所帮助，问候

Answer 3

只需更改您的列宽定义：

    <Grid DockPanel.Dock="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

默认情况下，ComboBox 的水平和垂直对齐方式设置为 Stretch。

可能是您可以放置​​硬编码大小的第一列。

但如果您的 GUI 需要更多空间才能更好看，请在 ToolbarTray 和 ComboBox 周围放置一些边距

问候