Wintellect Blogs

Taming the SplitView Control in Windows 10

Jeff Prosise

30 Jul , 2015  

Of all the new controls featured in Windows 10, SplitView is perhaps the most emblematic. SplitView makes it easy to implement “hamburger menu” interfaces like the ones featured in Windows 10’s built-in News, Sports, and Photos apps, among others. A hamburger icon consisting of three horizontal bars sits atop a ribbon on the left side of the window. The ribbon contains iconic buttons, most of which navigate to another page in the app when clicked. Typically, but not always, clicking the hamburger icon expands the ribbon to reveal labels to the right of the icons. It’s an easy navigation pattern to learn, and even if somewhat controversial, it’s already familiar to users who have seen similar UI paradigms used in Web sites and mobile apps.

Most developers who set out to use SplitView for the first time are surprised at how lean it is. SplitView has little in the way of a default UI other than a pane that expands and collapses. There is no SplitViewItem class for placing buttons in a SplitView, and precious little guidance on how to implement them. Plus, incorporating a SplitView in your app requires some restructuring of the code that Visual Studio dumps into App.xaml.cs.… Read more

, , , , ,

Wintellect Blogs

From Zero to Hero in Xamarin Forms in 53 Minutes

Jeff Prosise

3 Jul , 2015  

Looking for a fast way to get up to speed on Xamarin Forms? There are tons of learning resources out there, including a series of articles I published this spring, the first of which can be found here. But while some developers prefer learning by reading, others find video training the best learning medium. Which is why I recorded a 53-minute video entitled Introduction to Xamarin Forms and conspired with the folks at WintellectNOW to make it available for free. It covers the basics of using Visual Studio 2015 and Xamarin Forms to build apps for iOS, Android, and Windows Phone, and it comes with 30 MB of downloadable sample code. In future videos, I’ll cover topics such as custom renderers and process lifetime management. For now, enjoy the inaugural video, and have fun learning Xamarin Forms!

 

imageRead more

,

Wintellect Blogs

Handling the Back Button in Windows 10 UWP Apps

Jeff Prosise

30 Jun , 2015  

The cool thing about Universal Windows Platform (UWP) apps is that they run on an assortment of devices, from PCs, tablets, and phones to (soon) Xboxes and HoloLens, among others. Personally, I can’t wait to see some of the apps I’ve written light up on my kids’ Xbox. They’ll think I’m a hero (“my dad writes Xbox apps!”) even though I’m not.

But as every hero knows, with great power comes great responsibility. One of the issues you’ll run into when writing a UWP app is how to handle the Back button. Windows phones have Back buttons, but other devices don’t. One way to handle the Back button on phones is to add a reference to Microsoft’s Mobile Extension SDK and write adaptive code that responds to HardwareButtons.BackPressed events, as I wrote about in a previous post. Of course, that doesn’t solve the problem of allowing users to navigate backward on devices that lack Back buttons. Which is why Microsoft introduced the Windows.UI.Core.SystemNavigationManager class. SystemNavigationManager does two important things for you:

  • Upon request, it displays a software Back button when your app is running on a device without a Back button
  • It allows you to handle clicks of the Back button (software or hardware) without adding extension SDKs and without writing adaptive code

Here’s what Contoso Cookbook looks like on a PC with a SystemNavigationManager-provided Back button:

Cookbook

Making the Back button appear requires just one line of code:

SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;

Responding to clicks of the Back button is a simple matter of wiring up a handler for SystemNavigationManager.BackRequested events:

SystemNavigationManager.GetForCurrentView().BackRequested += (s, e) =>
{
    // TODO: Go back to the previous page
};

The beauty of it is that this code works without change on phones and other devices.… Read more

,

Wintellect Blogs

Spicing Up Universal Windows Apps with Per-Platform Views and Compiled Data Bindings

Jeff Prosise

6 May , 2015  

Adaptability is one of the hallmarks of the Universal Windows Platform (UWP). Apps that run on devices large and small must be able to adapt their UIs to the screen space available. UWP offers a number of tools for building adaptive UIs, including AdaptiveTrigger, RelativePanel, and controls that are cognizant of the screens they’re running on and willing to adapt themselves to provide the best user experience possible.

But sometimes the best way to optimize the experience on a particular device is to design the UI just for that device. I ran into that while porting Contoso Cookbook from Windows 8.1 to Windows 10. On a large screen, I wanted to use a GridView control to present rows and columns of recipes, starting in the upper-left corner and moving to the right, wrapping as needed to fill the screen with delicious recipes. On a phone, I envisioned a different experience built around a ListView control with a scrolling column of recipes.

