Navigation with a Center Button Using MAUI TabView

This sample demonstrates how to implement navigation with a center button using the MAUI TabView control in a .NET MAUI application.

Sample

    <Grid x:Name="mainGrid">
        <tabView:SfTabView x:Name="TabView" TabBarPlacement="Bottom"
                           IsCenterButtonEnabled="True" CenterButtonTapped="TabViewCenterButtonTapped">

            <!-- Center Button Customization-->

            <!--Tab 1-->
            <tabView:SfTabItem ImageSize="28">
                <tabView:SfTabItem.ImageSource>
                    <FontImageSource x:Name="TabImage1" Glyph="&#xe738;" Color="#6750A4" 
                                 FontFamily="MauiSampleFontIcon"/>
                </tabView:SfTabItem.ImageSource>

                <CollectionView x:Name="CollectionView1" ItemsSource="{Binding PrimaryListSource}">
                    <!--Item Template>
                </CollectionView>
            </tabView:SfTabItem>

            <!--Tab 2-->
            <tabView:SfTabItem ImageSize="28">
                <tabView:SfTabItem.ImageSource>
                    <FontImageSource x:Name="TabImage2" Glyph="&#xe75c;" Color="#6750A4"
                                 FontFamily="MauiSampleFontIcon"/>
                </tabView:SfTabItem.ImageSource>

                <CollectionView x:Name="CollectionView2" ItemsSource="{Binding SecondaryListSource}">
                    <!--Item Template>
                </CollectionView>
            </tabView:SfTabItem>

            <!--Tab 3-->
            <tabView:SfTabItem ImageSize="25">
                <tabView:SfTabItem.ImageSource>
                    <FontImageSource x:Name="TabImage3" Glyph="&#xe777;" Color="#6750A4"
                                 FontFamily="MauiSampleFontIcon"/>
                </tabView:SfTabItem.ImageSource>

                <CollectionView x:Name="CollectionView3" ItemsSource="{Binding ThirdListSource}">
                    <!--Item Template>
                </CollectionView>
            </tabView:SfTabItem>

            <!--Tab 4-->
            <tabView:SfTabItem ImageSize="28">
                <tabView:SfTabItem.ImageSource>
                    <FontImageSource x:Name="TabImage4" Glyph="&#xe760;" Color="#6750A4" 
                                     FontFamily="MauiSampleFontIcon"/>
                </tabView:SfTabItem.ImageSource>

                <VerticalStackLayout Margin="2">
                    <Grid RowDefinitions="*,*">
                        <Grid Grid.Row="0" RowDefinitions="*,3*,*" RowSpacing="20" BackgroundColor="#57c4ec">
                            <Image Grid.Row="1" Source="john.png" HeightRequest="150" WidthRequest="150"/>
                            <Label x:Name="name" Grid.Row="2" Text="John Steinbeck" FontAttributes="Bold" 
                               TextColor="White" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
                        </Grid>

                        <VerticalStackLayout Grid.Row="1" Margin="0,20,0,0" Spacing="5" BackgroundColor="White">
                            <HorizontalStackLayout Margin="30,0,0,0">
                                <Image x:Name="mail_Image">
                                    <Image.Source>
                                        <FontImageSource Glyph="&#xe75c;" FontFamily="MauiSampleFontIcon" 
                                                         Color="#5772e6"/>
                                    </Image.Source>
                                </Image>
                                <Label Margin="20,0,0,0" Grid.Row="0" Grid.Column="2" Text="[email protected]"
                                   FontSize="15" FontAttributes="Bold" VerticalTextAlignment="Center" />
                            </HorizontalStackLayout>
                            <HorizontalStackLayout Margin="30,0,0,0">
                                <Image>
                                    <Image.Source>
                                        <FontImageSource Glyph="&#xe763;" FontFamily="MauiSampleFontIcon" 
                                                         Color="#5772e6"/>
                                    </Image.Source>
                                </Image>
                                <Label Margin="20,0,0,0" Text="XXX-XXX-XXX-XX" FontSize="15" FontAttributes="Bold" 
                                   VerticalTextAlignment="Center"/>
                            </HorizontalStackLayout>
                        </VerticalStackLayout>
                    </Grid>
                </VerticalStackLayout>
            </tabView:SfTabItem>

        </tabView:SfTabView>

        <Grid x:Name="ComposeDialog" IsVisible="False">
            <Grid Opacity="0.5" BackgroundColor="Black"/>

            <VerticalStackLayout Margin="25,50" BackgroundColor="White">

                <Grid ColumnDefinitions="7*,*">
                    <BoxView x:Name="boxView" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="40" 
                             BackgroundColor="#1E90FF"/>
                    <Label Grid.Column="0" Text="Compose" TextColor="White" Margin="10,0,0,0"  
                           HorizontalTextAlignment="Start" VerticalOptions="Center"/>
                    <Image Grid.Column="1" Source="close.png" BackgroundColor="White" 
                           HeightRequest="30" WidthRequest="30" 
                   HorizontalOptions="End" VerticalOptions="Center" Margin="0,0,10,0">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="ExitButtonClicked"/>
                        </Image.GestureRecognizers>
                    </Image>
                </Grid>
                <VerticalStackLayout Margin="10,10,10,0" >
                    <VerticalStackLayout>
                        <HorizontalStackLayout Spacing="18">
                            <Label Text="To" TextColor="Gray" HorizontalTextAlignment="Center" 
                                   VerticalTextAlignment="Center"/>
                            <textInputLayout:SfTextInputLayout WidthRequest="200" InputViewPadding="10,0,0,0">
                                <Entry Text="[email protected]" FontSize="14" MinimumHeightRequest="25" 
                               VerticalOptions="Start" FontAttributes="Bold"/>
                            </textInputLayout:SfTextInputLayout>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>

                    <VerticalStackLayout>
                        <HorizontalStackLayout Spacing="10">
                            <Label Text="Sub" TextColor="Gray" HorizontalTextAlignment="Center" 
                                   VerticalTextAlignment="Center"/>
                            <textInputLayout:SfTextInputLayout WidthRequest="200" InputViewPadding="10,0,0,0">
                                <Entry Text="" MinimumHeightRequest="25" VerticalOptions="Start" 
                                       FontSize="14" FontAttributes="Bold"/>
                            </textInputLayout:SfTextInputLayout>
                        </HorizontalStackLayout>
                    </VerticalStackLayout>

                    <textInputLayout:SfTextInputLayout HeightRequest="250">
                        <Editor FontSize="14" Text=" "/>
                    </textInputLayout:SfTextInputLayout>
                </VerticalStackLayout>

                <Button Text="Send" Background="#1E90FF" Clicked="ButtonClicked" 
                        Margin="0,10,10,0" HorizontalOptions="End" 
                        VerticalOptions="End" WidthRequest="70"/>
            </VerticalStackLayout>
        </Grid>
    </Grid>

Requirements to run the demo

To run the demo, refer to System Requirements for .NET MAUI

Troubleshooting:

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.