1

I am a complete noob to xamarin :)

So was wondering if someone could point me to right resources.

To be short, I want to implement something like this in prism using Xamarin MasterDetailPage.

Using the master detail sample here, the hamburger menu doesn't act as a fly out. 

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
              prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="HelloWorld.Views.MyMasterDetail">

  <MasterDetailPage.Master>
    <ContentPage Title="Default">
      <StackLayout>
        <Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
        <Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewB?id=B" />
        <Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewC?id=C" />
      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>

</MasterDetailPage>

Right now, though there is enough space, it shows something like

(just as a sample, I am not using SplitViewMenu at all)

enter image description here

I need icons/some small text to show initially and on clicking hamburger, it should expand (you know just like the first link/ groove music app behavior). enter image description here

Tips?

Yash
  • 177
  • 2
  • 14

2 Answers2

0

Right now, though there is enough space, it shows something like

In my experience, if you have assigned the Symbol property for SimpleNavMenuItem, the possible reason is you haven't imported the Themes file Generic.xaml under Themes folder enter image description here

This file includes templates, styles for custom controls. For example, for NavMenuItem's template, FontIcon's Glyph property needs to be assigned correctly here:

<DataTemplate x:Key="NavMenuItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="48" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <FontIcon FontSize="16" Glyph="{Binding Path=SymbolAsChar}" VerticalAlignment="Center"
                      HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Path=Label}" />
            <TextBlock Grid.Column="1" Text="{Binding Path=Label}" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

While SimpleNavMenuItem class's SymbolAsChar property is based on Symbol's value:

public sealed class SimpleNavMenuItem : INavigationMenuItem
{
        ......
        public Symbol Symbol { get; set; }
        public char SymbolAsChar => (char) Symbol;
        ......
}

And if you still can make it work, please share a demo:)

Franklin Chen - MSFT
  • 4,845
  • 2
  • 17
  • 28
  • Sorry, looks like I wasn't clear? I am not using SplitViewMenu, I am trying to work using prism with the provided sample there, only reason I include splitviewmenu is for demo, I will edit question to make it more clear. – Yash Jul 14 '16 at 15:24
  • Could you please provide an example on how to use a custom MasterDetailPageRenderer example which uses the native SplitView? If not , hopefully Xamarin will release this control in the next release. – Guy Micciche Nov 17 '16 at 00:26
0

I've sort of been looking for something like this myself since I can't hide the NavigationBar shown in the Master page of the MasterDetailPage when i run it on a Windows 10 Mobile device (I can hide for PC though). So basically, I'm looking into eventually building my own version of the MasterDetailPage.

Since I have not built it yet, I can't tell you exactly how to achieve what you're asking, but I do know that it will require you to either:

  1. Write your own custom renderer for MasterDetailView or,
  2. Write a new control and its renderer

In both cases, your renderer will involve creating and manipulating a new SplitView (which is the native UWP control that your SplitViewMenu example is extending). There's a tutorial for creating the actual UWP control here. If you havent learned about Xamarin's renderers yet, they are the "Translator" and "Interpreter" between a Xamarin.Forms control and a given platform's native control. I suspect Xamarin will eventually rewrite their MastDetailPage renderer for UWP to use a SplitView as a base, but who knows when that will be. Xamarin also has an open source SDK for Xamarin.Forms (as well as the others) on GitHub so you can study the MasterDetailPageRenderer for UWP.

Age
  • 1
  • 1