Как повторно использовать одно и то же представление в Xamarin? XAML

Итак, у меня есть этот код, который мне нужно повторно использовать более или менее на всех моих страницах, но я немного устал менять одну страницу и делать то же самое в 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-->

Вы можете создать свой собственный пользовательский элемент управления для этих представлений и просто использовать его на своих страницах. Вот неплохой пример

— 12.07.2018 15:36

Сладкий! Это именно то, что я ищу, если бы я хотел, например, не включать одну из «кнопок изображения» стека, как бы я это сделал? Например, в представлении входа в систему или, может быть, вместо клиента, использующего приложение, это администратор, у которого должна быть дополнительная кнопка, видимая только ему?

— 12.07.2018 15:40

Вы можете добавить связываемое свойство, который показывает и скрывает кнопку или даже добавляет или удаляет представления для вашего элемента управления.

— 12.07.2018 16:41

xaml xamarin xamarin.forms

12.07.2018 15:28

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

2 456

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Следующим шагом является привязка необходимых вам свойств, для этого вам необходимо создать BindableProperties в вашем CustomView. Вы можете повторно использовать это на всех страницах, которые захотите.

Это не повторное использование, оно по своей сути создает новые объекты пользовательского интерфейса для каждой страницы, использующей его. Будет очень медленно

— 13.06.2021 06:53

12.07.2018 15:41