The OrbitView control provides a new control, inherited from the ItemsControl. All items are arranged in a circle around a central element. OrbitView Control is from UWP Community Toolkit. The UWP Community Toolkit is a collection of helper functions, custom controls, and app services. It simplifies and demonstrates common developer tasks building UWP apps for Windows 10.
Reading this article, you will learn how to use OrbitView Control in Universal Windows apps development with XAML and Visual C#.
The following important tools are required for developing UWP,
- Windows 10 (Recommended)
- Microsoft Visual Studio 2017
- Windows Anniversary Update (10.0.14393.0)
Step 1
Open Visual Studio 2017. Go to Start -> New Project -> select Windows Universal (under Visual C#) -> Blank App (Universal Windows) -> Give a suitable name for your app (UWPOrbitView) ->OK.
After choosing the target and minimum platform version that your Windows Universal application will support (Windows Anniversary Update (10.0.14393.0)), the Project creates App.xaml and MainPage.xaml.
Step 2
First, update the reference, Microsoft.NETCore.UniversalWindowsPlatform with the latest version of it via "Manage NuGet Packages".
Step 3
Add the following controls in design window for OrbitView control view.
Add an image to Assets folder for OrbitView control.
Add the OrbitView control and set the OrbitsEnabled, AnchorsEnabled, ItemClickEnabled, MinItemSize, MaxItemSize, AnchorColor, OrbitColor, and Height properties.
- <Controls:OrbitView OrbitsEnabled="True" AnchorsEnabled="False" IsItemClickEnabled="True" MinItemSize="20" MaxItemSize="60" AnchorColor="Gray" OrbitColor="Gray" Height="818"/ >

Add the following XAML code to the Orbitview ItemTemplate.
- <Controls:OrbitView.ItemTemplate>
- <DataTemplate x:DataType="Controls:OrbitViewDataItem">
- <Ellipse>
- <Ellipse.Fill>
- <ImageBrush ImageSource="{x:Bind Image}"></ImageBrush>
- </Ellipse.Fill>
- </Ellipse>
- </DataTemplate>
- </Controls:OrbitView.ItemTemplate>
Add the following XAML code to Orbitview ItemSource.
- <Controls:OrbitView.ItemsSource>
- <Controls:OrbitViewDataItemCollection>
- <Controls:OrbitViewDataItem Image="Assets/02.jpg" Distance="0.1" Label="Shen" Diameter="0.2"></Controls:OrbitViewDataItem>
- <Controls:OrbitViewDataItem Image="Assets/03.jpg" Distance="0.2" Label="David" Diameter="0.5"></Controls:OrbitViewDataItem>
- <Controls:OrbitViewDataItem Image="Assets/04.jpg" Distance="0.4" Label="Petri" Diameter="0.6"></Controls:OrbitViewDataItem>
- <Controls:OrbitViewDataItem Image="Assets/05.jpg" Distance="0.8" Label="Vlad" Diameter="0.8"></Controls:OrbitViewDataItem>
- </Controls:OrbitViewDataItemCollection>
- </Controls:OrbitView.ItemsSource>
Add the following XML code to Orbitview Center Content.

Mahesh ChandPosted Nov 11, 2017, 3:06 PM
This is great Vijay. But I think you should add more functionality of the control like some events, methods, and properties to make it more useful. Thanks