如何在Xamarin中重用相同的视图？XAML

Question

所以我得到了这个代码,我需要在我或多或少的所有页面上重复使用,但是我有点厌倦了改变一个页面并且必须在10个或更多的地方做同样的事情,有没有更好的方法做这个？

使用Xamarin.Forms.也许有可能使用自定义控制器或其他方式使用标记扩展到stacklayout do ax:静态引用它吗？

   <!--#region BOTTOM Navigation Bar-->

        <!-- Theme Colored bar-->
        <StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,0,0,0" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColor}" >
        </StackLayout>

        <!-- Bottom Menu bar -->
        <StackLayout Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="3" Padding="0,3,0,3" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Orientation="Horizontal" BackgroundColor="{StaticResource ThemeBkColorBottomBar}" >

            <!-- Left -->
            <StackLayout Padding="15,0,0,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Orientation="Horizontal"  >

                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding CmdGoToCheckUpdates}" NumberOfTapsRequired="1"/>
                    </StackLayout.GestureRecognizers>

                    <Image Source="updates.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" />
                    <Label Text="Updates" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />

                </StackLayout>

            </StackLayout>
            <!-- Center -->
            <StackLayout Padding="0,0,0,0" Orientation="Horizontal" Spacing="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >

                <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="0,0,0,0" RowSpacing="0" ColumnSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2" >
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding CmdGoToCatalog}" NumberOfTapsRequired="1"/>
                        </StackLayout.GestureRecognizers>
                        <Image Source="catalogues.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
                        </Image>
                        <Label Text="Catalog" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
                    </StackLayout>

                    <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding CmdGoToPresentation}" NumberOfTapsRequired="1"/>
                        </StackLayout.GestureRecognizers>
                        <Image Source="display.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center" >
                        </Image>
                        <Label Text="Presentations" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
                    </StackLayout>

                    <StackLayout Grid.Row="0" Grid.Column="2" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding CmdGoToScan}" NumberOfTapsRequired="1"/>
                        </StackLayout.GestureRecognizers>
                        <Image Source="scan.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
                        </Image>
                        <Label Text="Scanner" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
                    </StackLayout>

                    <StackLayout Grid.Row="0" Grid.Column="3" Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="FillAndExpand" Spacing="2">
                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding CmdGoToSearch}" NumberOfTapsRequired="1"/>
                        </StackLayout.GestureRecognizers>
                        <Image Source="Search.png" HeightRequest="35" WidthRequest="35" HorizontalOptions="Center">
                        </Image>
                        <Label Text="Search" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
                    </StackLayout>

                </Grid>

            </StackLayout>

            <!-- Right -->
            <StackLayout Padding="0,0,15,0" Spacing="10" VerticalOptions="FillAndExpand" HorizontalOptions="EndAndExpand" Orientation="Horizontal" >
                <StackLayout Orientation="Vertical" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" Spacing="2">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding CmdGoToLoginLogout}" NumberOfTapsRequired="1"/>
                    </StackLayout.GestureRecognizers>
                    <Image Source="logout.png" HeightRequest="35" WidthRequest="35" >
                    </Image>
                    <Label Text="Settings" HorizontalOptions="Center" Style="{StaticResource BottomMenuBtnText}" />
                </StackLayout>

            </StackLayout>

        </StackLayout>

        <!--#endregion-->

Answer 1

您可以创建一个CustomView,然后将其包含在Pages中.

为了实现这一目标,您需要创建一个YourCustomView.xaml,

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProject.YourCustomView">

</ContentView>

并且,在您的Page.xaml中包含它

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:YourProject;assembly=YourProject"
             x:Class="YourProject.YourPage">
    <views:YourCustomView/> 
</ContentPage>

下一步是关于绑定所需的属性,为此,您需要在CustomView中创建BindableProperties.您可以在所需的所有页面中重复使用它.