Data display controls in Windows Phone 8.1 Cornerstone------ItemsControl

In Windows Phone 8.1, the data shows interactive controls that are Flipview,listview,gridview and so on, but we don't always write directly when we use them.

<FlipView/>,<ListView/>,<GridView/> the like to use it, although this can be, but this shows the picture is very difficult to see, which

Users will be happy to see it, anyway, I am not happy to see.

Here the problem comes, not only the data can be bound in place, the function is in place, the interface must also beautify it.

Okay, get to the point:

Who is the cornerstone of these data-rendering controls? Of course it's ItemsControl.

In other words, like Flipview,listview, these controls are inherited by ItemsControl. So in this transparent understanding of the next ItemsControl control, learn

How to customize the ItemsControl control, to beautify it, then inherit from its Flipview,listview and other controls will know how to set the

The difference between ItemsControl and other data display controls:

There is no built-in ScrollViewer control in A.itemscontrol, so this results in some of the data in the first ItemsControl in the following example not showing

Out (of course to show it, add a ScrollViewer control so you can swipe to see all the data in the ItemsControl)

B.flipview,listview, such as data display control, the visual structure of the tree are encapsulated ScrollViewer, in short, in these controls regardless of you add more

Less, you can swipe up and down to see without additional scrollviewer.

(This also lays out the need for the automatic loading of the listbox control sliding to the bottom of the data)

Well, start talking about ItemsControl, and remember the following points:

A.itemscontrol.template Customizing the style of the ItemsControl control

Where to use Itemspresenter to present ItemsControl items (not item)

Structure of concrete expression: itemscontrol=>itemscontrol.template=>controltemplate

B.itemscontrol.itemcontainerstyle used to modify or set the style of the ItemsControl item (not items)

Structure of concrete expression: Itemscontrol=>itemscontrol.itemcontainerstyle=>style=><setter property= "" value= ">

C. The following two to render the data, the former is directly added in ItemsControl, the latter by customizing the sub-data template to add data to ItemsControl

(typically custom data template DataTemplate, then bind data in the background)

Mode one: Itemscontrol.items

Mode two: Itemscontrol.itemtemplate

Structure of common manifestations: itemscontrol=>itemscontrol.itemtemplate=>datatemplate

Finally can put the code: (This way I did not write the background binding data to render, because and directly write data are similar)

<page x:class= "Testunion.itemscontroldemo" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" x mlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:testunion" xmlns:d= "http// schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "background=" {ThemeResource Applicationpagebackgroundthemebrush} "> <Grid> & lt;! ---Customize the style of the ItemsControl control,--> <!--where you use Itemspresenter to render ItemsControl items (not Item)-<!--itemscontr Ol. Template--> <!--concrete structure: itemscontrol=>itemscontrol.template=>controltemplate--<!--this It is used to modify or set the style of the ItemsControl item (not items)--<!--itemscontrol.itemcontainerstyle--> <!--The structure of the specific expression                : Itemscontrol=>itemscontrol.itemcontainerstyle=>style=><setter property= "" value= "" >- <!--the following two to present the data, the former is added directly in the ItemsControl;Add data to ItemsControl by customizing the sub-data template (typically a custom data template DataTemplate, then binding the data back)-<!--itemscontrol.items--> <!--I                 Temscontrol.itemtemplate--> <!--Common performance structure: itemscontrol=>itemscontrol.itemtemplate=>datatemplate--         <!--Listbox,combobox,flipview,gridview,listview not only indirectly inherited the ItemsControl, but also these controls are encapsulated within the visual structure of the tree scrollviewer--> <StackPanel> <ItemsControl> <ItemsControl.Items> &L T Rectangle width= "" "height=" fill= "Green"/> <ellipse width= "" "height=" "" Fill= "Blue"/&                    Gt <border width= "height=", "borderthickness=", "cornerradius=" > <border.borderbru sh> <imagebrush imagesource= "Assets/boy2.png"/> </border.bor Derbrush> </Border> <!--The following red rectangle are not shown in ItemsControl, the solution to see this example of the second ITEMscontrol (add ScrollViewer to ItemsControl)--<rectangle width= "" "height=" fill= "Red"/> </ItemsControl.Items> <ItemsControl.Template> <controltemplat E targettype= "ItemsControl" > <border borderbrush= "Orange" borderthickness= "5" width= "Hei"                            ght= > <!--itemspresenter to present ItemsControl items (not item)--                <itemspresenter/> </Border> </ControlTemplate>                </ItemsControl.Template> </ItemsControl> <itemscontrol margin= "0 0 0" >                    <ItemsControl.Items> <rectangle width= "height=" fill= "Green"/> <ellipse width= "" "height=" fill= "Blue"/> <border width= "the" height= "Bo" Rderthickness= "Corne"rradius= "> <Border.BorderBrush> <imagebrush imagesource="                    Assets/boy2.png "/> </Border.BorderBrush> </Border> <!--The following red Rectangle can be displayed by sliding in ItemsControl because it has a ScrollViewer control in its template and <rectangle width=                "Height=" "fill=" "Red"/> <rectangle width= "[]" "height=" fill= "Red"/> </ItemsControl.Items> <ItemsControl.Template> <controltemplate Targetty Pe= "ItemsControl" > <border borderbrush= "Orange" borderthickness= "5" width= "height=" 3 > <ScrollViewer> <!--itemspresenter to present ite Mscontrol items (not item)--<itemspresenter/> &    Lt;/scrollviewer>                        </Border> </ControlTemplate> </itemscontrol.templ ate> </ItemsControl> </StackPanel> </Grid></Page>

Run:

Initial interface:

The second scroll below a ItemsControl (above a itemcontrol can't roll, because each ScrollViewer)

This way, I also deliberately intercepted the ScrollViewer right scroll bar:

Well, you can try it yourself and play your own custom.

Natsumi Sato におもしろい

Data display controls in Windows Phone 8.1 Cornerstone------ItemsControl