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

Question

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

使用 Xamarin.Forms。也许可以使用自定义控制器或其他方式来执行此操作，其中标记扩展在 stacklayout 内部执行 x:static 引用？

   <!--#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，然后将其包含在您的页面中。

为了实现这一点，您创建了一个 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。您可以在所需的所有页面中重复使用它。