Question

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

这样可以正常工作，但是在动画制作时，文字总是在图像上可见，是否有办法使图像始终在顶部可见，这样看起来好像文字在图像后面向上滑动？

以下是我用来设置文本堆栈动画的代码：

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>

Answer 1

在XAML中添加元素的顺序很重要，因此如果您想在顶部添加某些内容，只需将其添加到XAML中即可。首先添加第1行和第2行，然后在第1行添加图像。

或者，您可以在容器（网格）上使用要作为参数带到前面的视图调用RaiseChild方法。

Xamarin表单 - 在图像后面滑动文本

1 个答案: