Блог

Главная - Вопросы по программированию - Столбцы сетки Xamarin с динамической шириной: объект занимает неправильный столбец, несмотря на назначение

Столбцы сетки Xamarin с динамической шириной: объект занимает неправильный столбец, несмотря на назначение

#xaml #xamarin #xamarin.forms

Вопрос:

Я пытаюсь создать сетку в формах Xamarin с двумя столбцами, каждый из которых занимает половину экрана. Я реализовал свой XAML следующим образом

 <Grid VerticalOptions="End" HorizontalOptions="CenterAndExpand" BackgroundColor="#3F4045" Margin="0,0,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Grid.ColumnSpan="2" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" BackgroundColor="#3F4045"/>
    <Grid Grid.Row="1">
        <Grid Grid.Column="0" HorizontalOptions="Start">
            <Frame BackgroundColor="#FCFCFC" CornerRadius="0" Margin="0" Padding="0">
                <Entry TextColor="#3F4045" BackgroundColor="#FCFCFC" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" PlaceholderColor="#3F4045" Placeholder="Last Name, First Name"/>
            </Frame>
         </Grid>
         <Grid Grid.Column="1" HorizontalOptions="Start">
             <Frame BackgroundColor="#FCFCFC" CornerRadius="0" Margin="0" Padding="0">
                 <Button TextColor="#3F4045" BackgroundColor="#FCFCFC" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text="Upload Records"/>
             </Frame>
         </Grid>
     </Grid>
</Grid>

Предполагается, что каждый из двух кадров будет занимать половину второго ряда с небольшим промежутком между ними. Однако при загрузке приложения каждый из них занимает половину первого столбца с небольшим промежутком между ними. Я поэкспериментировал, изменив ширину второго столбца с 5* до 8*, и, как я и ожидал, оба кадра уменьшились настолько, что вместе они занимали 5/13 экрана, а это означает, что на самом деле они оба находятся в первом столбце. Вот фотографии проблемы и тест, который я провел с шириной 5* и 8* для справки:

Изображение, демонстрирующее, что оба кадра занимают половину первого столбца вместо того, чтобы каждый появлялся в своем собственном столбцеИзображение, демонстрирующее, что оба кадра определенно находятся в одном столбце

Есть ли что-то, чего мне не хватает при настройке горизонтальных/вертикальных опций в тегах фреймов или сетки? Спасибо вам за помощь!

Комментарии:

1. почему ваши фреймы вложены в дочерние сетки, а не являются дочерними элементами основной сетки?

2. Ха-ха, это на самом деле оказалось ответом. Я думал использовать теги сетки таким образом с сеткой. Строка и сетка. Столбец ссылался на определения строк и столбцов родительской сетки и был способом назначения дочерних элементов этим строкам и столбцам. Казалось, это сработало для другой страницы моего приложения, где я сделал то же самое и получил желаемый макет, но теперь я собираюсь вернуться и пересмотреть его. Спасибо вам за вашу помощь!

Ответ №1:

Решение состояло в том, чтобы удалить кадры из тегов сетки и сделать их дочерними элементами родительской сетки напрямую, используя сетку.Строка и сетка.Столбец, чтобы назначить их в соответствующие места.

 <Grid VerticalOptions="End" HorizontalOptions="CenterAndExpand" BackgroundColor="#3F4045" Margin="0,0,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Rectangle Grid.Row="0" Grid.ColumnSpan="2" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" BackgroundColor="#3F4045"/>
    <Frame Grid.Row="1" Grid.Column="0" BackgroundColor="#FCFCFC" CornerRadius="0" Margin="0" Padding="0">
        <Entry TextColor="#3F4045" BackgroundColor="#FCFCFC" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" PlaceholderColor="#3F4045" Placeholder="Last Name, First Name"/>
    </Frame>
    <Frame Grid.Row="1" Grid.Column="1" BackgroundColor="#FCFCFC" CornerRadius="0" Margin="0" Padding="0">
        <Button TextColor="#3F4045" BackgroundColor="#FCFCFC" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" Text="Upload Records"/>
    </Frame>
</Grid>

Вот обновленный код.

Метки: ,