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

时间:2018-07-12 13:28:37

标签: xaml xamarin xamarin.forms

所以我得到了这段代码,需要在几乎所有页面上重复使用,但是我有点厌倦了更改一页并不得不在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-->

1 个答案:

答案 0 :(得分:6)

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