在 UWP 上将元素大小设置为等于另一个

Question

我正在尝试使用 XAML 构建一个简单的通用游戏应用程序。

我在 Grid 中有一些 Button。这些按钮根据网格大小具有动态大小。

然后我有另一个 Grid，它的尺寸与第一个不同，其中一些元素需要与第一个按钮的尺寸相同。我尝试使用按钮和其他网格，但均无效。

这是我目前的情况：

第一个按钮代码。
我将它的高度和宽度绑定在一起，因为我需要它是一个正方形

<Button Grid.Row="0" Grid.Column="0" 
            x:Name="btnCell_0" Content=""
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"    
            Margin="15"
            Background="{StaticResource SystemControlBackgroundAccentBrush}" 
            Height="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}" 
            Width="{Binding ActualHeight, ElementName=btnCell_0, Mode=OneWay}"/>

二元代码。需要与第一个按钮的大小相同。

    <Grid Grid.Row="1" Grid.Column="0" Background="{ThemeResource SystemControlBackgroundAccentBrush}"
          Height="{Binding ActualHeight, ElementName=btnCell_0, Mode=OneWay}"
          Width="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}"
          CanDrag="True">
    </Grid>

根据要求，这里是完整的代码。我去掉了大部分以便于查看，但结果是一样的

<Page x:Name="page"
    x:Class="quadradomagico.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:quadradomagico"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    >


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Margin="0,140,0,0" Background="{ThemeResource ApplicationForegroundThemeBrush}"
              VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <Grid.RowDefinitions>
                <RowDefinition Height="280*"/>
                <RowDefinition Height="60*"/>
                <RowDefinition Height="60*"/>
                <RowDefinition Height="20*"/>
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <Grid Grid.Row="0" Grid.ColumnSpan="4"            
                Width="340" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                HorizontalAlignment="Stretch"
                Margin="0, 20, 0, 20">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <Button Grid.Row="0" Grid.Column="0" 
                    x:Name="btnCell_0" Content=""
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"    
                    Margin="15"
                    Background="{StaticResource SystemControlBackgroundAccentBrush}" 
                    Height="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}" 
                    Width="{Binding ActualHeight, ElementName=btnCell_0, Mode=OneWay}" 
                    Drop="btnCell_0_DragEnter"/>

            </Grid>


            <Grid Tag="1"
                  Grid.Row="1" Grid.Column="0" Background="{ThemeResource SystemControlBackgroundAccentBrush}"
                  Height="{Binding ActualHeight, ElementName=btnCell_0, Mode=OneWay}"
                  Width="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}"
                  CanDrag="True" DragEnter="Grid_DragEnter" Drop="Grid_Drop">

                <TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </Grid>


        </Grid>

    </Grid>
</Page>

这是应用程序的屏幕截图，蓝色方块有不同的大小

Answer 1

我测试过，代码看起来像这样：

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Row="0" Grid.ColumnSpan="4"            
            Width="340" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            HorizontalAlignment="Stretch"
            Margin="0, 20, 0, 20">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Button Grid.Row="0" Grid.Column="0" 
                x:Name="btnCell_0" 
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"    
                Margin="15"
                Background="{StaticResource SystemControlBackgroundAccentBrush}"
                Height="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}"
                >
            </Button>
        </Grid>


        <Grid Tag="1"
              Grid.Row="1" Grid.Column="0" Background="{ThemeResource SystemControlBackgroundAccentBrush}"
              Height="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}"
              Width="{Binding ActualWidth, ElementName=btnCell_0, Mode=OneWay}"
              CanDrag="True" >
            <!--DragEnter="Grid_DragEnter" Drop="Grid_Drop"-->

            <TextBlock Text="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>

    </Grid>

</Grid>

Answer 2

仅供参考...

来自docs.microsoft.com：

Although it has an ActualHeightProperty backing field, ActualHeight does not raise property change notifications and it should be thought of as a regular CLR property and not a dependency property.

实际宽度也是如此。

结果通常是绑定在首次建立时（通常在页面初始化期间）起作用，但对源元素的 ActualHeight/Width 属性的任何后续大小更改都不会复制到目标元素的属性.

因此，例如，在横向和纵向之间旋转移动设备，或在桌面上调整 window 的大小可能不会导致目标元素正确更新。

此外，源元素在特定时间的可见性可能会导致不良且经常令人困惑的结果。如果在绑定尝试使用源元素的 ActualHeight/Width 属性时源元素已折叠，但随后源元素更改为可见，则源元素将如预期的那样，但目标元素可能看起来成为 missing/Collapsed/hidden。这是因为绑定在折叠时将目标元素属性从源元素设置为零，但是当源元素随后变为可见时 ActualHeight/Width 上没有发生更改事件。

如果属性是 "read-only"，它很有可能不会生成更改通知，因此对其的任何绑定都只会在首次应用时起作用。

在 UWP 上将元素大小设置为等于另一个

Set element size equal to another on UWP

c#

uwp