xaml – Ash Tewari

Universal Windows Platform Application on Raspberry Pi

Universal Windows Platform (UWP) provides a common app platform on every device that runs Windows 10. The core APIs in UWP are the same on all Windows devices – including Desktop PC, Mobile Phone, XBox, Hololens, IOT devices and others.

You can target specific device capabilities of a device family with extension SDKs, but you don’t have to do that if you are only using core APIs. Those core APIs include a very impressive set of UI capabilities. What that means is that you can create a UWP application using C# and XAML which will run on an ARM based processor on Raspberry Pi – because Windows 10 IOT Core runs on that.

Universal Windows Platform (UWP) has come a long way. I decided to dust off my good old Raspberry Pi 2B and take it for a spin last weekend.

The goal was simply to create a Hello World UWP application, deploy it on Windows 10 IOT running on Raspberry Pi (RPi), without using any device specific extension SDKs. Here is the stack –

Universal Windows Platform App (C#/XAML)
Raspberry Pi Model 2B
Windows 10 IOT Core
Syncfusion Essential Studio 18.1.0.42
Visual Studio 2019

Create a simple UWP application in Visual Studio 2019.

Install Windows 10 IOT Core on Raspberry Pi 2B and connect the device to a 50″ screen TV.

Select ARM in the target platform drop down and Click on Remote Machine to Run/Debug Application on RPi device.

Select RPi device for deployment.

Deployment of UWP on RPi is complete.

UWP application running on RPi.

I updated the UWP application to include Syncfusion Chart control. Did you know that you can get a Community License for the entire product line (including Blazor, Xamarin and UWP controls) from Syncfusion?

UWP application is now running on RPi, attached to the Visual Studio debugger running on the development machine (Windows Surface).

No device specific extension SDKs were referenced, just the core UWP APIs were used.

Code is on github.

Universal Apps

The story of Windows Universal Apps is the result of advancements in three areas:

The platform convergence between Windows 8.1 and Windows Phone 8.1
The (ongoing) unification of Windows and Windows Phone stores.
Shared Projects and other enhancements in Visual Studio 2013 Update 2 to support cross-platform development.

I have written about my experience in converting an existing Windows 8 app, CensusMapper, to a Universal App on the AIS Blog. Read the article here. I have also created another Universal App, LRMS, using Windows App Studio. This app is available in both Windows and Windows Phone Stores.

I gave a presentation at the Raleigh Code Camp this past weekend : Creating Universal Apps for Windows Phone 8.1 and Windows 8.1. Thanks to everyone who attended the presentation. The session slides for this presentation are available here : Download Slides.

Creating Windows 8 applications with MVVM

TRINUG January Main Meeting

You will learn how to use MVVM in your own Windows 8 application – desktop/mobile
You will learn MVVM fundamentals. You will see the contrast between an MVVM application and a non-MVVM application.

Using Layer Diagrams – Keeping your MVVM code from turning into spaghetti

Raleigh Code Camp 2013 is wrapping up this afternoon. The venue and the crowd was phenomenal. I really enjoyed presenting “Using Layer Diagrams – Keeping your MVVM code from turning into spaghetti”. Thanks to everyone who attended the presentation.

John Sonmez, Our Keynote Speaker, made my day by accepting my request to attend my presentation. It was awesome to have him in the audience and to get feedback from him!

I did not get the time to complete the raffle at the end of the presentation. But the folks who won the raffle should be getting an email from me with instructions to download their free license of CodeDemo (Professional).

The presentation slides can be downloaded from here : download.

Refactoring to MVVM (Windows 8)

Carolina Code Camp – 2013
You will learn how to structure your app’s code in a way that
– improves maintainability
– enables testability of your app’s UI behavior
– reduces maintenance cost
– enables cross-platform deployment

Remove ListBoxItem Highlighting

A Silverlight/Wpf ListBoxItem is highlighted when selected or when the mouse hovers over it.

I need to display a list of items that are not highlighted when selected. This is a common scenario when displaying an inactive list for simply listing out some information.

ListBoxItem’s default template can be easily inspected and modified using Expression Blend – Select a ListBoxItem in Objects and Timeline pane, Right click and select Edit template > Edit a Copy. Name you template and save it at the scope of your choice.

This will create a copy of the template and allow you to modify it. Switch to the xaml view. Locate the VisualStates of MouseOver, Selected and Focused, and blank them out –

de-highlighted-xaml

The style is applied to the ListBoxItems using ItemContainerStyle –

applying-style-to-listboxitems

Here is the xaml style for the ListBoxItem –
<Style x:Key="ListBoxtemStyleNoHighlighting" TargetType="ListBoxItem"> <Setter Property="Padding" Value="3"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Top"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="TabNavigation" Value="Local"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected"/> <VisualState x:Name="Selected"/> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"/> <VisualState x:Name="Unfocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

After the style is applied, the ListBoxItems are not highlighted when selected or focused. Here is a live demo of a ListBox that does not highlight when items are selected : remove-listboxitem-hlighting-demo