如何在Xamarin中重用相同的视图? XAML [英] How to reuse the same view in Xamarin? XAML

问题描述

所以我得到了这段代码，需要在几乎所有页面上重复使用，但是我有点厌倦了更改一页并必须在10个或更多位置执行相同操作的情况，更好的方法来做到这一点?

So I got this code that I need to re-use on more or less all my pages, but I'm getting kinda tired of changing one page and having to do the same thing in 10 or more places, are there any better way to do this?

使用Xamarin.Forms.也许可以使用自定义控制器执行此操作，也可以通过其他方法将标记扩展到stacklayout内，以x:static对其进行引用?

Using Xamarin.Forms. Maybe it is possible to do this with a custom controller or some other way with markup extension to inside a stacklayout do a x:static reference to it?

   <!--#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-->

推荐答案

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

You can create a CustomView and then include that in your Pages.

为了实现这一点，您创建一个YourCustomView.xaml，

In order to Achieve that, you create a a 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中包含它

And, in your Page.xaml you include it

<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.您可以在所需的所有页面中重复使用此功能.

The next step is about Binding the properties that you need, for that, you need to create BindableProperties in your CustomView. You can reuse this in all pages that you want.

这篇关于如何在Xamarin中重用相同的视图? XAML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！