Windows Phone development Notebook-WINRT custom round ItemsControl

Here ItemsControl refers to the collection control in XAML, including Listview,gridview, and so on, this blog mainly refer to an article of MSDN blog, the specific source is:http://blogs.msdn.com/b/mim/ Archive/2013/04/16/winrt-create-a-custom-itemspanel-for-an-itemscontrol.aspx, and also made some modifications and adaptations to the Windows Phone.

First of all, the normal Gridview, and the ListView style I will not be listed here, today we focus on how to achieve a circular layout of the Listview/gridview.

Custom Circular ItemsControl

Windows Phone 8.1 W indows

The item I filled here is just a simple image, but it doesn't prevent it from being implemented, so the layout is a great way to create a more amazing interaction experience.

At the same time, as the original text said here to provide the source code only to achieve the basic layout, did not provide more animation, gestures, interaction and other functions, we can fill their own.

To implement a custom layout, we need to customize the Itemspanel to replace the ItemsControl template, and our custom Itemspanel must inherit from the Panel class.

Below we need to rewrite the following two methods:

1. MeasureOverride: Use the MeasureOverride method to report the amount of space you need
2. Arrangeoverride: Use the Arrangeoverride method to actually layout the item in your Itemspanel

//circleitemspanel.cs
UsingSystem;usingwindows.foundation;usingWindows.UI.Xaml.Controls;usingWindows.UI.Xaml.Media;usingWindows.UI.Xaml;namespacecustomitemspanel{ Public classCircleitemspanel:P Anel { Public DoubleRadius {Get {                return(Double) GetValue (Radiusproperty); }            Set{SetValue (radiusproperty, value); } }         Public Static ReadOnlyDependencyProperty Radiusproperty =Dependencyproperty.register ("Radius",typeof(Double),typeof(Circleitemspanel),NewPropertyMetadata (100d,radiuscallback)); Private Static voidRadiuscallback (DependencyObject D, DependencyPropertyChangedEventArgs e) {varRadialpanel =(Circleitemspanel) D;        Radialpanel.invalidatearrange (); }        protected Overridesize measureoverride (size availablesize) {vars=Base.            MeasureOverride (availablesize); foreach(varElementinch  This. Children) {element.            Measure (availablesize); }            returns; }        protected Overridesize arrangeoverride (size finalsize) { This. Clip =NewRectangleGeometry {rect=NewRect (0,0, Finalsize.width,finalsize.height)}; vari =0; varDegreesoffset =360.0/ This.            Children.Count; foreach(varElemetinch  This. Children) {varCenterX = Elemet. Desiredsize.width/2.0; varCenterY = Elemet. Desiredsize.height/2.0; varDegreesangle = Degreesoffset * i++; varTransform =NewRotateTransform {centerx=centerx,centery=centery,angle=Degreesangle}; Elemet. RenderTransform=transform; varRadianangle = (Math.PI * degreesangle)/180.0; varx = This. Radius *Math.Cos (Radianangle); vary = This. Radius *Math.sin (Radianangle); varRectx = x + finalsize.width/2-CenterX; varRecty = y + finalsize.height/2-CenterY; Elemet. Arrange (NewRect (Rectx,recty,elemet. Desiredsize.width,elemet.            Desiredsize.height)); }             returnfinalsize; }    }}

As for the application of mathematical knowledge inside I do not elaborate, my big celestial basic education or a lever drop, paste a map we will understand.

Using our circular panel in XAML, that's it.

<Page x:class="Customitemspsnnel.mainpage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="Http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="Using:customitemspsnnel"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"XMLNS:MC="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:ignorable="D"DataContext="{Binding path=main, Source={staticresource Locator}}"Background="{ThemeResource Applicationpagebackgroundthemebrush}"> <Grid> <textblock horizontalalignment="Center"style="{StaticResource Titletextblockstyle}"text="{Binding Title}"/> <gridview horizontalalignment="Stretch"Verticalalignment="Stretch"> <GridView.ItemsPanel> <ItemsPanelTemplate> <local:circlei Temspanel radius=" -"height=" -"Verticalalignment="Stretch"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.Items> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> <image width=" -"Source="Itunesartwork.png"/> </GridView.Items> </GridView> </Grid></Page>

Summed up, found that the original XAML under the custom control can be so simple, so free, really give me the follow-up development opened a new door, the previous customization is only limited to custom style,template, I believe that more fun app will be born later, finally paste a picture.

Windows Phone development Notebook-WINRT custom round ItemsControl