CODEWITHSUNDEEP
c#xamarinuwpxamarin.formsprism
Mustafa Saeed
Mustafa Saeed

Reputation: 93

How to Customize MasterDetailPage Of a xamarin forms app on UWP?

I am building an app using xamaring forms but I cannot Change the Header of the master page in UWP, It works fine on android but not uwp.

Here is a screenshot:

enter image description here

what I want to do is to change the color of the "Menu" bar.

here is the XAML code:

   <MasterDetailPage.Master>
        <ContentPage Title="Menu" BackgroundColor="Red">

            <StackLayout Orientation="Vertical">
                <StackLayout BackgroundColor="#e74c3c" HeightRequest="60">
                    <Label Text="SomeText"
                       FontSize="20"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"
                       HorizontalOptions="Center" />

                </StackLayout>


                <ListView x:Name="NavigationListView"
                  RowHeight="60"
                  SeparatorVisibility="None"
                  BackgroundColor="#e8e8e8"
                  ItemSelected="NavigationListView_ItemSelected">

                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout VerticalOptions="FillAndExpand"
                                     Orientation="Horizontal"
                                     Padding="20,10,0,10"
                                     Spacing="20">

                                    <Image Source="{Binding Icon}"
                                   WidthRequest="40"
                                   HeightRequest="40"
                                   VerticalOptions="Center"/>

                                    <Label Text="{Binding Title}"
                                   FontSize="Medium"
                                   VerticalOptions="Center"
                                   TextColor="Black"/>

                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </ContentPage>
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
    <Views:MainPage />
</MasterDetailPage.Detail>

Upvotes: 1

Views: 1352

Answers (2)

Jack Della
Jack Della

Reputation: 1

For me to get is working, I had to set it in the code-hehind for some reason:

if (Device.RuntimePlatform == Device.UWP) {
    BarBackgroundColor = Colour.LighterGray;
    BarTextColor = Colour.DarkGray;
}

Upvotes: 0

Nico Zhu
Nico Zhu

Reputation: 32775

Actually, the color of the "Menu" bar that your mentioned is BarBackgroundColor. So, you could set BarBackgroundColor for NavigationPage instance. 

<MasterDetailPage.Detail>
  <NavigationPage BarBackgroundColor="PowderBlue">
    <x:Arguments>
      <pages:MasterDetailPageHomeDetail />
    </x:Arguments>
  </NavigationPage>
</MasterDetailPage.Detail>

enter image description here

Upvotes: 2

Related Questions