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

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>