将第一个 StackLayout 放在页面底部 Xamarin.Forms

Question

我是 Xamarin 的新手，我正在尝试将我的第一个页面堆栈布局放置在屏幕底部，然后滚动以查看剩余内容。

另外，我有一张图像作为我的内容页面的背景，我正尝试对页面的其余内容使用滚动视图。我在 Whosebug 上尝试了其他解决方案，但它们将 StackLayouts VerticalOptions 作为 Center 和 Start，但我没有。我希望第一个堆栈布局从底部开始，上面没有 control/layout。

此外，此内容页充当 MasterDetailPage 的详细信息页。

这是我目前的内容页 -

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Excercise.Views.HomePage" Title="App"
             NavigationPage.HasBackButton="False" BackgroundImageSource="image.jpg">
  
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Option1"></ToolbarItem>
            <ToolbarItem Text="Option2"></ToolbarItem>

        </ContentPage.ToolbarItems>
        <!--<NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_feed.png"/>
            </OnPlatform>
        </NavigationPage.Icon>-->
    
    <ContentPage.Content>
    <StackLayout Orientation="Horizontal" >
           
            <ScrollView>
                    <StackLayout Orientation="Vertical" VerticalOptions="EndAndExpand">
                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10" VerticalOptions="EndAndExpand">
                            <Grid VerticalOptions="EndAndExpand">
                                <Grid.RowDefinitions>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="2"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                    <RowDefinition></RowDefinition>
                                </Grid.RowDefinitions>

                                <Label x:Name="Label1" FontSize="Large" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" ></Label>
                                <Label x:Name="Label2"  FontSize="Medium" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <BoxView BackgroundColor="Black" Grid.Row="1" Grid.ColumnSpan="6"></BoxView>

                                <Label x:Name="Label3" FontSize="Large" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
                                <Label Text="Label4" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
                                <Label x:Name="Label5" Grid.Row="5" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label6" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label7" Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label8" Grid.Row="4" Grid.Column="3" Grid.ColumnSpan="2"></Label>
                                <Label x:Name="Label9" Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="2"></Label>

                                <CollectionView x:Name="collecview1" WidthRequest="100"  Grid.Row="6" Grid.RowSpan="3" Grid.ColumnSpan="6" ItemsLayout="HorizontalList" >
                                    <CollectionView.ItemTemplate>
                                        <DataTemplate>
                                            <StackLayout Orientation="Vertical" Padding="5,25,30,25" VerticalOptions="Center">
                                                <Label Text="{Binding Text}"></Label>
                                                <Image Source="{Binding Text}"></Image>
                                                <Label Text="{Binding Text}" HorizontalTextAlignment="Center"></Label>
                                            </StackLayout>
                                        </DataTemplate>
                                    </CollectionView.ItemTemplate>
                                </CollectionView>

                            </Grid>
                        </Frame>
                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"></RowDefinition>

                                </Grid.RowDefinitions>

                                <StackLayout Grid.Row="0" Grid.Column="0">
                                    <Label Text="Label10"></Label>
                                    <BoxView BackgroundColor="Gray" HeightRequest="2"></BoxView>
                                    <CollectionView x:Name="collecview2" ItemsLayout="VerticalList" ItemSizingStrategy="MeasureAllItems">
                                        <CollectionView.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="30" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*"  />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>

                                                    <Label Text="{Binding Text}" Grid.Column="0" HorizontalTextAlignment="End" ></Label>
                                                    <Label Text="Image" Grid.Column="1"></Label>
                                                    <!--<Image Source="{Binding IconSource}" Grid.Column="1"></Image>-->
                                                    <Label Text="{Binding Text}" FontAttributes="Bold" Grid.Column="2"></Label>
                                                    <Label Text="{Binding Text}" Grid.Column="3"></Label>
                                                    <Label Text="{Binding Text}" Grid.Column="4"></Label>

                                                </Grid>
                                            </DataTemplate>
                                        </CollectionView.ItemTemplate>

                                    </CollectionView>
                                </StackLayout>
                            </Grid>
                        </Frame>

                        <Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
                            <StackLayout>
                                <Label Text="Label23"></Label>
                                <BoxView BackgroundColor="Black" HeightRequest="2"></BoxView>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </ScrollView>
           
        </StackLayout>
    </ContentPage.Content>
</ContentPage>


MainPage.xaml.cs 

 [DesignTimeVisible(false)]
    public partial class MainPage : MasterDetailPage
    {
        public MainPage()
        {
            InitializeComponent();

            MasterBehavior = MasterBehavior.Split;
            Detail = new HomePage();
        }   

        public MainPage(string City, string lockey,string StateID)
        {
            InitializeComponent();  
            Detail = new HomePage(City,lockey,StateID);    
        }

       
    }     
     
MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
                  xmlns:local="clr-namespace:Excercise.Views"
             x:Class="Excercise.MainPage" Title="App" IsPresented="False">

    <MasterDetailPage.Master>


        <local:MenuPage Title="MenuPage" x:Name="menuPage"></local:MenuPage>


    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <local:HomePage Title="HomePage" x:Name="homePage" BackgroundImageSource="raleigh.jpg"></local:HomePage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

有什么办法可以实现吗？任何帮助深表感谢！非常感谢！

Answer 1

I want the first stacklayout to start from the bottom and no control/layout above that.

您可以通过屏幕高度请求为您的第一个堆栈布局提供上边距，以便它从底部开始。

在 xaml 中，为您的 StackLayout 命名：

<StackLayout Orientation="Vertical" VerticalOptions="End" x:Name="firstStacklayout">

在后面的代码中：

protected override void OnAppearing()
{
    base.OnAppearing();
    firstStacklayout.Margin = new Thickness(0, Application.Current.MainPage.Height, 0, 0);
}

将第一个 StackLayout 放在页面底部 Xamarin.Forms

Position 1st StackLayout on page at the bottom Xamarin.Forms

xamarin.forms

stacklayout