UWP Tip #12 - UWP Community Toolkit - Part 10, OrbitView Control

Welcome back to my UWP Community Toolkit series. The previous five tips in the series can be found here:

• Part 5, Using the Streams Code Helper
• Part 6, Using the VisualTree and LogicalTree UI Helpers
• Part 7, the Sample App
• Part 8, 2 Developer Tools
• Part 9, DockPanel Control

Intro

One of the more interesting XAML controls in the UWP Community Toolkit is the OrbitView control. The OrbitView inherits from the ItemsControl and renders its items in a layout resembling a solor system’s planets. Here is a look at the control in the UWP Community Toolkit Sample App.

Using the OrbitView Control

Since the OrbitView an ItemsCollection at its heart, any UWP developer can drop one in and get started quickly. There are several areas of focus when configuring an OrbitView.

The Control

These are some of the properties which can be set on the OrbitView to control its appearance.

• OrbitsEnabled - Turns the visibility of the orbit lines on and off.
• OrbitColor - Sets the color of the orbit lines.
• OrbitThickness - Sets the thickness of the orbit lines.
• AnchorsEnabled - Turns the visibility of the anchor lines from each item to the CenterContent on and off.
• AnchorColor - Sets the color of the anchor lines.
• AnchorThickness - Sets the thickness of the anchor lines.
• IsItemClickEnabled - Controls if the items are clickable.
• MinItemSize - The minimum size of the items in orbit.
• MaxItemSize - The maximum size of the items in orbit.

The Items

Items can be customized by creating an ItemTemplate, DataTemplate and by setting properties on the OrbitViewDatItem itself. Create a DataTemplate for a custom look and feel of all the items. For the example in the Sample app, the DataTemplate consists of an Ellipse with a fill of a data bound image.

Here is the code for the ItemTemplate of the OrbitView in the sample app image above.

<controls:OrbitView.ItemTemplate>
    <DataTemplate>
        < controls:DropShadowPanel HorizontalContentAlignment="Stretch"
                                          VerticalContentAlignment="Stretch"
                                          BlurRadius="20"
                                          Color="Black">
            <Ellipse>
                <Ellipse.Fill>
                    <ImageBrush ImageSource="{Binding Image}" />
                </Elipse.Fill>
            </Ellipse>
        </controls:DropShadowPanel>
    </DataTemplate>
</controls:OrbitView.ItemTemplate>

Each Item can be made unique via several properties of the OrbitViewDataItem. All of these properties are available for use with data binding.

• Image - Sets the image to be used for each specific item.
• Distance - Indicates the distance of the item from the CenterContent.
• Label - Sets the label on the orbit item. The DataTemplate can control the presentation of the label (caption, tooltip, etc.)
• Diameter - Controls the relative size of the item. The diameter is a percentage based on the Min and MaxItemSize properties of the parent OrbitView control.

The CenterContent

The CenterContent contains the control to be displayed at the center of the OrbitView. Any type of control can be placed here. In the sample app, another Ellipse is that the center, but this one has a DropShadowPanel containing another Ellipse.

<controls:OrbitView.CenterContent>
    <Grid>
        <controls:DropShadowPanel>
            <Ellipse Width="105"
                  Height="105"
                  Fill="White"
                  Stroke="Black"
                  StrokeThickness="2" />
        </controls:DropShadowPanel>
        <Ellipse Width="100"
                Height="100"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <Ellipse.Fill>
                <ImageBrush ImageSource="ms-appx:///Assets/People/nikola.png"/>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
</controls:OrbitView.CenterContent>

The PivotItem

It is also possible to set a PivotItem to display more details about the items in the OrbitView in a new view. The Sample app shows Devices that belong to each user in orbit.

Wrap-Up

The OrbitView might not be something you use in your projects every day, but it is a really eye-popping way to represent the right data. Keep it in mind for one of your future UWP projects, and go check out the source today.

Happy coding!