Question

I want to customize top bar of Xamarin forms like following i want to add some of menus search-bar and profile icon with drop down

I am trying to achieve this with flyoutpage control.

Please help me to achieve the result first

Answer 1

You can try to use NavigationPage.TitleView to achieve this. Remember to remove the Title of the ContentPage.

Please refer to the following code:

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                   x:Class="FlyoutPageNavigation.ContactsPage"
                  >

    <NavigationPage.TitleView >
        <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand" MinimumWidthRequest="200">
            <Label Text="test"  Margin="10,0,10,0"></Label>
            <SearchBar Text="please input key words" BackgroundColor="Yellow" HorizontalOptions="FillAndExpand"    ></SearchBar>
        </StackLayout>
    </NavigationPage.TitleView>
      <ContentPage.Content>
            <StackLayout>
                  <Label Text="Contacts data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
            </StackLayout>
      </ContentPage.Content>
</ContentPage>

Update:

i want the common titleview for all. It will take a while for me to do for all pages.

You can create common contentview for all the pages.

1.create a ContentView (CustomTitleView)

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlyoutPageNavigation.CustomTitleView">
  <ContentView.Content>
        <StackLayout Orientation="Horizontal"  HorizontalOptions="FillAndExpand"  VerticalOptions="CenterAndExpand" MinimumWidthRequest="200">
            <Label Text="custom contentview"   Margin="10,0,10,0"></Label>
            <SearchBar Text=" key words" BackgroundColor="Yellow" HorizontalOptions="FillAndExpand"    ></SearchBar>
        </StackLayout>
    </ContentView.Content>
</ContentView>

2.add this CustomTitleView to Application.Resources of file App.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:flyoutpagenavigation="clr-namespace:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.App">
    <Application.Resources>
        <flyoutpagenavigation:CustomTitleView x:Key="CustomTitleView"/>

        <Style TargetType="ContentPage" x:Key="CustomPage">
            <Setter Property="NavigationPage.TitleView" Value="{StaticResource CustomTitleView}"/>
        </Style>

    </Application.Resources>
</Application>

3.add Style="{StaticResource CustomPage}" to all pages:

For example:

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                   x:Class="FlyoutPageNavigation.ContactsPage"
             
                 Style="{StaticResource CustomPage}"
                  >

    <ContentPage.Content>
            <StackLayout>
                  <Label Text="Hi" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
            </StackLayout>
      </ContentPage.Content>
</ContentPage>

友情链接