OrbitView Control In UWP

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,

1. Windows 10 (Recommended)
2. Microsoft Visual Studio 2017
3. 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.

<Controls:OrbitView.CenterContent>
    <Grid>
        <Ellipse Fill="White" Height="105" Width="105" Stroke="Black" StrokeThickness="2"></Ellipse>
        <Ellipse Height="100" Width="100" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Ellipse.Fill>
                <ImageBrush ImageSource="Assets/01.jpg"></ImageBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</Controls:OrbitView.CenterContent>

Note

Automatically, the following code will be generated in XAML code view while we are done in the design view.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPOrbitView" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Controls="using:Microsoft.Toolkit.Uwp.UI.Controls" x:Class="UWPOrbitView.MainPage" mc:Ignorable="d">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Controls:OrbitView OrbitsEnabled="True" AnchorsEnabled="False" IsItemClickEnabled="True" MinItemSize="20" MaxItemSize="60" AnchorColor="Gray" OrbitColor="Gray" Height="818">
            <Controls:OrbitView.ItemTemplate>
                <DataTemplate x:DataType="Controls:OrbitViewDataItem">
                    <Ellipse>
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="{x:Bind Image}"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </DataTemplate>
            </Controls:OrbitView.ItemTemplate>
            <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>
            <Controls:OrbitView.CenterContent>
                <Grid>
                    <Ellipse Fill="White" Height="105" Width="105" Stroke="Black" StrokeThickness="2"></Ellipse>
                    <Ellipse Height="100" Width="100" VerticalAlignment="Center" HorizontalAlignment="Center">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="Assets/01.jpg"></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </Grid>
            </Controls:OrbitView.CenterContent>
        </Controls:OrbitView>
    </Grid>
</Page>

Step 4

Deploy your app on the local machine. The output of the UWPOrbitView is as follows.

 

Summary

Now, you have successfully tested OrbitView control in XAML and UWP environment using Visual Studio 2017.