将 UserControl 内的 Grid Column Width 绑定到父 Grid Column Width答案

【问题标题】：Binding Grid Column Width inside UserControl to parent Grid Column Width将 UserControl 内的 Grid Column Width 绑定到父 Grid Column Width
【发布时间】：2013-07-28 23:22:37
【问题描述】：

我有一个两行的 WPF 网格。第一行包含 4 列，每列包含一个按钮。第二行包含 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>

谢谢！

【问题讨论】：

标签： wpf xaml

【解决方案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>

在用户控件中：

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

现在所有具有相同 SharedSizeGroup 名称的 Grid 列的宽度被链接，有效地绑定到需要最多空间的列的宽度（在本例中是 YeahGrid 中的第 1 列）。

【讨论】：

感谢您的提示，foosburger！我们决定重新设计它，以免侵入 WPF 的布局系统。非常感谢！

【解决方案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>

【讨论】：