Fortunately, UWP anticipates such scenarios and makes it rather easy to tailor UIs to individual devices – specifically, to device families: mobile devices, desktop devices, and so on. While doing the port, I also decided to leverage a new feature of Windows 10 that delivers faster performance and lower memory consumption.… Read more

,

Wintellect Blogs

API Convergence Gets Real in Windows 10

Jeff Prosise

4 May , 2015  

Last year, I wrote a universal app named Pic Me (later renamed to “Picture Me”) for Windows 8.1 and Windows Phone 8.1. The main reason I wrote it was that my daughter said “wouldn’t it be cool to have an app that shows you all the photos you’ve been tagged in on Facebook, and that lets you download those photos, too?” But the other reason I wrote it was that it seemed like a great opportunity to sink my teeth into a universal app for which there was a genuine need – not to mention the fact that it was a chance to use WebAuthenticationBroker and a handful of other WinRT classes that I hadn’t used much in the past.

Boy, was it an adventure. Because the app used WebAuthenticationBroker, FileSavePicker, and FolderPicker, and because the continuation model used by those classes was very different on Windows and Windows Phone, I ended up writing a fair amount of platform-specific code. Roughly one third of the code was shared, one third was Windows-specific, and one third was Windows Phone-specific. It was clear that the APIs were converging, but it was also clear that they had a long way to go if you wanted one binary to run on a variety of devices.… Read more

Wintellect Blogs

Using AdaptiveTrigger to Build Adaptive UIs in Windows 10

Jeff Prosise

2 May , 2015  

Like a lot of developers, I’ve been watching the development of Windows 10 and digesting all the features Microsoft announced at BUILD. And I’m eager to build apps that target the Universal Windows Platform (UWP). UWP is a new model that allows you to write apps that run on a wide range of Windows devices, including desktop PCs, tablets, phones, Xboxes, IoT devices, and yes, even HoloLens. It’s the future of Windows application development, especially if you care to target the ever-expanding family of devices that run Windows. And there’s no time like the present to start learning about it.

Unlike universal apps in Windows 8, universal apps in Windows 10 truly are universal – at least as far as Windows devices are concerned. In Windows 8, a universal app solution in Visual Studio typically contained one shared project and additional projects, or “heads,” for individual devices. For example, it was common to have one shared project, one Windows project, and one Windows Phone project. Building the solution produced two binaries: one for Windows and one for Windows Phone. While the shared project contained shared code that worked on both devices, you created the UI for the Windows app in the Windows project, and the UI for the phone app in the Windows Phone project.… Read more

,

Wintellect Blogs

Supercharging Xamarin Forms with Custom Renderers, Part 5

Jeff Prosise

2 May , 2015  

Making Xamarin Forms Richer with Custom Visual Elements

The BoxView class is handy for drawing rectangles in a Xamarin Forms UI. On Windows Phone, a BoxView renders a Rectangle element. On iOS and Android, it paints a rectangle onto a graphics context and a canvas, respectively. But what about other graphics primitives such as ellipses and paths? Windows Phone, Android, and iOS all support them, but Xamarin Forms doesn’t surface any of them as visual elements.

Good news: You can implement new visual elements in Xamarin Forms with custom renderers. Most renderers in Xamarin Forms wrap controls such as TextBlocks and UILabels. But renderers aren’t required to emit controls; some, such as the BoxRenderer classes found in iOS and Android, don’t output controls at all. Instead, they paint pixels depicting BoxViews onto a drawing surface. You can do the same to extend Xamarin Forms with custom visual elements.

The custom element presented in this article is EllipseView. You can declare instances of EllipseView in a Xamarin Forms UI the same way you declare BoxViews. EllipseView exposes the exact same properties as BoxView, including the Color property that controls the color of the element’s interior. Here’s a bubbly UI built with an AbsoluteLayout and a few EllipseViews:

Ellipses

And here’s the XAML that produced that UI:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:EllipseViewDemo;assembly=EllipseViewDemo"
             x:Class="EllipseViewDemo.MainPage"
             BackgroundColor="#FFBCA9F5">
             
    <AbsoluteLayout>
        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="-60, -60, 400, 400" />
        <local:EllipseView Color="#FFF5A9F2" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="-40, -40, 360, 360" />

        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="60, 380, 200, 200" />
        <local:EllipseView Color="#FFF2F5A9" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="80, 400, 160, 160" />

        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="200, 220, 300, 300" />
        <local:EllipseView Color="#FFBCA9F5" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="220, 240, 260, 260" />

        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="200, 360, 400, 400" />
        <local:EllipseView Color="#FFF781F3" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="220, 380, 360, 360" />

        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="-100, 600, 600, 600" />
        <local:EllipseView Color="#FF81F79F" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="-80, 620, 560, 560" />

        <local:EllipseView Color="White" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="360, -40, 200, 200" />
        <local:EllipseView Color="#FFF2F5A9" Opacity="0.4"
            AbsoluteLayout.LayoutBounds="380, -20, 160, 160" />
    </AbsoluteLayout>

