How to set Background image in MasterDetailPage menu without RelativeLayout and AbsoluteLayout . I also tried with Grid and AbsoluteLayout but it's not working. any solution for this problem?
BackgroundImageSource="background.png"
is also not working.
My Xaml:
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="White"
Icon="hamburger.png">
<StackLayout Orientation="Vertical" >
<StackLayout x:Name="navigationDrawerList"
VerticalOptions="Fill">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="20,0,0,0"
Spacing="20">
<Label Text="{Binding Title}"
FontSize="Medium"
VerticalOptions="Center"
TextColor="Gray" />
</StackLayout>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="50,2,0,2"
Spacing="20">
<Label Text="About Us"
FontSize="Medium"
VerticalOptions="Center"
TextColor="Gray" />
</StackLayout>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Horizontal"
Padding="50,2,0,2"
Spacing="20">
<Label Text="FAQ"
FontSize="Medium"
VerticalOptions="Center"
TextColor="Gray" />
</StackLayout>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
If you wrap your MasterDetailPage content inside a nested Grid, the Image and the Content will overlap eachother, creating the Backgound effect you are looking for
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="White"
Icon="hamburger.png">
<Grid>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="background.png" Aspect="AspectFill"></Image>
</Grid>
<Grid>
//Your MasterDetailPage content
</Grid>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
Try this out, you have to set your background color as transparent to set a background image. The trick worked for me, hope it works for you as well
<MasterDetailPage.Master>
<ContentPage Title="Menu"
BackgroundColor="Transparent"
BackgroundImage="hamburger.png">
//Your xaml
</ContentPage>
</MasterDetailPage.Master>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.