Пользовательский TabbedPage с кнопками - PullRequest
Новая
       53

Пользовательский TabbedPage с кнопками

1 голос
/ 28 мая 2019

Мне нужно создать навигацию с помощью TabbedPage и добавить 2 кнопки (иконки) для выполнения других действий в моем приложении, аналогично изображению ниже: enter image description here

Втест, который я сделал, я получил результат ниже, но я не знаю, как сохранить вкладки на том же уровне, что и значки.enter image description here

MainPage.xaml 

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
        <local:TodayPage />

        <TabbedPage.ToolbarItems>
            <ToolbarItem Name="MenuItem1" Order="Primary" Icon="icon.png" Text="Item 1" Priority="0" />
            <ToolbarItem Name="MenuItem2" Order="Primary" Icon="icon.png" Text="Item 2" Priority="1" />
        </TabbedPage.ToolbarItems>

        <NavigationPage Title="Schedule" Icon="schedule.png">
            <x:Arguments>
                <local:SchedulePage />
            </x:Arguments>
        </NavigationPage>
        <local:SettingsPage />

    </TabbedPage>

1 Ответ

1 голос
/ 29 мая 2019

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

https://github.com/roubachof/Sharpnado.Presentation.Forms

Пост, объясняющий компонент, можно найти здесь:

https://www.sharpnado.com/pure-xamarin-forms-tabs/

Это реализовано с помощью сетки, так что вы можете полностью реализовать свой дизайн с помощью чего-то вроде: 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50 />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>


    <tabs:TabHostView Grid.Row="0"
                      Grid.Column="0"
                      SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
        <tabs:BottomTabItem 
            IconImageSource="flash.png" 
            SelectedTabColor="{StaticResource White}" 
            UnselectedLabelColor="{StaticResource White}" 
            UnselectedIconColor="{StaticResource White}"
            Label="Tab 1" />
        <tabs:BottomTabItem 
            IconImageSource="flash.png" 
            SelectedTabColor="{StaticResource White}" 
            UnselectedLabelColor="{StaticResource White}" 
            UnselectedIconColor="{StaticResource White}"
            Label="Tab 2" />
    </tabs:TabHostView>
    <ImageButton Grid.Column="1" ImageSource="hamburger.png" />
    <ImageButton Grid.Column="2" ImageSource="icon.png" />

    <ScrollView Grid.Row="1" Grid.ColumnSpan="3">
        <tabs:ViewSwitcher x:Name="Switcher"
                           Animate="True"
                           SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
            <details:Tab1View Animate="True" BindingContext="{Binding Tab1ViewModel}" />
            <details:Tab2View Animate="True" BindingContext="{Binding Tab2ViewModel}" />
        </tabs:ViewSwitcher>
    </ScrollView>

</Grid>
...