<!-- Change this -->
<TextBox Header="Username" Text="{Binding Username, Mode=TwoWay}"/>

<!-- to this -->
<TextBox Header="Username" Text="{x:Bind Username, Mode=TwoWay}"/>

In my case I was using MVVM to bind properties to my view via a ViewModel. Because the property Username is on my MainPageViewModel and not my MainPage code behind class, the compiler wasn’t able to find the property Username.
In this case I received an error message at compile time stating “Invalid binding path ‘Username’ : Property ‘Username’ can’t be found on type ‘MainPage’”. This is because the compiled binding gets evaluated at compile-time and it cannot find any property on the partial class MainPage to match.

In module 4 of Jerry Nixon and Andy Wigley’s MVA Course, A Developers Guide to Windows 10, Andy mentioned a technique to automatically bind a strongly-typed property called ViewModel on the Page code-behind like this.

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContextChanged += (s, e) =>
        {
            ViewModel = DataContext as MainPageViewModel;
        };
    }

    public MainPageViewModel ViewModel { get; set; }
}

Now every time the DataContext changes, the ViewModel property gets updated. You also have to change the Binding to point to the new strongly typed ViewModel property (note the new “ViewModel.” in the binding expression).

Text="{x:Bind ViewModel.Username}"

This fixed my problem, but I wanted a solution that I could apply to a base class and leverage across all pages. In order to maintain the strongly typed nature of the base class I had specify the ViewModel type somewhere in the code behind. I couldn’t see any way around that. At the same time, I wanted to minimize the occurences where this type had to be specified. After a couple variation using Lambdas and Expressions, which ultimately led to reflection of some type. I opted for full reflection approach based on convention. The convention I settled on required a property called ViewModel on the concrete page. Then on the BasePage I just look for this type and set it whenever the DataContext changes.

public sealed partial class MainPage : BasePage
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    public MainPageViewModel ViewModel { get; set; }
}

In order to achieve this, the BasePage logic needs to be a bit more complex, as it’s dealing with Reflection.

public class BasePage : Page
{
    private const string ViewModelPropertyName = "ViewModel";

    public BasePage()
    {
        DataContextChanged += (s, e) =>
        {
            SyncVmWithDataContext();
        };
    }

    public void SyncVmWithDataContext()
    {
        var vmProperty = this.GetType().GetProperty(ViewModelPropertyName);
        if (vmProperty != null)
        {
            vmProperty.SetMethod.Invoke(this, new[] { DataContext });
        }
    }
}

Another alternative is to make ViewModelPropertyName a public property that can be set in the XAML and use that property name to override the convention.

I hope you like this approach. All the code can be found on my github page at http://github.com/bendewey/ViewModelCompiledBinding

I search online and found a technique that included adding an index property to the model in question and then adding a converter to the DataTemplate. This wasn’t ideal because it only changed the contents of the list item, so depending on padding and content alignment you’d see gaps around the row background. I also didn’t like the code smell of modifying my data model objects with UI code.

What I wanted was to override the ListViewItem control’s Background property. You could use the ListView.ItemContainerStyle property and set the background using a style, but unfortunately the style’s context wouldn’t have any way of knowing the index of the item relative to the full source collection.

The option I used was to override a ListView control and create an AlternatingRowListView. Then by overriding the PrepareContainerForItemOverride, which is responsible for the setting up the ListViewItem control after it’s be created, you could modify the background color.

public class AlternatingRowListView : ListView
{

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = new SolidColorBrush(Colors.White);
            }
            else
            {
                listViewItem.Background = new SolidColorBrush(Colors.Gray);
            }
        }
        
    }
}

This code uses a method on the ListView base class called ItemFromContainer(), which simply gives you the index of the item relative to the ListView’s source collection. With that index you can set the ListViewItem’s Background color based on a modulus of 2. Although, using hard coded colors for the background doesn’t make it very usable across other designs. This is where dependency properties come into play. They allow the control to expose properties to XAML, where you can set them to any Brush or Resource you’d like. To do this you have to specify them as they are below and update your overridden method from before with these new properties.

public class AlternatingRowListView : ListView
{
	public static readonly DependencyProperty OddRowBackgroundProperty =
		DependencyProperty.Register("OddRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush OddRowBackground
	{
		get { return (Brush)GetValue(OddRowBackgroundProperty); }
		set { SetValue(OddRowBackgroundProperty, (Brush)value); }
	}
	
	public static readonly DependencyProperty EvenRowBackgroundProperty =
		DependencyProperty.Register("EvenRowBackground", typeof(Brush), typeof(AlternatingRowListView), null);
	public Brush EvenRowBackground
	{
		get { return (Brush)GetValue(EvenRowBackgroundProperty); }
		set { SetValue(EvenRowBackgroundProperty, (Brush)value); }
	}

    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var listViewItem = element as ListViewItem;
        if (listViewItem != null)
        {
            var index = IndexFromContainer(element);

            if ((index + 1) % 2 == 1)
            {
                listViewItem.Background = OddRowBackground;
            }
            else
            {
                listViewItem.Background = EvenRowBackground;
            }
        }
        
    }
}

