UWP Tip #13 - 2017 Wrap-Up, Free Resources for #UWP Developers

Intro

With 2017 nearing an end, I wanted to share some of the UWP resources that I have used or evaluated this year. These are all either completely free or have a free version for personal/community use.

Resources

Universal Windows Platform Documentation - Get tips, tutorials for getting started, design guidance, the API reference and lots more on the Microsoft Docs Windows Dev Center.

Visual Studio Dev Essentials - A Dev Essentials subscription is free for developers' personal/community use. Get Azure credits, VS Teams Services Basic level benefits, VS Community Edition, a LinkedIn Learning 3-month subscription and a ton of other benefits. After you review all the great resources on this blog post, go here first and see what else Dev Essentials has to offer.

UWP Community Toolkit - If you follow my blog, you are well acquainted with the UWP Community Toolkit. This ever-growing collection of free, open-source controls, extensions and helpers is an essential part of every UWP developer's toolbox.

Windows Template Studio - Another essential tool from Microsoft is the Windows Template Studio. This is a Visual Studio 2017 extension that provides a wizard-style experience for bootstrapping your next UWP project. Get a head-start by selecting the pages, features, frameworks and extensions you want to use in your application.

Microsoft App Center - Build, test and distribute your Windows apps built with the Xamarin SDK.

Microsoft HockeyApp - Mobile DevOps for your apps. Get app distribution, crash reporting, metrics and track user feedback. Now free for all developers in 2018.

Microsoft Dev Center - Your hub for Microsoft Store app submissions. Submit apps to the Store, monetize your apps, create promo code, run ad campaigns to attract more users, and review your user reviews and feedback.

Progress Telerik UI for Universal Windows Platform - Offering both Open-Source and Commercial license options, Telerik's UWP control suite offers over 20 controls for app developers. Get rich controls such as Map, AutoCompleteBox, DataForm, Gauge, BulletGraph and more.

Syncfusion Essential Studio for UWP - Syncfusion also has a UWP control suite with Commercial and free Community license options. Syncfusion's Community licensing extends across all of their product offerings (over 800 components). The UWP suite includes over 60 components free for personal or community use.

Unity Personal - Do you want to build games for the Windows platform? Get started with Unity's Personal edition which is free for beginners, students and hobbyists.

Wrap Up

Go check out some of these resources today and make the most of your time and money in 2018! Happy UWP app building!

del.icio.us Tags: uwp community toolkit,windows template studio,uwp,mvvm,unity

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!