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

Question

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

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

然后我有另一个 Grid，它的大小与第一个不同，其中一些元素需要与第一个按钮的大小相同。我尝试使用按钮和其他网格，但都不起作用。

这是我目前所拥有的:

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

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

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

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>