After this, you can put it all together by using your new control in place of a ListView.

<Page
    x:Name="pageRoot"
    x:Class="ZebraStripedListView.ItemsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:ZebraStripedListView.Controls">

	<controls:AlternatingRowListView 
			ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
			OddRowBackground="{ThemeResource GridOddRowBackgroundBrush}" EvenRowBackground="{ThemeResource GridEvenRowBackgroundBrush}">
		<controls:AlternatingRowListView.ItemTemplate>
			<DataTemplate>
				<Grid>
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="300" />
						<ColumnDefinition Width="*" />
					</Grid.ColumnDefinitions>
					<TextBlock Text="{Binding Title}" Grid.Column="0" />
					<TextBlock Text="{Binding Subtitle}" Grid.Column="1" />
				</Grid>
			</DataTemplate>
		</controls:AlternatingRowListView.ItemTemplate>
	</controls:AlternatingRowListView>
</Page>

This is what the final result looks like for my sample code.

I’ve uploaded the full code to my GitHub account at http://github.com/bendewey/ZebraStripedListView. I hope this is useful to other who encounter a similar scenario.

As with all my demos here at VSLive the all the code is available on GitHub at https://github.com/bendewey/XamlAntiPatterns, you can also see all my slides here.

Thanks again to anyone who came out. I’d love to hear from you if you have any comments about my session or if you are writing apps. Feel free to add a comment here or reach out to me directly.

Windows Phone 8.1

Microsoft announced their latest version of Windows Phone, version 8.1, this new version is due out this summer and is compatible with all existing Windows Phone 8.0 devices. In addition manufacturers, such as Nokia, are coming out with new devices tailored to Windows Phone 8.1.

Regarding Windows Phone 8.1 the new features include Cortana, a new Notification Center, Enterprise VPN and Workplace features, among many new apps and app updates. Cortana looks really cool, she’s far more than ‘Siri for the Windows Phone’ as she’s been called. I like how she mimics a personal assistant and offers something unique in this world of privacy concerns, where she opens her ‘notebook’ and provides transparency about what information she’s tracking about you, such as likes, favorite places, and favorite people, which she calls your inner circle. You can also modify any of this information if it’s incorrect.

The Notification center is huge, it allows apps of your choice to provide a higher level of feedback to the user regarding content. I’m also excited about the Workplace features because it makes Windows Phone an enterprise ready device, not that it wasn’t already, but the new features, such as VPN, cover many more use cases that come up in larger organizations. Windows Phone has also been updated with all the power of Internet Explorer (IE) 11, including in-private browsing on the phone.

While Windows Phone 8.0 runs on the Windows Runtime (WinRT), there were many APIs, suchs as the camera APIs which were different between Windows and Windows Phone. Windows Phone 8.1 includes developer changes to make the APIs consistent and created a new style of WinRT apps for Windows Phone called Universal Apps.

Windows 8.1 Update

Windows 8.1 also received an update, which is already available on MSDN. This update includes visual updates, such as a Windows Store apps surfacing on the task bar, better mouse and keyboard support within Windows Store apps, and the addition of a power and search button on the start screen.

There is also new pricing around enterprise side loading of apps which makes it more economical to deploy internal Windows 8 apps. The final feature they announces was a feature called Enterprise mode within IE 11, which enables legacy functionality so those internal sites can still be compatible.

I’ve always loved the Windows platform and these updates make it that much more compelling. I really encourage people to take a non-biased look at Windows 8 if they haven’t done so already. They also leaked some secrets about unreleased features like a desktop Start Menu, yes menu, not Start Screen, and Windows Store apps running on the desktop in resizable windows. It’s nice to see Microsoft showing their hand to the community and being transparent.

Universal Apps

It’s been rumored that Microsoft was converging Windows Phone and Windows Store apps. At //build they announce a new app development template that makes this much easier. These new templates work for both .NET and JavaScript for new apps and, as they showed in the keynote, existing apps.

With the convergence of the Windows Phone APIs and Windows Runtime APIs Universal apps for Windows Phone and Store can share basically all of your app code and view code. But, it doesn’t stop there. Microsoft is using this Universal app template with the help of Xamarin to create apps with shared .NET code for iOS and Andriod as well.

While day 1 came many highly anticipated announcements about Mobile and Windows, I was expecting most of them because I follow that space so closely. The day 2 keynote offered new announcements that I wasn’t expecting.

Azure

