Question

我有一个有两行的WPF网格。第一行包含4列，每列包含一个Button。第二行包含colspan为3的用户控件。自定义控件包含另一个有两列的Grid。

我想将UserControl网格中第一列的宽度设置为MainWindow网格中第二列的宽度。在下面的示例中，“嵌套列0”的宽度应与“列1”的宽度相同。

我尝试使用ElementName，但它没有成功。任何想法怎么做？

<Window x:Class="TestElementName.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
        xmlns:local="clr-namespace:TestElementName" 
        Title="MainWindow" Height="200" Width="600">
    <Grid Tag="YeahGrid" Name="grid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Grid.Column="0" Grid.Row="0">Column 0</Button>
        <Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button>
        <Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button>
        <Button Grid.Column="3" Grid.Row="0">Column 3</Button>

        <local:ucButton Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" BorderBrush="Red" BorderThickness="1" />
    </Grid>
</Window>

用户控制如下：

<UserControl x:Class="TestElementName.ucButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:trace="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0">nested column 0</Button>
        <Button Grid.Column="1">nested column 1</Button>
    </Grid>
</UserControl>

谢谢！

Answer 1

您可以使用SharedSizeGroup执行此操作。这允许您链接多个网格中指定列的宽度。（它也适用于行高！）

首先，您需要在控件上定义SharedSizeScope，该控件包含将共享宽度的所有列。你可以使用你的YeahGrid：

<Grid Tag="YeahGrid" Name="grid" Grid.IsSharedSizeScope="True">

然后在要对齐的列上设置SharedSizeGroup属性。在窗口中：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="Auto" Tag="Hallelujah" x:Name="ColDef2" SharedSizeGroup="HallelujahSSG" />
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

在UserControl中：

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

现在，具有相同SharedSizeGroup名称的所有Grid列的宽度被链接，实际上绑定到需要最大空间的列的宽度（在本例中为YeahGrid中的列1）。

Answer 2

在UserControl Xaml中，您提到了ColumnDefinition width =“Auto”。在那个地方，请根据您的要求添加MinWidth属性。

对于您的方案，您可以添加---

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="180"/>
        <ColumnDefinition Width="Auto" MinWidth="115"/>           
</Grid.ColumnDefinitions>

因为你在这样的主窗口中使用

 <Button Grid.Column="1" Grid.Row="0" MinWidth="180">Column 1</Button>
 <Button Grid.Column="2" Grid.Row="0" MinWidth="115">Column 2</Button>

将UserControl中的网格列宽度绑定到父网格列宽度

2 个答案: