Question

我有一个带有多个控件的网格，我想选择这些控件中的哪一个（或哪个网格列）位于中心，然后将其他列/控件放在它旁边。我该怎么做？

Answer 1

<强>更新

以下模式：

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="MainControl's height"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="MainControl's width"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

只要在MainControl部分中定义了其他控件，

将始终强制*居中。换句话说，如果上述[1,1]中的位置Grid包含您的MainControl，则可以为位置Grids定义不同的[0,0]行{/列}定义，{ {1}}，...，[0,1]在自定义位置包含更多自定义尺寸的控件。

例如这个xaml：

[2,2]

将以这种方式找到控件：

Answer 2

你在布局方面想要达到什么目的？您的网格策略将确定整个布局的行为方式，特别是如果您希望它在窗口大小方面进行缩放。如果您希望布局对窗口大小做出反应，则使用“自动”和“星形大小”策略。如果您实际上不关心调整大小并且期望固定布局，那么您可以跨列共享网格大小。

场景1 - 如果您试图纯粹实现包含未知大小的对象的中间列，并且此列必须完全居中，那么您需要使用左侧和右侧列来缓冲此中间列，如Bahman_Aries的示例所示。

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

这样做的结果是放置在中间列中的项目将消耗所需的宽度（所需的渲染宽度），并且剩下的两个列将分成两个剩余空间，因为每个列的值都是1 *。换句话说，如果您的中间列对象请求200宽度，并且您的窗口总宽度为1000，则左侧和右侧列都将具有400（800/2）。

请注意，在缩小窗口大小时，星号列将裁剪您的内容。这是设计的。如果您希望比率保持不变，可以考虑在ViewBoxes（或整个网格）中包装布局。

场景2 - 如果您只是在寻找一个不考虑缩放而放置内容的网格，（重新：中间列消耗它所需的内容，然后左右列增长当他们有大量内容时，你可以使用SharedSizeScope功能。

 <Grid IsSharedSizeScope="True">
         <Grid.ColumnDefinitions>
            <ColumnDefinition SharedSizeGroup="MyRatio"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" SharedSizeGroup="MyRatio"/>
        </Grid.ColumnDefinitions>
    </Grid>

这将实现的是，无论何时第2列增长，它还会将其大小传播到第0列，从而确保第1列始终居中。

与场景1的主要区别在于场景2根据其子元素具有固定大小，而场景1具有根据其父容器行为的结构。

编辑：方案1，带有明确的示例：

    <Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="4*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="1" x:Name="TheLeftComponents" Orientation="Horizontal" HorizontalAlignment="Right" >
    <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
    </StackPanel>
    <Ellipse x:Name="TheMiddleComponent" Grid.Row="1" Grid.Column="1"  Height="40" Width="40" Stroke="Black" StrokeThickness="1" ></Ellipse>
    <StackPanel Grid.Row="1" Grid.Column="2" x:Name="TheRightComponents" Orientation="Horizontal" HorizontalAlignment="Left" >
        <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
        <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
        <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
        <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
        <Ellipse  Height="20" Width="20" Stroke="Black" StrokeThickness="1" ></Ellipse>
    </StackPanel>
</Grid>

选择中心控制/列

2 个答案: