WPF Square Cells

Question

Я пытаюсь создать пользовательский элемент управления WPF, который объединяет TextBox с двумя кнопками.Для макета я использую сетку с TextBox в первом столбце и кнопками в последних двух столбцах.

Теперь я хочу сделать последние два столбца квадратными - но я понятия не имею, какпопасть.Мой XAML выглядит так:

<UserControl x:Class="Demo.Wpf.Controls.ConfirmationButton"
             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:local="clr-namespace:Demo.Wpf.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="28.341" d:DesignWidth="226.904">

    <Border BorderBrush="Black" BorderThickness="1">
        <Grid ShowGridLines="True" x:Name="layoutGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="{Binding ActualHeight, ElementName=myRow, Mode=OneWay}"/>
                <ColumnDefinition Width="{Binding ActualHeight, ElementName=myRow, Mode=OneWay}"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition x:Name="myRow" />
            </Grid.RowDefinitions>

            <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0"></Rectangle>
            <Rectangle Fill="Green" Grid.Row="0" Grid.Column="1"></Rectangle>
            <Rectangle Fill="Blue" Grid.Row="0" Grid.Column="2"></Rectangle>

        </Grid>
    </Border>

</UserControl>

Но сетка выглядит по-прежнему так:

Так что я делаю неправильноВот?Есть идеи?

Answer 1

Для прозрачности я не рекомендую устанавливать размеры макета на уровне управления, как рекомендует Ян. Это усложнит адаптацию в долгосрочной перспективе. Итак, вот мое решение, связывающее ширину ColumnDefinition с ActualHeight Сетки. Кроме того, я не рекомендую использовать имена для привязки, если вы можете избежать этого. Элемент управления с именем будет загружен все время, даже если он не виден или находится вне области видимости!

        <Border BorderBrush="Black" BorderThickness="1">
            <Grid ShowGridLines="True" x:Name="layoutGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}, Mode=OneWay}"/>
                    <ColumnDefinition Width="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}, Mode=OneWay}"/>
                </Grid.ColumnDefinitions>


                <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0"></Rectangle>
                <Rectangle Fill="Green" Grid.Row="0" Grid.Column="1"></Rectangle>
                <Rectangle Fill="Blue" Grid.Row="0" Grid.Column="2"></Rectangle>

            </Grid>
        </Border>

Answer 2

Ну, у меня получилось, привязав к высоте самого прямоугольника, просто посмотрите:

<Rectangle Name="rect1" Fill="Green" Grid.Row="0" Grid.Column="1" Width="{Binding ElementName=rect1, Path=ActualHeight}"></Rectangle>
<Rectangle Name="rect2" Fill="Blue" Grid.Row="0" Grid.Column="2" Width="{Binding ElementName=rect2, Path=ActualHeight}"></Rectangle>