Xamarin Forms-将文字向上滑动到图像后面 [英] Xamarin Forms - slide text up behind image

问题描述

在一个网格中，我有一个图像，然后有2个堆栈布局，一个包含一行图标和一个按钮，下面的一个包含文本项列表. 我有一个功能，当用户单击一个按钮时，列表会向上移动以有效消失，然后向下移动以重新出现.

Within a grid I have an image then 2 stack layouts, one contains a row of icons and a button, and the one below contains a list of text items. I have a function which, when the user click a button, the list animates upwards to effectively disappear, then downwards to reappear.

这可以很好地工作，但是在设置动画时，文本始终在图像上可见，有没有办法使图像始终在顶部可见，从而看起来好像文本在图像后面向上滑动?

This works fine but the text is always visible over the image when animating up, is there a way to make the image always visible on top, so that it appears as if the text is sliding up behind the image?

这是我用来设置文本堆栈动画的代码:

Here is the code I use to animate the text stack:

public void ShowLess()
{
    TopLayout.TranslateTo(0, -(TopLayout.Bounds.Height + 60), 500, Easing.Linear);
    isIncreased = false;
}

public void ShowMore()
{
    TopLayout.TranslateTo(0, 0, 500, Easing.Linear);
    isIncreased = true;
}

还有XAML:

<ContentPage.Content>
    <Grid BackgroundColor="#ede8db">
        <Grid.RowDefinitions>
            <RowDefinition Height="47.5*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="47.5*" />
        </Grid.RowDefinitions>

        <ratio:ContentRatioContainer Grid.Row="0">
            <Image Aspect="AspectFill" Source="KevingroveCarouselImg.png" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="bigImg" />
        </ratio:ContentRatioContainer>

        <artina:Button Margin="10,10,10,10" x:Name="ImgZoom" Clicked="EnlargeImage" HorizontalOptions="End" VerticalOptions="Start" Image="IncreaseImageIcon.png" BackgroundColor="Transparent"  HeightRequest="30" WidthRequest="30"/>

        <StackLayout Grid.Row="1" Orientation="Horizontal" BackgroundColor="#ede8db" Margin="0" Padding="30,0,30,0" x:Name="iconStack" >
            <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
            <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CUTLERY}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
            <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WIFI}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
            <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.CAMERA}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
            <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.MAP}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
            <!--<Label HorizontalTextAlignment="End" HorizontalOptions="End" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}" Style="{StaticResource FontIcon}" TextColor="Gray" FontSize="30" />-->
            <artina:Button x:Name="openStack" HorizontalOptions="End" VerticalOptions="Start" Text="{x:Static ratio:FontAwesome.ARROW_DOWN}" 
                               Style="{StaticResource FontIcon}" BackgroundColor="Transparent"  HeightRequest="30" WidthRequest="30" Clicked="btnClicked" TextColor="Gray"/>

        </StackLayout>

        <StackLayout Grid.Row="2" x:Name="articleInfo" Padding="30,0,30,0">
            <StackLayout x:Name="TopLayout">
                <StackLayout Orientation="Horizontal">
                    <Label HorizontalTextAlignment="Center" Text="{x:Static ratio:FontAwesome.WHEELCHAIR_ALT}" Style="{StaticResource FontIcon}" TextColor="Black" FontSize="30" />
                    <Label Text="Address" VerticalOptions="Center" HorizontalOptions="StartAndExpand"  />
                </StackLayout>
            </StackLayout>
        </StackLayout>
    </Grid>
</ContentPage.Content>

推荐答案

在XAML中添加元素的顺序很重要，因此，如果要在顶部添加一些内容，只需在XAML中添加它并在其末尾添加内容即可.因此，首先添加第1行和第2行，然后在第1行之后添加图像.

The order in which you add your elements in XAML matters, so if you want to have something at the top, just add it and the end in XAML. So firstly add row 1 and row 2, and then after it row 1 with your image.

或者，您可以调用容器(网格)上的RaiseChild 方法，其中要显示的视图作为参数.

Alternatively you can call RaiseChild method on your container (grid) with the view you want to bring to the front as a parameter.

这篇关于Xamarin Forms-将文字向上滑动到图像后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！