DataGrid style for MahApps.Metro - Update

I've been making some updates to my DataGrid style to make it more like the DataGrid in Windows Azure.

MahApps.Metro DataGrid Style

Check out the pull request to MahApps.Metro or my branch on GitHub.

DataGrid style for MahApps.Metro

I've just been working on a DataGrid style for MahApps.Metro. Rather than post all the code here, check out the code on my GitHub branch.

MahApps.Metro DataGrid Style

I've also submitted a pull request to MahApps.Metro so maybe it can make its way into the framework.

Data Binding a Static Resource in WPF

I was recently trying to create a data template for data binding a list of objects, each one defining an icon to display from MahApps.Metro.Resources Icons.xaml. I found a solution by Pedro Sampaio to extend StaticResourceExtension to make it bindable, but I was having some issues such as not being able to dynamically change the colour of the icons, or use the same icon multiple times.

I decided to go for a simpler solution and create a converter which would convert a string, being the resource key, to the icon's geometry. The converter has to make some assumptions to the location of the Icons.xaml file and the structure of its contents. The converter caches the icons geometry once accessed.

	using System;
	using System.Collections.Generic;
	using System.ComponentModel;
	using System.Windows;
	using System.Windows.Controls;
	using System.Windows.Data;
	using System.Windows.Media;
	using System.Windows.Shapes;
	namespace MyApp.Wpf
	{
	public class StringToIconConverter : IValueConverter
	{
	private static readonly ResourceDictionary _iconResource;
	private static readonly Dictionary<string, Geometry> _pathData;
	static StringToIconConverter()
	{
	if (!DesignerProperties.GetIsInDesignMode(new DependencyObject()))
	{
	_iconResource = new ResourceDictionary
	{
	Source = new Uri("pack://application:,,,/Resources/Icons.xaml")
	};
	_pathData = new Dictionary<string, Geometry>();
	}
	}
	public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
	{
	var resourceKey = value as string;
	return string.IsNullOrWhiteSpace(resourceKey) ? null : GetIconPathData(resourceKey);
	}
	public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
	{
	throw new NotImplementedException();
	}
	/// <summary>
	/// Try and get the icon path data for the given resource key.
	/// </summary>
	/// <remarks>
	/// This method assumes Icons.xaml from MahApps.Metro is used, and that
	/// the icon resource is a Canvas containing a Path.
	/// </remarks>
	/// <param name="resourceKey">The resource key for the icon.</param>
	/// <returns>the icon path data if found, otherwise null.</returns>
	private static object GetIconPathData(string resourceKey)
	{
	if (!DesignerProperties.GetIsInDesignMode(new DependencyObject()))
	{
	Geometry iconPathData;
	if (!_pathData.TryGetValue(resourceKey, out iconPathData))
	{
	Canvas iconCanvas = _iconResource[resourceKey] as Canvas;
	if (iconCanvas != null)
	{
	Path iconPath = iconCanvas.Children.Count > 0 ? iconCanvas.Children[0] as Path : null;
	if (iconPath != null)
	{
	iconPathData = iconPath.Data;
	}
	}
	_pathData.Add(resourceKey, iconPathData);
	}
	return iconPathData;
	}
	return null;
	}
	}
	}

view raw StringToIconConverter.cs hosted with ❤ by GitHub

The objects being databound have a string property for the resource key of the icon to use, and this is bound to the a Path's Data property in the data template, which allows the Fill property to be changed dynamically.

	<DataTemplate x:Key="MyDataTemplate">
	<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="40"/>
	</Grid.ColumnDefinitions>
	<Path Data="{Binding Icon, Converter={StaticResource stringToIcon}}" Stretch="Uniform" Width="28" Height="28"
	Fill="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem, Mode=FindAncestor}, Path=Foreground}" />
	</Grid>
	</DataTemplate>

view raw StringToIconConverterExample.xaml hosted with ❤ by GitHub

CodePlex / Azure Metro TabItem Style for WPF

I've been working on a TabItem style for WPF to combine both the tab style on the CodePlex website and Windows Azure website.

CodePlex Tabs

Azure Tabs

The main difference apart from the inclusion of the icons on the Azure tabs is the mouse over style. On CodePlex when you mouse over a tab it colours in the bottom border. On Azure the coloured border is always there, and hovering the mouse fills the tab in blue.

I have gone for the mouse over style from Azure with the tabs from CodePlex. I have also made a replica of the navigation tabs at the top of the Azure page.

WPF Style

