Sunday, February 18, 2018

UWP Tip #16 - UWP Community Toolkit - Part 13, the Loading… Control

Welcome back to my UWP Community Toolkit series. The previous five tips in the series can be found here:
Here's a quick tip about a straightforward but useful control. The UWP Community Toolkit has a Loading control to indicate that your UWP app is currently loading some content. Drop this into your Page or Control and make it visible when data is loading and you want to prevent users from interacting with the application.

I created a Page with a Grid containing a ListBox and a Loading control. The ListBox gets loaded with a list of animals during load and the Loading control has its IsLoading property set to true. This is the property you would normally toggle on and off while a long-running load process is occurring. Here's a look at the XAML:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <ListBox x:Name="MainItemsList"/>
    <controls:Loading x:Name="MainLoadingControl" HorizontalContentAlignment="Center" 
                       VerticalContentAlignment="Center" Background="DarkGray" Opacity="0.8">
         <StackPanel Orientation="Horizontal" Padding="8">
             <ProgressRing IsActive="True" Margin="0,0,10,0" Foreground="CadetBlue" />
             <TextBlock Text="Loading control with wait ring. Loading..." VerticalAlignment="Center" Foreground="White"/>
         </StackPanel>
     </controls:Loading>
</Grid>

Inside the Loading control, you can set any content you want to display for your users during the wait interval. I've chosen a horizontal StackPanel with a ProgressRing and TextBlock. Of course, a production app would probably move the content of this panel into a shared resource that could dynamically set the text of the TextBlock based on the current context of the wait/load period.

This is the code from the Page's code behind file to load the list items and display the loading panel.

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     var listItems = new List<string>
     {
         "Item 1 - Dog",
         "Item 2 - Hamster",
         "Item 3 - Rat",
         "Item 4 - Cat",
         "Item 5 - Lizard",
         "Item 6 - Guinea Pig",
         "Item 7 - Snake",
         "Item 8 - Turtle",
         "Item 9 - Bird",
         "Item 10 - Gerbil",
         "Item 11 - Mouse",
         "Item 12 - Fish"
     };
    MainItemsList.ItemsSource = listItems;
    MainLoadingControl.IsLoading = true;
}

Again, best practices outside of a sample app would have these list items inside an ObservableCollection in the corresponding view model. The IsLoading property would also be bound to a boolean in your view model to be toggled on/off as necessary.

This is the end result of our basic list behind a Loading control.

UWPToolkit-LoadingControl1

It looks pretty slick for a few lines of code in a sample app. Go download the latest Toolkit in your UWP app and give it a try today. The GitHub source for the control can be found here.

Happy coding!

Technorati Tags: ,

Monday, January 29, 2018

UWP Tip #15 - UWP Community Toolkit - Part 12, Working with Headings

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

Intro

The UWP Community Toolkit has a few controls to add headers to your WPF application's content. Drop this into your app and add a little styling to match their look to the rest of your app and you'll quickly and easily save time creating repetitive markup throughout your UI.

The HeaderedContentControl

The HeaderedContentControl provides the base functionality for the other headered controls. It will display a header along with any content. Wrap any of your existing controls with this one to quickly add some header text. Here's an example of the HeaderedContentControl containing a TextBox.

<HeaderedContentControl Header="TextBox Content"
                                     HorizontalContentAlignment="Stretch"
                                     VerticalContentAlignment="Stretch"
                                     Margin="4">
     <TextBox Text="Hello headers!"/>
</HeaderedContentControl>

That markup will render the following UI in your WPF Window:

UWPTK-Headers3

Pretty simple. As you'll see in the next section, it is also pretty simple to add some style to the header text too.

The HeaderedItemsControl

The HeaderedItemsControl providers all of the functionality of a standard ItemsControl with a header added above the items. It's a HeaderedContentControl but the content is always an ItemsControl. Set the Header text property and the ItemsSource to your list of items, and you're all set. You can drop this in place of any of your existing ItemsControls and re-use the same ItemTemplate to achieve an identical look and feel of the list items.

With any of the headered controls, the header itself can also be customized be assigning a DataTemplate to the HeaderTemplate, in this case the HeaderedItemsControl.HeaderTemplate.

Here's the simplest use of the control, with the Header hard-coded and the ItemsSource bound to a collection in the DataContext.

<controls:HeaderedItemsControl Header="Some Items" 
                                 ItemsSource="{Binding SomeItems}" >

Take a look at a couple of HeaderedItemsControls in the UWP Community Toolkit Sample App. The first list's XAML is as simple as mine above. The second add a little custom layout to the header and the list.

UWPTK-Headers2

