Xamarin Forms: как разместить один макет поверх другого макета - PullRequest
Новая
       39

Xamarin Forms: как разместить один макет поверх другого макета

0 голосов
/ 23 сентября 2019

Я пытаюсь создать пользовательский интерфейс, как показано ниже:

enter image description here

Мой код: 

<RelativeLayout>
    <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="33.3*" />
               <ColumnDefinition Width="33.4*" />
               <ColumnDefinition Width="33.3*" />
             </Grid.ColumnDefinitions>
             <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" Margin="-10">
                <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
             </StackLayout>

              <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" Margin="-10">
                  <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
               </StackLayout>

               <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" Margin="-10">
                  <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
         </StackLayout>

         <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
             <Grid>
                 <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                 </Grid.ColumnDefinitions>
                  <Image Source="ic_daily_reading_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                  <Image Source="ic_saint_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                   <Image Source="ic_quiz_icon_xx.png" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
                 </Grid>
           </StackLayout>
     </RelativeLayout>

Токовый выход:

enter image description here

Как создать макет наподобие верхнего?Какое свойство относительного расположения нужно использовать для достижения этой цели?

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

На самом деле все довольно просто, используйте свойство TranslationY в представлении изображений: 

<Image Grid.Column="0" 
       TranslationY="-20"
       Source="ic_daily_reading_icon_xx.png" 
       WidthRequest="30" 
       HeightRequest="30" />
0 голосов
/ 23 сентября 2019

Согласен с @Roubachof.Или вы можете поместить макеты стека в одну ячейку сетки. 

<Grid>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand">
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <StackLayout Grid.Column="0" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#F0BB1D" >
                    <Label Text="Daily Readings" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="1" HorizontalOptions="FillAndExpand" HeightRequest="40" Orientation="Vertical" BackgroundColor="#FD728B" >
                    <Label Text="Saint of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>

                <StackLayout Grid.Column="2" HorizontalOptions="FillAndExpand" Orientation="Vertical" HeightRequest="40" BackgroundColor="#1FB5D6" >
                    <Label Text="Quiz of the Day" TextColor="White" FontSize="15" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand"/>
                </StackLayout>
            </Grid>
        </StackLayout>

        <StackLayout Grid.Row="0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" >
            <Grid HeightRequest="30">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="33.3*" />
                    <ColumnDefinition Width="33.4*" />
                    <ColumnDefinition Width="33.3*" />
                </Grid.ColumnDefinitions>
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="0" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="1" />
                <Image BackgroundColor="Red" WidthRequest="30" HeightRequest="30" Grid.Column="2"/>
            </Grid>
        </StackLayout>
</Grid>
...