Question

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

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

然后我有另一个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

... FYI

来自docs.microsoft.com：

虽然它有一个ActualHeightProperty支持字段，但ActualHeight不会引发属性更改通知，它应该被视为常规CLR属性而不是依赖属性。

ActualWidth也是如此。

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

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

此外，源元素在特定时间的可见性可能会导致不良且常常令人困惑的结果。如果在绑定尝试使用源元素的ActualHeight / Width属性时源元素是Collapsed，但随后源元素更改为Visible，则源元素将按预期进行，但目标元素可能似乎缺失/折叠/隐藏。这是因为绑定在源元素被折叠时将目标元素属性设置为零，但是当源元素随后变为可见时，在ActualHeight / Width上没有发生更改事件。

如果某个属性是＆＃34;只读＆＃34;，它很有可能无法生成更改通知，因此对它的任何绑定只会在首次应用时起作用。

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

2 个答案: