将 UserControl 内的网格列宽绑定到父网格列宽 [英] Binding Grid Column Width inside UserControl to parent Grid Column Width

问题描述

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

I have a WPF Grid with two rows. First row contains 4 columns and each column contains a Button. Second row contains user control with colspan of 3. The custom control contains another Grid with two columns.

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

I would like to set the width of the first column in UserControl's grid to the width of the second column in the MainWindow's grid. In the example below "nested column 0"'s width should be the same as "Column 1"'s width.

我尝试使用 ElementName，但没有成功.任何想法如何做到这一点?

I tried with ElementName but it did not work out. Any ideas how to do it?

<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>

谢谢！

推荐答案

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

You can do this using a SharedSizeGroup. This allows you to link the width of designated columns in multiple Grids. (It also works for row height!)

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

First you need to define a SharedSizeScope on a control that encompasses all of the columns that will share widths. You can use your YeahGrid for this:

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

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

Then set the SharedSizeGroup property on the columns you want to align. In the Window:

<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 列).

Now the widths of all Grid columns with the same SharedSizeGroup name are linked, effectively bound to the width of the column that requires the most space (in this case Column 1 in YeahGrid).

这篇关于将 UserControl 内的网格列宽绑定到父网格列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！