As I have been using MahApps.Metro for my styles, my style uses some of their resources, but could easily be updated to work standalone. Simply add the following styles to a ResourceDictionary to use them. The border colour of the tabs can be changed by modifying the BorderBrush property.

	<Style x:Key="AzureTabItem" TargetType="{x:Type TabItem}">
	<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="TabItem">
	<StackPanel>
	<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
	Padding="12,2,24,2"
	BorderThickness="0,0,0,4"
	Margin="2,2,2,0"
	SnapsToDevicePixels="True">
	<Border.Style>
	<Style TargetType="Border">
	<Setter Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource Gray5}"/>
	</Setter.Value>
	</Setter>
	</Style>
	</Border.Style>
	<Label x:Name="root" FontSize="15">
	<Label.Style>
	<Style TargetType="Label">
	<Setter Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource BlackColor}" />
	</Setter.Value>
	</Setter>
	</Style>
	</Label.Style>
	<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
	</Label>
	</Border>
	<Canvas Height="10" Width="20" x:Name="arrow" Margin="25,0,0,0"
	HorizontalAlignment="Left" SnapsToDevicePixels="True">
	<Path Data="M 0 0 H 20 L 10 10 Z"
	StrokeThickness="0"
	Fill="{DynamicResource AccentColorBrush}"/>
	</Canvas>
	</StackPanel>
	<ControlTemplate.Triggers>
	<Trigger Property="IsSelected" Value="true">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource WhiteColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="BorderBrush">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	<Setter TargetName="arrow" Property="Visibility" Value="Visible"/>
	</Trigger>
	<Trigger Property="IsSelected" Value="false">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource BlackColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="arrow" Property="Visibility" Value="Hidden"/>
	</Trigger>
	<Trigger Property="IsMouseOver" Value="True">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource WhiteColor}" />
	</Setter.Value>
	</Setter>
	<Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"></Setter>
	<Setter TargetName="border" Property="Background">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}"/>
	</Setter.Value>
	</Setter>
	</Trigger>
	</ControlTemplate.Triggers>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>

view raw AzureTabItem.xaml hosted with ❤ by GitHub

	<Style TargetType="TabItem" x:Key="AzureNavTabItem">
	<Setter Property="FocusVisualStyle" Value="{x:Null}" />
	<Setter Property="IsTabStop" Value="False" />
	<Setter Property="BorderThickness" Value="0" />
	<Setter Property="Margin" Value="0,2,20,0"/>
	<Setter Property="Padding" Value="0"/>
	<Setter Property="HorizontalContentAlignment" Value="Left" />
	<Setter Property="VerticalContentAlignment" Value="Stretch" />
	<Setter Property="MinWidth" Value="5" />
	<Setter Property="MinHeight" Value="5" />
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="TabItem">
	<Label x:Name="root" FontSize="15" Margin="{TemplateBinding Margin}"
	FontWeight="SemiBold">
	<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
	</Label>
	<ControlTemplate.Triggers>
	<Trigger Property="IsSelected" Value="true">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}" />
	</Setter.Value>
	</Setter>
	</Trigger>
	<Trigger Property="IsSelected" Value="false">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource Gray2}" />
	</Setter.Value>
	</Setter>
	</Trigger>
	<Trigger SourceName="root" Property="IsMouseOver" Value="True">
	<Setter TargetName="root" Property="Foreground">
	<Setter.Value>
	<SolidColorBrush Color="{DynamicResource AccentColor}" />
	</Setter.Value>
	</Setter>
	</Trigger>
	</ControlTemplate.Triggers>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>

view raw AzureNavTabItem.xaml hosted with ❤ by GitHub

An example of using the styles:

	<Grid>
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	</Grid.RowDefinitions>
	<TabControl Grid.Row="0" Padding="0">
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="HOME">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="PAGE INFO"></TabItem>
	<TabItem Header="CHANGE HISTORY"></TabItem>
	</TabControl>
	</TabItem>
	<TabItem Header="SOURCE CODE" BorderBrush="Red">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="FILES"></TabItem>
	<TabItem Header="HISTORY"></TabItem>
	<TabItem Header="FORKS"></TabItem>
	</TabControl>
	</TabItem>
	<TabItem Header="DOCUMENTATION" BorderBrush="LightGreen">
	<TabControl>
	<TabControl.Resources>
	<Style TargetType="TabItem" BasedOn="{StaticResource AzureNavTabItem}"/>
	</TabControl.Resources>
	<TabItem Header="ITEM 1"></TabItem>
	<TabItem Header="ITEM 2"></TabItem>
	</TabControl>
	</TabItem>
	</TabControl>
	</Grid>

view raw AzureTabItemExample.xaml hosted with ❤ by GitHub

Introduction

I decided to start a blog to share some of my findings to the world. I started my job as a .NET developer back in September 2008 and have often found the solution to my problems on other developer's blogs, or sites such as StackOverflow.

I'm currently working on a .NET 4.5 WPF application, using Caliburn.Micro for the MVVM framework, and MahApps.Metro for the styling. I'll be sharing anything useful during my development.