"Win 10 App development" Splitview controls

The Splitview control is used to render a partitioned view, simply by splitting a view into two parts, the content property representing the primary view, and the view of the pane property setting to be hidden, collapsed, and expanded.

Estimate the text is not easy to introduce this control, or use examples to illustrate it, Old week life favorite example, the most BS boring theory.

Look at the XAML code first:

        <SplitViewx:name= "SplitView"Openpanelength= "Max"Compactpanelength= "$"Panebackground= "Lightgray"DisplayMode= "Compactoverlay">            <ImageStretch= "Uniform"Source="{Binding Elementname=lvprev,path=selecteditem.uri}"/>            <Splitview.pane>                <Grid>                    <grid.rowdefinitions>                        <RowDefinitionHeight= "Auto"/>                        <RowDefinitionHeight="*"/>                    </grid.rowdefinitions>                    <StackPanelGrid.Row= "0"Orientation= "Horizontal">                        <Buttonborderthickness= "0"Grid.Row= "1"Background= "Transparent"Click= "OnClick">                            <button.content>                                <TextBlockText= "& #xE700;"FontFamily= "Segoe MDL2 Assets"FontSize= "+" />                            </button.content>                        </Button>                        <TextBlockMargin= "10,0,0,0"VerticalAlignment= "Center"FontSize= "+"Text= "Select Image"/>                    </StackPanel>                    <ListViewx:name= "Lvprev"Grid.Row= "1">                        <listview.itemtemplate>                            <DataTemplate>                                <Grid>                                    <grid.columndefinitions>                                        <ColumnDefinitionWidth= "Auto"/>                                        <ColumnDefinition/>                                    </grid.columndefinitions>                                    <ImageWidth= " the"Height= " the"Stretch= "Uniform">                                        <Image.source>                                            <BitmapImageUriSource="{Binding Uri}"Decodepixelwidth= " the"/>                                        </Image.source>                                    </Image>                                    <TextBlockGrid.column= "1"Text="{Binding Text}"VerticalAlignment= "Center"Margin= "15,0,0,0"/>                                </Grid>                            </DataTemplate>                        </listview.itemtemplate>                    </ListView>                </Grid>            </Splitview.pane>        </SplitView>

Although the code is long, it is not complicated. Because the content property of SplitView is declared as a contents tag, <SplitView.Content>.....</SplitView.Content> this layer node can be omitted, so you understand that The machine is written directly between the start and end tags of the splitview, which is the contents of the Content property.
In the example above, the main content of the Splitview control is an image control, and later I let it display the image, and as for which image to display, it is determined by the SelectedItem of the ListView control. So just bind the Image.source with the SelectedItem property.

Items in ListView I have defined a class that is specifically designed for encapsulation:

    Class ViewItem    {        setset;}}   

Text is the name of an image, the URI is the image address, in order to green, to use the picture I put in the project, local reference faster.

It then generates a batch of ViewItem in the page code and serves as the data source for the ListView.

Observablecollection<viewitem> M_items =NULL; .........
M_items = new observablecollection<viewitem> ();
This.lvPrev.ItemsSource = M_items;
... .........protected Override voidonnavigatedto (NavigationEventArgs e) {m_items.            Clear (); //Add Item ListM_items. ADD (NewViewItem {Text ="Snowflakes", Uri =NewUri ("ms-appx:///assets/images/1.jpg") }); M_items. ADD (NewViewItem {Text ="Kite", Uri =NewUri ("ms-appx:///assets/images/2.jpg") }); M_items. ADD (NewViewItem {Text ="Walnut", Uri =NewUri ("ms-appx:///assets/images/3.jpg") }); M_items. ADD (NewViewItem {Text ="Creek", Uri =NewUri ("ms-appx:///assets/images/4.jpg") }); M_items. ADD (NewViewItem {Text ="Populus euphratica", Uri =NewUri ("ms-appx:///assets/images/5.jpg") }); M_items. ADD (NewViewItem {Text ="Red Plum", Uri =NewUri ("ms-appx:///assets/images/6.jpg") }); }

So, as soon as you select an image in the ListView, it will appear in the image. However, the ListView should not be the primary view, so put it in the splitview.pane so it can be folded.

The following points back to the Splitview control.

        <x:name= "SplitView"  openpanelength= "Max"  Compactpanelength= "  panebackground"= "Lightgray"  displaymode = "Compactoverlay" >                 ...

Openpanelength: The width of the content in pane when it is expanded.

Compactpanelength: The width after which the contents of the pane are folded.

Panebackground: Sets the paint brush that draws the background of the pane view.

DisplayMode: Sets how the pane area is displayed, mainly with the following values.

inline: Inline is the content in pane and content is on one layer, and when pane expands, the width of the content shrinks. such as this:

Overlay: Indicates that the content of pane is covered by content. The pane content at this point is like a pop-up layer. Also, when you click on a different view area, the contents of the pane are hidden. Like what:

compactinline: The pane content is on the same layer as the contents content, but the pane content is collapsed, and the collapsed width is set by the Compactpanelength property. such as this:

compactoverlay: Pane content is collapsed and floats on content, meaning that they are not on the same layer, and clicking elsewhere will make pane hidden.

There is also a button on the sample interface that you can click to toggle the status of Splitview.

        Private void OnClick (object  sender, Windows.UI.Xaml.RoutedEventArgs e)        {            this. Splitview.ispaneopen =!  This . Splitview.ispaneopen;        }

Ispaneopen is true, pane content expands; otherwise pane content is collapsed.

The results of the sample run are as follows:

Well, this article simply introduces the new Splitview controls in the WIN10 application.

Sample Download: Http://files.cnblogs.com/files/tcjiaan/MyApp.zip

"Win 10 App development" Splitview controls