XamarinForm中的网格是否可以实现这种布局?

kwvwclae  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(111)

我想创建具有以下结构的网格布局:2行1列。我想在网格的顶部放置一个黄色控件,它不受网格的约束。
黄色控件指示顶层分层状态。

fhity93d

fhity93d1#

您可以将网格放入AbsoluteLayout中,然后使用另一个控件来覆盖网格。例如:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App23.Page2">
    <ContentPage.Content>
        <StackLayout>
          <AbsoluteLayout HeightRequest="600">
            <Grid AbsoluteLayout.LayoutBounds="0,0,600,400" RowSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="7*"/>
                </Grid.RowDefinitions>
                <StackLayout HorizontalOptions="Fill" BackgroundColor="Green" Grid.Row="0"/>
                <StackLayout HorizontalOptions="Fill" BackgroundColor="Blue" Grid.Row="1"/>
            </Grid>
            <StackLayout  BackgroundColor="Red"
                         AbsoluteLayout.LayoutBounds="0,0,140,140"/>
          </AbsoluteLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

结果图像:

更新1:

您可以使用TranslationX propertyCustom Animation来移动红色堆栈布局。例如
在xaml中:

<StackLayout x:Name="red" BackgroundColor="Red"
                         AbsoluteLayout.LayoutBounds="0,0,140,140"/>

在后面的代码中:

var a = new Animation(v => red.TranslationX= v, 0, 100);
a.Commit(this, "Test", 16, 2000, Easing.CubicIn);

相关问题