Binding Grid.RowDefinition Высота к ширине сетки в Xamarin

Question

Я слишком долго боролся с этой проблемой. Что-то, что должно быть очень простым ... Я делаю приложение Ti c Ta c Toe в Xamarin.Forms. Сама доска содержит кнопки 3х3, каждая кнопка находится в отдельной ячейке сетки. У меня есть 3 клетки по горизонтали и 3 клетки по вертикали. Сетка с этими ячейками размещается в строке Сетки из другой Сетки. Горизонтальная часть доски автоматически расширяется, так что она занимает всю ширину экрана, как вы можете видеть на рисунке. Но я хочу, чтобы высота кнопок / сетки была одинаковой, чтобы они создавали идеальный квадрат. Я могу сделать это путем жесткого кодирования значения при создании кнопки с помощью HeightRequest = someValue, но я хочу привязать его к ширине button / gridColumn, чтобы оно выглядело хорошо независимо от того, на каком устройстве вы работаете.

В этом примере я жестко прописал высоту строки сетки. Как вы можете видеть, на iPhone он выглядит отлично, но на iPad это ужасно из-за большего дисплея и большего количества пикселей. Если бы только я мог сделать высоту такой же, как ширина, это было бы идеально.

Сетка сделана на XAML:

 <Grid x:Name="rootGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="70" />
            <RowDefinition Height="60" />
            <RowDefinition Height="400"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label Text="Tic Tac Toe" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Padding="0,50,0,0" FontFamily="Arial" FontAttributes="Bold" FontSize="Large" TextColor="#FFFFFF" Grid.Row="0" Grid.Column="0"/>
        <Grid Grid.Row="1" Margin="0,20,0,0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label HorizontalTextAlignment="Center" Text="X: 0 points" Grid.Column="0" TextColor="#FFFFFF" IsVisible="True"></Label>
            <Label HorizontalTextAlignment="Center" Text="O: 0 points" Grid.Column="1" TextColor="#FFFFFF" IsVisible="True"></Label>
        </Grid>

        <Grid Grid.Row="2" x:Name="theBoard">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="col1" Width="*" />
                <ColumnDefinition x:Name="col2" Width="*" />
                <ColumnDefinition x:Name="col3" Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <!--<RowDefinition BindingContext="{x:Reference Name=col1}" Height="{Binding Path=Width}"/>-->
            </Grid.RowDefinitions>
        </Grid>
    </Grid>

И кнопки добавляются так:

        private void CreateFields()
    {


        // Iterate through the rows
        for (int i = 0; i < fields.GetLength(1); i++)
        {

            // Iterate through the columns
            for (int j = 0; j < fields.GetLength(0); j++)
            {
                Button field = new Button()
                {
                    BackgroundColor = Color.WhiteSmoke,

                };
                // Adds the new button to the two dimmensional array
                fields[i, j] = field;

                theBoard.Children.Add(field, j, i);



            }

        }

        //Console.WriteLine("The current width of the button is: " + fields[0,0].Width);
        //Console.WriteLine("The current height of the button is: " + fields[0,0].Height);
        //Console.WriteLine("The current width of the column is: " + col1.Width);
       // Console.WriteLine("The current height of the column is: " + row1.Height);


    }

Я действительно надеюсь, что кто-то сможет мне помочь. Должен быть какая-то простая деталь, которую я забыл. В WPF я имел обыкновение иметь что-то под названием «ActualWidth», но здесь это не так.

Answer 1

Я обновил ваш XAML, пожалуйста, смотрите изменения ниже с комментариями. Это должно сделать вашу сетку доски всегда квадратной.

    <Grid x:Name="rootGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="60" />
        <!--set this row definition height to Auto -->
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="Tic Tac Toe" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Padding="0,50,0,0" FontFamily="Arial" FontAttributes="Bold" FontSize="Large" TextColor="#FFFFFF" Grid.Row="0" Grid.Column="0"/>
    <Grid Grid.Row="1" Margin="0,20,0,0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalTextAlignment="Center" Text="X: 0 points" Grid.Column="0" TextColor="#FFFFFF" IsVisible="True"></Label>
        <Label HorizontalTextAlignment="Center" Text="O: 0 points" Grid.Column="1" TextColor="#FFFFFF" IsVisible="True"></Label>
    </Grid>

    <!--Bind the HeightRequest of the board grid to its own width-->
    <Grid Grid.Row="2" x:Name="theBoard" HeightRequest="{Binding Source={x:Reference theBoard}, Path=Width}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="col1" Width="*" />
            <ColumnDefinition x:Name="col2" Width="*" />
            <ColumnDefinition x:Name="col3" Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

Answer 2

RelativeLayouts хороши для простого адаптивного макета, как у вас. Свяжите все ограничения с шириной родительского элемента, так как вы хотите, чтобы он заполнил ширину страницы. Поскольку весь столбец разделен на 3 (3 столбца), 1/3 = 0,33333333 - это ваш коэффициент для выражения Constrain.

<Grid x:Name="rootGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="60" />
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="Tic Tac Toe" HorizontalOptions="Center" VerticalOptions="StartAndExpand" FontFamily="Arial" FontAttributes="Bold" FontSize="Large" TextColor="#FFFFFF" Grid.Row="0" Grid.Column="0"/>
    <Grid Grid.Row="1" Margin="0,20,0,0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalTextAlignment="Center" Text="X: 0 points" Grid.Column="0" TextColor="#FFFFFF" IsVisible="True"></Label>
        <Label HorizontalTextAlignment="Center" Text="O: 0 points" Grid.Column="1" TextColor="#FFFFFF" IsVisible="True"></Label>
    </Grid>

    <RelativeLayout
        Grid.Row="2"
        x:Name="theBoard">
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=0}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"/>
        <local:TicTacView
            RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.333333}"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.666666}"/>
    </RelativeLayout>
</Grid>

Надеюсь помогает! Что касается ландшафта (поддерживаете ли вы пейзаж?), Дизайн следует переосмыслить, так как расширение TicTa c View до ширины не обеспечит хороший пользовательский интерфейс.