Блог

Главная - Вопросы по программированию - Нужна помощь в разработке форм xamarin

Нужна помощь в разработке форм xamarin

#android #ios #xamarin #xamarin.forms

#Android #iOS #xamarin #xamarin.forms

Вопрос:

Я создаю приложение с использованием портативной формы xamarin (кроссплатформенной), имеющей проект Android и IOS.

У меня возникла проблема с проектированием.

Ниже приведен мой код. 

 <Grid ColumnSpacing="0" RowSpacing="0" >

    <Grid.RowDefinitions >
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Row="0" Grid.Column="0" Padding="20,30,20,0">
      <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="30" BackgroundColor="#6E335E" Padding="10,0,10,0" >
        <Label Text="{ Binding CompanyName }" FontSize="18"  HorizontalOptions="Start" VerticalOptions="CenterAndExpand"  HorizontalTextAlignment="Center" TextColor="White" ></Label>

      </StackLayout>
    </StackLayout>

    <StackLayout VerticalOptions="FillAndExpand" Grid.Row="1" HeightRequest="130"  HorizontalOptions="FillAndExpand" Padding="20,0,20,0">
      <Image  Source="{ Binding LogoPath }" VerticalOptions="FillAndExpand"   HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>

    </StackLayout>

    <StackLayout Grid.Row="2" Grid.Column="0" Padding="10,0,10,30" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" >
      <Image  Source="image_bottom.png" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>
    </StackLayout>

  </Grid>

Ниже приведено изображение, описывающее, как я хочу дизайн

введите описание изображения здесь

Пожалуйста, помогите мне в разработке проблемы.

Заранее спасибо

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

1. Я вижу пару отличий, закругленный угол, на втором рисунке есть пробел. Не могли бы вы указать функции, которые вы пытаетесь реализовать?

2. Я хочу удалить пробел между мексиканским изображением и фиолетовой полосой

3. Можете ли вы уточнить, как называется элемент в коде, который неправильно размещен? Это image_bottom.png? Это тот элемент, который вы устанавливаете с помощью {Binding LogoPath}?

4. image_bottom.png — это изображение фиолетового цвета, а {логопат привязки} — изображение над панелью фиолетового цвета (image_bottom.png)

5. @KirtiZare Попробуйте установить заполнение для StackLayout с изображением LogoPath

Ответ №1:

Ваш stacklayout имеет высоту 130, поэтому определение строки расширяется только до этой точки. Вы должны установить для определения значение *, а для параметров сетки по вертикали значение fillandexpand, чтобы оно заполняло оставшееся пространство. 

 <Grid.RowDefinitions >
          <RowDefinition Height="Auto"></RowDefinition>
          <RowDefinition Height="*"></RowDefinition>
          <RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>