Win10 control: SplitView and win10 control splitview

Win10 control: SplitView and win10 control splitview

The SplitView control is a new control in win10. it is used to display separated views. A view can be separated into two parts.

Main attributes:

Content: The literal meaning is "Content", that is, the main Content to be displayed on the current page

Pane: this property is similar to a directory and can be hidden, collapsed, and expanded. For example, the left sidebar of the Win10 built-in "Groove music" and "email" applications is Pane.

IsPaneOpen: Boolean value, used to control Pane folding and Expansion

OpenPaneLength: the width of the expanded content in Pane.

CompactPaneLength: the width of the Pane content after being folded

PaneBackground: Specifies the paint brush used to draw the background of the Pane view.

DisplayMode: Set the display mode of the Pane area, which includes the following values. The literal interpretation is not very easy. You can view different effects directly in the demo.

Let's take a look at the Demo running effect: (DisplayMode = CompactInline)

When the Pane panel is hidden:

Pane panel display:

The following describes how to implement this Demo:

I. XAML Section

1. Hamburger and "directory" in the upper left corner ":

<StackPanel Grid. row = "0" Orientation = "Horizontal"> <Button BorderThickness = "0" Grid. row = "1" Background = "Transparent" Click = "togglePaneButton_Click"> <Button. content> <TextBlock Text = "" FontFamily = "Segoe MDL2 Assets" FontSize = "24"/> </Button. content> </Button> <TextBlock Margin = "10, 0, 0, 0" verticalignment = "Center" FontSize = "18" Text = "directory"/> </StackPanel>

2. Implementation of "directory:

In fact, the implementation of Pane is very free. The ListView control is used here:

 <ListView x:Name="listView" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch"ItemClick="listView_ItemClick" IsItemClickEnabled="True" ItemTemplate="{StaticResource listViewItemTemplate}"/>

3. DisplayMode selection:

Here, a ComboBox control is used to allow the user to select DisplayMode. In actual applications, "write dead" is usually used directly.

  <ComboBox x:Name="displayModeCombobox" Grid.Row="2" Width="148" SelectedIndex="0" SelectionChanged="displayModeCombobox_SelectionChanged" VerticalAlignment="Center" Header="DisplayMode">                        <ComboBoxItem>CompactInline</ComboBoxItem>                        <ComboBoxItem>CompactOverlay</ComboBoxItem>                        <ComboBoxItem>Overlay</ComboBoxItem>                        <ComboBoxItem>Inline</ComboBoxItem>        </ComboBox>

4. "Settings" in the lower left corner"

<StackPanel Orientation = "Horizontal" Grid. row = "3" Margin = ","> <SymbolIcon Symbol = "Setting"/> <TextBlock Text = "set" Margin = "24, 0, 0, 0 "VerticalAlignment =" Center "/> </StackPanel>

5. Content implementation:

In fact, <SplitView. Content>... </SplitView. Content> nodes can be omitted, and Content can be omitted between SplitView nodes. Here is a simple display of Content using the Grid control:

<Grid> <Grid. rowDefinitions> <RowDefinition Height = "Auto"/> <RowDefinition Height = "*"/> </Grid. rowDefinitions> <TextBlock Text = "content" Margin = ", 0," Style = "{StaticResource BaseTextBlockStyle}"/> <TextBlock x: Name = "content" Grid. row = "1" Margin = "12, 12, 0, 0" Style = "{StaticResource BodyTextBlockStyle}"/> </Grid>

The XAML section of the layout has been completed. The code behind section is described below:

Ii. Part C #

1. content:

       private ObservableCollection<NavLink> navLinks = new ObservableCollection<NavLink>()        {            new NavLink() { Label = "People", Symbol =  Symbol.People  },            new NavLink() { Label = "Globe", Symbol = Symbol.Globe },            new NavLink() { Label = "Message", Symbol = Symbol.Message },            new NavLink() { Label = "Mail", Symbol = Symbol.Mail },            new NavLink() { Label = "CellPhone", Symbol = Symbol.CellPhone },        };

NavLink is a custom class.

2. Bind the Pane data source to the OnNavigatedTo event:

listView.ItemsSource = navLinks;

3. Change DisplayMode after selecting ComboBox:

splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse(typeof(SplitViewDisplayMode), (e.AddedItems[0] as ComboBoxItem).Content.ToString());

4. Click the Hamburg event to switch the Pane display:

 splitView.IsPaneOpen = !splitView.IsPaneOpen;

5. When you click an item, the following Content is displayed:

content.Text = (e.ClickedItem as NavLink).Label;

Note: When DisplayMode = Inline or DisplayMode = Overlay, the Pane panel is blocked by Content and changed to "invisible ".