There are so many updates around Azure that it’s hard to keep up. It’s hard not to be compelled by all the amazing Platform as a Service (PaaS) tools that are available for Azure. The big announcement for Azure was a preview version of a brand new portal, which surfaces pricing and monitoring right up front. Additionally, we have new .NET support for Mobile Services, a new traffic manager, and Web Jobs for Azure websites, some of which have been in preview mode and announced earlier. Brady Gaster and Joe Levy also announced, in their session, the deployment of a new Microsoft Azure Management Libraries (MAML) which provide a simplified .NET wrapper over the REST management services for Azure.

VS 2013 Update 2 RC

Visual Studio 2013 also received an update, currently in RC. This update comes with numerous Azure integration improvements to the Server Explorer toolbox, like the ability to create a VM directly from Visual Studio, or create an Azure website directly from the file new website wizard. Visual Studio 2013 Update 2 also adds all the juicy new Windows Phone 8.1 and Universal App Templates. Finally a really cool feature, which they also showed in the keynote, is the ability to sync your development environment with the F12 debugger tools of your browser (not just IE). This feature is powered by BrowserLink. Scott Hanselman and Scott Hunter have a great session describing these new features.

TypeScript

While TypeScript wasn’t really mentioned in either keynote, Anders Hejlsberg announced the version 1.0 release of Typescript in his session. Unfortunately I haven’t had a chance to use TypeScript much, but I’m following it closely and looking forward to an opportunity use it.

Roslyn

You can’t mention Anders Hejlsberg without mentioning C#, and the big announcement during the day 2 keynote was the open sourcing of the Rosyln project and the creation of the .NET Foundation. The C# compiler has been around for quite some time and, as you can imagine, the codebase has some technical debt that has made some new features extremely complex. Additionally most compilers to date are black boxes. For these reasons, they decided to re-write the C# compiler as a service with an open API. This makes the numerous syntax features from the backlog super easy, but also enables third party and even in house creation of custom refactorings and behaviors extremely easy to write.

While Roslyn itself it awesome, open sourcing it means that the community can closely watch any changes and discussions and even supply patches. They are even posting their internal meeting minutes for their design sessions. Follow it for yourself at http://roslyn.codeplex.com

Project N

There was another major announcement that wasn’t announced at the keynotes and that is ‘Project N’. It is a new preview for a project also known as .NET Native, which increases performance for .NET apps by running them thru a native compiler to pre-JIT and optimize .NET code into pure native code. Currently this project is in preview and supports C# for Windows Store apps on ARM and x64 only, but they’ve discussed expanding this in the future. See the FAQ for more information.

This year’s //build conference was really amazing for me. In addition to the numerous updates mentioned above, this year was a great networking experience for me personally. Since I was awarded my MVP this year, I’ve had a wonderful opportunity to meet so many new people, albeit virtually. The conference gave me an opportunity to meet these people face-to-face. It was also nice to see all the Microsoft folks. Overall a great event lots of content to follow up on, thankfully it’s all recorded online at http://channel9.msdn.com/Events/Build/2014.

ThemeResource

When you create a new Windows 8.1 app it behooves you use the built-in brushes and styles. This keeps your app consistent with the Windows experience, and also manages cases where users change their underlying system preferences for things like accessibility. Microsoft provides a reference of the XAML theme resources. To use them in Windows 8 you would just use a StaticResource.

<Border Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Border>

While StaticResource still works, with Windows 8.1, you can use the new ThemeResource markup extension for these references.

<Border Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</Border>

This allows the resources to be updated dynamically whenever changes to the theme occur, previously this required an application restart. With the dynamic themes comes a broader reach for theme changing. To allow this, Microsoft added a RequestedTheme property to the FrameworkElement object. This allows you to change themes within the context of any element, even nested.

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock Text="Default Theme" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
    <StackPanel RequestedTheme="Light" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Light Theme" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
        <StackPanel x:Name="DarkContainer" RequestedTheme="Dark" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="DarkTheme" Foreground="{ThemeResource ApplicationForegroundThemeBrush}" />
        </StackPanel>
    </StackPanel>
</StackPanel>

You can also change these values at runtime in code.

DarkContainer.RequestedTheme = ElementTheme.Dark;

Overrides with ThemeDictionaries

You can override any of these existing styles by specifying a ResourceDictionary as part of the ThemeDictionaries. Each dictionary must specify a key with one of the following names:

• Default
• Dark
• Light
• HighContrast
• HighContrastBlack
• HighContrastWhite
• HighContrastCustom

The ThemeDictionaries documentation provides all the rules, but the HighContrast key is the default for all high contrast options and the Default key is the fallback when a theme name that cannot be located. Inside the dictionary you can specify any resource override from the full list of theme resource keys.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="Magenta" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

There is one caveat that I notice in my samples, if you specify an ApplicationPageBackgroundThemeBrush, it’s best to specify the value for all themes, in my case Dark and Light. Until I made this change the Light theme wasn’t using the default white background brush I was looking for. This only seems to be an issue with the page background key, but this code fixed it

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="Magenta" />
    </ResourceDictionary>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#FFFFFFFF" />
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>