Here's the markup to add the blue foreground to the second header.

<HeaderedItemsControl.HeaderTemplate>
     <DataTemplate>
         <TextBlock DataContext="{Binding DataContext, ElementName=Page, Mode=OneWay}"
                    FontSize="16"
                    Foreground="Blue"
                    Text="Header 2" />
     </DataTemplate>
</HeaderedItemsControl.HeaderTemplate>

The HeaderedTextBlock

The HeaderedTextBlock control providers a quick way to display some read-only text with some corresponding header text. It's a HeaderedContentControl but the content is always a TextBlock. The three properties you need to know are straightforward: Header, Text and Orientation. You can lay out the header and text in a Horizontal or Vertical layout, the Vertical being the most common use.

Check it out in the Sample App.

UWPTK-Headers1

Here's the corresponding XAML for the control.

<controls:HeaderedTextBlock 
     Header="My Item"
     Text="Some really interesting information about my item."
     Orientation="Vertical"
     Margin="20,10,0,0" />

A few of these controls is a great, simple way to lay out a read-only form on your app.

Wrap-Up

Go grab the latest toolkit packages via NuGet or browse the repo on GitHub today! There are many more controls you can use in your apps today. We'll check out a few more in a couple of weeks.


Happy coding!


Tuesday, January 9, 2018

UWP Tip #14 - UWP Community Toolkit - Part 11, PullToRefreshListView Control

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

Intro

The PullToRefreshListView XAML control in the toolkit takes the familiar ListView and adds the pull-to-refresh functionality that widely used in touch-friendly UX. The PullToRefreshListView of course inherits from the ListView. Here is a look at the control running in the UWP Community Toolkit Sample App.

uwp-pulltorefresh1

Using the PullToRefreshListView Control

There are a few properties available to customize the pull-to-refresh experience for your users.

  • PullToRefreshLabel - Text shown when the user pulls down.
  • ReleaseToRefreshLabel - Text shown when the user can release (threshold has been reached).
  • PullToRefreshContent - Content shown when the user pulls down (Supersedes PullToRefreshLabel… it will not be shown).
  • ReleaseToRefreshContent - Content shown when the user can release (Supersedes ReleaseToRefeshLabel… it will not be shown).
  • RefreshIndicatorContent - The refresh indicator's content. This element will display when the list is refreshing.
  • PullThreshold - Distance in pixels that the content must be pulled to trigger a refresh on release.
  • OverscrollLimit - A System.Double between 0 and 1 which specifies the overscroll limit. The default value is 0.3.
  • IsPullToRefreshWithMouseEnabled - Indicates if the mouse can be used to trigger a pull-to-refresh. If this is false, touch must be used.

Here is the XAML for the control taken from the Sample Application. You can see that you create a DataTemplate for the item display like you would for any other ListView in UWP. The PullToRefreshContent is used instead of the label to allow for a custom TextBlock to be created.

<controls:PullToRefreshListView
         x:Name="ListView"
         MinWidth="200"
         Margin="24"
         HorizontalAlignment="Center"
         Background="White"
         OverscrollLimit="0.4"
         PullThreshold="100"
         IsPullToRefreshWithMouseEnabled="True">
   <controls:PullToRefreshListView.ItemTemplate>
     <DataTemplate>
       <TextBlock AutomationProperties.Name="{Binding Title}"
                  Style="{StaticResource CaptionTextBlockStyle}"
                  Text="{Binding Title}"
                  TextWrapping="WrapWholeWords" />
     </DataTemplate>
   </controls:PullToRefreshListView.ItemTemplate>
   <controls:PullToRefreshListView.PullToRefreshContent>
     <TextBlock FontSize="16"
                Opacity="0.5"
                Text="Pull down to refresh data" />
   </controls:PullToRefreshListView.PullToRefreshContent>
</controls:PullToRefreshListView>

There is a RefreshCommand that gets triggered when the refresh is triggered on release. This is where you will add your code in either the code behind or (preferably) the corresponding ViewModel. If you have a Refesh button or menu option someplace else in the View, the logic can be shared by both commands.

There is a also a PullProgressChanged you can use to update the RefreshIndicatorContent with the progress of a long-running refresh.

Wrap-Up

The PullToRefreshListView control is a great shortcut control to add a little extra something to your app with very little extra coding necessary. Go check it out today and spice up your UWP app's UX!


Happy coding!


del.icio.us Tags: ,,

Wednesday, December 27, 2017

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.

uwp-resources1

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-resources2

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.

uwp-resources3

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.

uwp-resources4

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.

uwp-resources5

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.

uwp-resources6

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!


Sunday, December 17, 2017

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:

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!