question

sunco avatar image
0 Votes"
sunco asked sunco commented

FlyoutItem, Tab and border

Following the Hello world example, I deleted the Sidebar and change it to a Sidebar with BottomBar

You can do that with something like this

 <FlyoutItem>
     <Tab Icon="icon1.png">
         <ShellContent Route="Page1" ContentTemplate="{DataTemplate local:Page1}" />
     </Tab>
     <Tab Icon="icons2.png">
         <ShellContent Route="Page2" ContentTemplate="{DataTemplate local:Page1}" />
     </Tab>
     <Tab Icon="icons3.png">
         <ShellContent Route="Page3" ContentTemplate="{DataTemplate local:Page1}" />
     </Tab>
     <Tab Icon="icon4.png">
         <ShellContent Route="Page4" ContentTemplate="{DataTemplate local:Page1}" />
     </Tab>
 </FlyoutItem>
    
 <FlyoutItem Title="Page5">
     <ShellContent Route="Page1" ContentTemplate="{DataTemplate local:Page5}" />
 </FlyoutItem>
 <FlyoutItem Title="Page6">
     <ShellContent Route="Page6" ContentTemplate="{DataTemplate local:Page6}" />
 </FlyoutItem>


The first Flyout item act as BottomBar and the others acts as items in a Sidebar

I want to put a border on the top of the BottomBar (because the BackGroundColor is White)

Searched a lot but can't figure how to do that.. just as the red line in the attached screenshot

99685-image.png


dotnet-xamarin
image.png (17.6 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I want to put a border on the top of the BottomBar (because the BackGroundColor is White)

To add border to the bottom bar, we need to create custom shell renderer to achieve the function on each platform. But if you just want to handle the white background, you could just specify the color via the Shell.TabBarBackgroundColor property in the AppShell.xaml.

Check the code:

<Shell ...>
    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                ...
                <Setter Property="Shell.TabBarBackgroundColor" Value="LightBlue" />
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
    </Shell.Resources>

    <FlyoutItem Title="About" Icon="icon_about.png">
        ...
    </FlyoutItem>
</Shell>
0 Votes 0 ·

My bad, I want that line 😬 @JarvanZhang-MSFT

0 Votes 0 ·

1 Answer

JarvanZhang-MSFT avatar image
1 Vote"
JarvanZhang-MSFT answered sunco commented

Hello,​

Welcome to our Microsoft Q&A platform!

just as the red line in the attached screenshot

To add the red line above the tabbar, you could add the line at the bottom of the child pages. Try to create a control template to define the style for these pages, then consume the template for the child pages.

Define the template in App.xaml.

<Application ...>
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="pageTemplate">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <ContentPresenter Grid.Row="0" />
                    <BoxView HorizontalOptions="FillAndExpand" HeightRequest="3" Color="Red" VerticalOptions="EndAndExpand" Grid.Row="1"/>
                </Grid>
            </ControlTemplate>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Consume the template for the pages.

<ContentPage ...
    ControlTemplate="{StaticResource pageTemplate}">
    ...
</ContentPage>


Best Regards,

Jarvan Zhang



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks man, I appreciate. Very important to add it on App.xaml as you noted and not in the AppShell.xaml

Would be nice too add a link to the documentation, so people/me can learn even more 😃

0 Votes 0 ·