设置元素大小等于UWP上的另一个

2024-02-24 13:55:28

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

我在网格中有一些按钮.这些按钮具有根据网格大小的动态大小.

然后,我得到另一个网格,该网格的大小与第一个不同,其中某些元素的大小必须与第一个按钮的大小相同.我尝试使用按钮和其他网格,但均无效.

这是我到目前为止的内容：

第一个按钮代码.
我将高度和宽度绑定在一起,因为我需要将其变成正方形

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

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

解决方法:

我测试了一下,代码看起来像这样：

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

码农公寓

相关文章