[Win10 Development] About hamburger menu-SplitView usage, win10-splitview

[Win10 Development] About hamburger menu-SplitView usage, win10-splitview

SplitView (hamburger menu) is a new control added by win10. as its name implies, it actually splits the view into two parts. If you don't talk about it, we will introduce the basic usage of SplitView below.

First, we will introduce several attributes that are frequently used by SplitView. (I moved MSDN directly...

IsPaneOpen	Read/write	Gets or sets a value that specifies whether the SplitView pane is expanded to its full width.
PaneBackground	Read/write	Gets or sets the Brush to apply to the background of the Pane area of the control.
CompactPaneLength	Read/write	Gets or sets the width of the SplitView pane in its compact display mode.
OpenPaneLength	Read/write	Gets or sets the width of the SplitView pane when it's fully expanded.
DisplayMode	Read/write	Gets of sets a value that specifies how the pane and content areas of a SplitView are shown.

 

DisplayMode controls the expansion style of SplitView. It has four values: Overlay, Inline, CompactOverlay, and CompactInline. You can write and view the specific effect. In this example, PC is set to CompactOverlay, and mobile is set to Overlay.

Okay. After the introduction, let's get started. First, let's take a look at the effect of running the demo.

Next, let's take a look at the code layout. We will place the hamburger Button separately outside the SplitView. The following is the layout code of the hamburger Button, here to say, the hamburger icon style adopts the font icon, the font is Segoe MDL2 Assets, more icons please click this link-> http://modernicons.io/segoe-mdl2/cheatsheet/

        <Grid.RowDefinitions>            <RowDefinition Height="Auto"></RowDefinition>            <RowDefinition Height="*"></RowDefinition>        </Grid.RowDefinitions>        <StackPanel Grid.Row="0" Height="40" Background="LightGray" Orientation="Horizontal">            <Button Background="Transparent" BorderThickness="0" VerticalAlignment="Top" Click="Menu_Click">                <Button.Content>                    <TextBlock Text="&#xE700;" FontSize="30" FontFamily="Segoe MDL2 Assets" ></TextBlock>                </Button.Content>            </Button>            <TextBlock Margin="10" VerticalAlignment="Center" FontFamily="40" Text="SplitView Demo"></TextBlock>        </StackPanel>

 

The next step is the SplitView code. Pane is a hidden view, which uses the ListView control and Content is the main view.

<SplitView Grid.Row="1" x:Name="splitView" CompactPaneLength="48" OpenPaneLength="150"                       IsPaneOpen="False" PaneBackground="LightGray" DisplayMode="CompactOverlay">            <SplitView.Pane>                <ListView x:Name="hambLv" IsItemClickEnabled="True" ItemClick="hambLv_ItemClick">                    <ListView.ItemTemplate>                        <DataTemplate>                            <StackPanel Orientation="Horizontal">                                <SymbolIcon Symbol="{Binding Symbol}"/>                                <TextBlock Margin="18" Text="{Binding Text}" />                            </StackPanel>                        </DataTemplate>                    </ListView.ItemTemplate>                </ListView>            </SplitView.Pane>            <SplitView.Content>                <TextBlock x:Name="content" FontSize="30"></TextBlock>            </SplitView.Content>        </SplitView>

 

At this point, the front-end code is complete.

The background code is the expansion and collapse of the SplitView controlled by the hamburger Button.

1         private void Menu_Click(object sender, RoutedEventArgs e)2         {3             splitView.IsPaneOpen = !splitView.IsPaneOpen;4         }

We define a new HambList class for encapsulation.

1     public class HambList2     {3         public string Text { get; set; }4         public Symbol Symbol { get; set; }5     }

 

Then, the ViewItem is generated in the page code and serves as the ListView data source.

1 ObservableCollection <HambList> hambList = new ObservableCollection <HambList> (); // introduce System. collections. objectModel namespace; 2 protected override void OnNavigatedTo (NavigationEventArgs e) 3 {4 hambList. clear (); 5 hambList. add (new HambList {Text = "People", Symbol = Symbol. people}); 6 hambList. add (new HambList {Text = "Phone", Symbol = Symbol. phone}); 7 hambList. add (new HambList {Text = "Message", Symbol = Symbol. message}); 8 hambList. add (new HambList {Text = "Mail", Symbol = Symbol. mail}); 9 base. onNavigatedTo (e); 10}

1 this. hambLv. ItemsSource = hambList; // bind the hambList set to the ListView Control

Next, we will display the Text attribute of each item in the List to the TextBlock control in the Content section.

1         private void hambLv_ItemClick(object sender, ItemClickEventArgs e)2         {3             content.Text = (e.ClickedItem as HambList).Text;4         }

Finally, let's determine the user's device. If it is mobile, set DisplayMode to Overlay.

1             ResourceContext resContext = ResourceContext.GetForCurrentView();2             string value = resContext.QualifierValues["DeviceFamily"];3             if (value == "Mobile")4             {5                 splitView.DisplayMode = SplitViewDisplayMode.Overlay;6             }

Okay. This article introduces SplitView.

Demo download: http://pan.baidu.com/s/1dDqHnvr