[Simple introduction to Windows 10] split-screen control (SplitView)

[Simple introduction to Windows 10] split-screen control (SplitView)
4.18 split-screen control (SplitView)

The split-screen control (SplitView) is a new control type added to Windows 10 and is also an interactive control promoted by Windows 10 general applications. It is usually presented with a hamburger button as a drawer menu. The control's XAML syntax is as follows:

<SplitView>

<SplitView. Pane>

...... Menu panel content

</SplitView. Pane>

...... Subject content

</SplitView>

The SplitView control consists of two parts: the menu panel and the main content. The menu panel is assigned a value through the Pane attribute, the IsPaneOpen attribute is used to control the Opening and Closing statuses. true indicates opening, and false indicates closing. When the menu is closed, the main Content of SplitView is displayed on the page. The topic Content is the Content attribute, and the simple XAML syntax can be directly written in the SplitView node.

The following is an example of the SplitView control: Implementing the hamburger menu.

Code list 4-18:SplitView control (source code: Chapter 4th \ Examples_4_18)

MainPage. the main code of the xaml file is Grid <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ToggleButton Click = "Button_Click" verticalignment = "Top" Foreground = "Green"> <tog. content> <Border Background = "Transparent" Width = "40" Height = "40"> <FontIcon x: name = "Hamburger" FontFamily = "Segoe MDL2 Assets" Glyph = "& # xE700;"/> </Border> </ToggleButton. content> </ToggleButton> <SplitView x: Name = "Splitter" IsPaneOpen = "True"> <SplitView. pane> <StackPanel VerticalAlignment = "Center"> <Button Content = "menu 1" Click = "Button_Click_1"> </Button> <Button Content = "menu 2" Click = "Button_Click_1 "> </Button> <Button Content =" menu 3 "Click =" Button_Click_1 "> </Button> <Button Content =" menu 4 "Click =" Button_Click_1 "> </ button> </StackPanel> </SplitView. pane> <Grid> <TextBlock x: name = "tb" Text = "" verticalignment = "Center" HorizontalAlignment = "Center"> </TextBlock> </Grid> </SplitView> </Grid>

MainPage. xaml. cs file main code handler // hamburger icon button event processing private void Button_Click (object sender, RoutedEventArgs e) {Splitter. IsPaneOpen = (Splitter. IsPaneOpen = true )? False: true;} // handle private void Button_Click_1 (object sender, RoutedEventArgs e) {Splitter. isPaneOpen = false; tb. text = "hello" + (sender as Button ). content. toString ();}

This article comes from the introduction of Windows 10 universal application development

Source code download: http://vdisk.weibo.com/u/2186322691

Directory: http://www.cnblogs.com/linzheng/p/5021428.html

Welcome to my weibo @ WP Lin Zheng public account: wp Development (No.: wpkaifa)

Windows 10/WP technology exchange group: 284783431