</ContentPage>

You could use the same techniques I used to build EllipseView to extend Xamarin Forms to support PolygonView, PathView, and other visual elements.… Read more

, ,

Wintellect Blogs

Implementing John Conway’s Game of Life in Xamarin Forms

Jeff Prosise

22 Apr , 2015  

John Conway’s Game of Life, presented to the world in the October 1970 issue of Scientific American magazine, is one of the most popular computer simulations of all time. In it, you draw a pattern of cells in a 2-dimensional grid. Then you “evolve” the cells from one generation to the next. Whether a cell lives, dies, or is “born” in the next generation depends on a simple set of genetic rules specified by Conway. A live cell with two or fewer neighbors dies from starvation in the next generation, while a live cell with five or more neighbors dies from overpopulation. Meanwhile, a cell that isn’t alive in the current generation comes alive in the next if it has precisely three neighbors. From this simple rule set arises a cellular automata game of nearly infinite scope and complexity.

I’ve implemented the Game of Life on multiple platforms over the years, including Silverlight, Windows, and Windows Phone. Thus, it seemed natural to write an implementation for other platforms, too. And what better way to do it than write it in Xamarin Forms? That way, it can work on Windows Phone, Android, and iOS, too.

Writing a Xamarin Forms version of the game presented a few challenges, not the least of which was figuring out how to detect when a finger dragging across the screen enters a grid cell, as described in my previous article.… Read more

, , ,

Wintellect Blogs

Supercharging Xamarin Forms with Custom Renderers, Part 4

Jeff Prosise

18 Apr , 2015  

If you’ve read the previous posts in this series, you’re aware that custom renderers are the keys that unlock the doors to advanced customizations in Xamarin Forms. In Part 1, I presented custom renderers for rounding the corners of and placing borders around Button controls. In Part 2, I used custom renderers to stylize the buttons in my Xamarin Forms RPN calculator. In Part 3, I showed how to use custom renderers to display wrapped, truncated text in Label controls. Now, in Part 4, I’m going to use custom renderers to do something completely different – something to customize a control’s behavior rather than its appearance, and in a way that could be useful to real-world apps.

Assume you’ve built a Xamarin Forms app with a page containing the following XAML:

<Grid Padding="32" RowSpacing="32" ColumnSpacing="32">
  <BoxView Grid.Row="0" Grid.Column="0" Color="#FFF25022" />
  <BoxView Grid.Row="0" Grid.Column="1" Color="#FF7FBA00" />
  <BoxView Grid.Row="1" Grid.Column="0" Color="#FF01A4EF" />
  <BoxView Grid.Row="1" Grid.Column="1" Color="#FFFFB901" />
</Grid>

Running the app produces this on Windows Phone, Android, and iOS, in that order:

SmartBoxView

Now suppose that when one of the colored rectangles is tapped, you want to highlight it by changing its color to, say, bright yellow.… Read more

, ,

Wintellect Blogs

Supercharging Xamarin Forms with Custom Renderers, Part 3

Jeff Prosise

7 Apr , 2015  

One of the limitations of Xamarin Forms that frequently pains developers is the fact that the Label control supports text wrapping and text truncation, but it doesn’t support both at the same time. Specifically, Label’s LineBreakMode property can be set to LineBreakMode.WrapText to wrap text, or it can be set to LineBreakMode.TailTruncation to replace text at the end of a string with an ellipsis (…). But it can’t be set to both. Imagine you’re writing a Twitter client around a ListView control, and you want to show two or three lines of text for each tweet, with an ellipsis filling in for any text that won’t fit into the space provided. Sounds simple, but Xamarin Forms doesn’t offer a handy solution.

I ran into this problem when porting Contoso Cookbook to Xamarin Forms. On the app’s main page, I wanted to include a few lines of descriptive text under each recipe title. But the fact that Label doesn’t support wrapped, truncated text presented a problem. Rather than solve the problem then and risk taking away from the focus of the article, I decided to put it off until I published a series on custom renderers. This is Part 3 in that series, and it’s time to tackle wrapped, truncated text.… Read more

, , ,