WPF 方形单元格答案

【问题标题】：WPF Square CellsWPF 方形单元格
【发布时间】：2019-03-25 07:05:15
【问题描述】：

我尝试创建一个 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>

但是网格看起来还是这样的：

那么我在这里做错了什么？有什么想法吗？

【问题讨论】：

您是否运行过构建/运行代码？当我复制您的代码时，它（在设计器中）像您的图像一样显示。但是当我运行一次代码时，它会显示如下答案所示。是否还有其他因素会干扰您的布局？
您是否找到了解决此问题的方法并想分享它以便其他人找到答案？

标签： c# .net wpf xaml data-binding

【解决方案1】：

好吧，我通过绑定到矩形本身的高度来让它工作，看看：

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

【讨论】：

@gadasadox 如果您觉得它有用，请考虑支持答案（尤其是让 OP 看到有价值的答案:)）。
我不建议在控制级别上设置大小，当您想在声明它的位置更改它时，您会在几个小时后寻找它
@DenisSchaf 这是个人喜好以及您组织项目的方式:)

【解决方案2】：

对于透明度，我不建议像 Ian 建议的那样在控件级别设置布局大小。从长远来看，这将使其更难适应。所以这是我将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>

【讨论】：