by Wojciech Sura

Theme-aware resources in Windows Phone

Windows Phone supports two themes: light and dark. Since UI in this ecosystem is quite… say, minimalistic, the first theme can be described as “black on white” and the second as “white on black”.

The most common way to design appearance of your application is to use predefined resources, which are provided by the system. For instance, to create text in a frame with default theme colors, write:

[xml]<Border Margin="4" BorderBrush="{ThemeResource PhoneForegroundBrush}"
BorderThickness="{ThemeResource ButtonBorderThemeThickness}"
Background="{ThemeResource PhoneBackgroundBrush}">
<TextBlock Foreground="{ThemeResource PhoneForegroundBrush}"
FontSize="{ThemeResource TextStyleExtraLargePlusFontSize}">Themed manually</TextBlock>
</Border>[/xml]

The border will match current theme color:

lightdark

But what if you want to introduce your own styles to application, but still match current theme?

The solution is to create different ResourceDictionary objects for light and dark scheme and then to import them in special way to your page:

[xml]<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light" Source="Light.xaml" />
<ResourceDictionary x:Key="Dark" Source="Dark.xaml" />
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>[/xml]

The phone will now choose appropriate resource file, depending on current theme. Remember to use ThemeResource instead of StaticResource though, such that when theme changes all relevant values will be reloaded from appropriate ResourceDictionary.

by Wojciech Sura

Event-to-command in Windows Phone

During writing my Windows Phone application I ran into a problem: I wanted the button to behave differently, depending on whether user tapped it or pressed-and-held.

Most XAML controls provide a Holding event, which occurs when user keeps touching an item – so the solution seems to be as simple as implementing an event.

But that doesn’t look nice in XAML – most actions can be implemented declaratively – as bindings to commands in the viewmodel. Implementation of event in code-behind seems like a code smell in this beautiful MVVM environment.

There’s a solution though – to use Behaviors SDK.

First of all, add Behaviors SDK (XAML) to your project references – you may find it among few assemblies, which Microsoft provides as optional ones for Windows Phone applications.

Then – as usual – you’ll have to define XML namespaces for two additional C# namespaces:

[xml]<Page

xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:icore="using:Microsoft.Xaml.Interactions.Core">[/xml]

Finally, you may add a behavior and action to the button:

[xml]<Button Command="{Binding TapCommand}">
<i:Interaction.Behaviors>
<icore:EventTriggerBehavior EventName="Holding">
<icore:InvokeCommandAction Command="{Binding HoldingCommand}" />
</icore:EventTriggerBehavior>
</i:Interaction.Behaviors>
Press or hold me
</Button>[/xml]

Remember though, that after HoldingCommand, the TapCommand will fire as well. Make sure to implement it properly.

by Wojciech Sura

Snoop – a WPF window inspector

If you’re developing programs with Windows Presentation Foundation, there is a program, which, if you don’t already know, you surely should.

Snoop is a very interesting free utility, which allows inspecting WPF visual tree structure of an application during the runtime – and works completely standalone from the IDE. But that’s not all: you may inspect every single UI element along with its full list of properties and information, where the value comes from (direct, inherited, binding, resource etc.) and change them to observe, what happens.

And what if the visual of interest is buried deeply in the visual tree? That’s not a problem at all – after inspecting window with Snoop, simply hold Ctrl+Shift and hover mouse over that item – Snoop will find it for you.

snoop

Since a few versions of Visual Studio are written in WPF, you may Snoop them as well. That’s actually very useful, when you’re developing an extension editor for the IDE.