xamarin 常用模板元素

Question

我想知道如何将可重复使用的浮动菜单添加到 xamarin 应用程序的所有页面？

我们是否可以选择在 xamarin 中创建母版页布局并添加部分视图？

例如，在下面的模板中，我想在所有页面中重复以下 stacklayout 部分。

在页面上我有关注

<ContentPage.Content>
            <ScrollView>
                <StackLayout BackgroundColor="MediumPurple" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
                    <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand" BackgroundColor="White">
                        <StackLayout Orientation="Vertical"  HorizontalOptions="FillAndExpand" >
                            <Button Text="All" Clicked="PromoAll_Clicked" BackgroundColor="Orange"  />
                        </StackLayout>
                    </StackLayout>
                    <Label Text="Upcoming Events" VerticalTextAlignment="Center" FontSize="Large" TextColor="White" HorizontalOptions="Center" />
                    <ListView x:Name="PromolistView"   ItemTapped="promoOnItemSelected" RowHeight="55" BackgroundColor="MediumPurple" HasUnevenRows="True" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <ViewCell>
                                    ....
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                    // this area needs to be repeated every page 
                    <StackLayout Orientation="Horizontal" VerticalOptions="End">
                        <Button Text="A" FontAttributes="Bold"  BackgroundColor="MediumSlateBlue" BorderRadius="50" TextColor="White"></Button>
                        <Button Text="B" FontAttributes="Bold"  BackgroundColor="MediumSlateBlue"  TextColor="White"></Button>
                    </StackLayout>
                    //end of the floating menu 
                </StackLayout>
            </ScrollView>
        </ContentPage.Content>

Answer 1

在 Xamarin.Forms 中，Control Template 和 View 在某种程度上类似于 ASP.NET 中的母版页布局和部分视图。举个简单的例子：

App.xaml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TemplateExample.App">
    <Application.Resources>
        <ResourceDictionary>

            <ControlTemplate x:Key="HeaderTemplate">
                <Grid Padding="0,40,0,0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <BoxView BackgroundColor="Gray" Grid.Row="0" HeightRequest="50" />
                    <Label Grid.Row="0" Text="This is the header" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
                    <ContentPresenter Grid.Row="1" />
                </Grid>
            </ControlTemplate>

        </ResourceDictionary>
    </Application.Resources>
</Application>

TemplatedPage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TemplateExample.Views.TemplatedPage">

    <ContentView ControlTemplate="{StaticResource HeaderTemplate}">
        <StackLayout Orientation="Vertical" HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
            <Label Text="This is the content" />
        </StackLayout>
    </ContentView>

</ContentPage>

渲染的模板和视图