X-SOFT: November 2009

Saturday, November 28, 2009

WPF Command

In WPF Skinning, I was using old school MenuItem_Click event handling. WPF has a more powerful commanding system. To implement the same functionality with WPF command, first create a command in Window1:

public static readonly RoutedCommand ChangeSkin = new RoutedCommand(
"ChangeSkin", typeof(Window1));

Bind the menu items to be sources of this command. Each binds to the same command with a different parameter. Now MenuItem_Click event handling can be removed and IsChecked binding can be one-way. I’ll use the command to change skin and only need menu items to display correct check marks.

The command will bubble up until being handled. Create a command binding at the main window:

<Window.CommandBindings>
<CommandBinding Command="local:Window1.ChangeSkin" Executed="ChangeSkin_Executed" />
</Window.CommandBindings>

Fill the command handling code:

private void ChangeSkin_Executed(object sender, ExecutedRoutedEventArgs e)
{
Skin = (string)e.Parameter;
e.Handled = true;
}

Now this should work the same as previous version.

The menu items do not have keyboard short-cuts (KeyGestures) yet. To make keyboard inputs invoke this command, add key bindings:

<Window.InputBindings>
    <KeyBinding Command="local:Window1.ChangeSkin" CommandParameter="Default"
               Key="D" Modifiers="Ctrl" />
    <KeyBinding Command="local:Window1.ChangeSkin" CommandParameter="Green"
               Key="G" Modifiers="Ctrl" />
    <KeyBinding Command="local:Window1.ChangeSkin" CommandParameter="Red"
               Key="R" Modifiers="Ctrl" />
</Window.InputBindings>

This makes the key gestures work, but they don’t show up in the menu items. They need to be specified in menu items, e.g.:

Alternatively, I can create 3 different commands and omit the above InputGestureText and even Header text:

public static readonly RoutedCommand DefaultSkin = new RoutedUICommand(
    "_Default", "Default", typeof(Window1),
    new InputGestureCollection(
        new KeyGesture[] { new KeyGesture(Key.D, ModifierKeys.Control) }));

public static readonly RoutedCommand GreenSkin = new RoutedUICommand(
    "_Green", "Green", typeof(Window1),
    new InputGestureCollection(
        new KeyGesture[] { new KeyGesture(Key.G, ModifierKeys.Control) }));

public static readonly RoutedCommand RedSkin = new RoutedUICommand(
    "_Red", "Red", typeof(Window1),
    new InputGestureCollection(
        new KeyGesture[] { new KeyGesture(Key.R, ModifierKeys.Control) }));

private void ChangeSkin_Executed(object sender, ExecutedRoutedEventArgs e)
{
    Skin = ((RoutedUICommand)e.Command).Name;
    e.Handled = true;
}

This time UI xaml is much cleaner:

<Window.CommandBindings>
    <CommandBinding Command="local:Window1.DefaultSkin" Executed="ChangeSkin_Executed" />
    <CommandBinding Command="local:Window1.GreenSkin" Executed="ChangeSkin_Executed" />
    <CommandBinding Command="local:Window1.RedSkin" Executed="ChangeSkin_Executed" />
</Window.CommandBindings>

<DockPanel x:Name="framePanel" LastChildFill="True">

    <Menu IsMainMenu="True" DockPanel.Dock="Top">
        <MenuItem Header="_Skins">
            <MenuItem Command="local:Window1.DefaultSkin"
                     IsChecked="{Binding Mode=OneWay, ElementName=mainWindow, Path=Skin,
                           Converter={StaticResource skinEquals}, ConverterParameter=Default}"/>
            <MenuItem Command="local:Window1.GreenSkin"
                     IsChecked="{Binding Mode=OneWay, ElementName=mainWindow, Path=Skin,
                           Converter={StaticResource skinEquals}, ConverterParameter=Green}"/>
            <MenuItem Command="local:Window1.RedSkin"
                     IsChecked="{Binding Mode=OneWay, ElementName=mainWindow, Path=Skin,
                           Converter={StaticResource skinEquals}, ConverterParameter=Red}"/>
        </MenuItem>
    </Menu>

    <Grid Background="{DynamicResource bgbrush}">
        <TextBlock
           Text="{Binding ElementName=mainWindow, Path=Skin}"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"/>
    </Grid>
</DockPanel>

WPF Skinning

I was planning to learn about WPF skinning for this week. Here we go.

Create 3 sets of “skin” – WPF resource dictionaries:

Default:

Green:

Red:

In App.xaml, use the default skin:

<Application.Resources>

    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Skins\Default.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

</Application.Resources>

I want to use a menu to switch the skins, and put a check mark at the current skin. This sounds like a property binding. So create a dependency property on the main window class and perform the skin switching when property changed:

public static readonly DependencyProperty SkinProperty = DependencyProperty.Register(
    "Skin", typeof(string), typeof(Window1), new PropertyMetadata("Default", OnSkinChanged));

public string Skin
{
    get { return (string)GetValue(SkinProperty); }
    set { SetValue(SkinProperty, value); }
}

private static void OnSkinChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
    string skin = e.NewValue as string;
    ResourceDictionary res = (ResourceDictionary)Application.LoadComponent(
        new Uri(string.Format(@"Skins\{0}.xaml", skin), UriKind.Relative));
    Application.Current.Resources = res;
}

I want a menu item to be checked if the current Skin matches the menu item. Looks like I need a value converter check Equals… I can’t find an existing one. On the other hand, when a menu item becomes checked, I want to update the Skin property. I end up creating a value converter:

public class SkinEqualsConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter,
        CultureInfo culture)
    {
        return object.Equals(value, parameter);
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        CultureInfo culture)
    {
        return (bool)value ? parameter : DependencyProperty.UnsetValue;
    }

    #endregion
}

Now if a menu item is clicked, we only need to set its IsChecked to true and let data binding update the Skin. Setting MenuItem.IsCheckable to true almost satisfies my requirements. When clicked and IsChecked is turned on, everything works. However, I can’t prevent a user to click it again and uncheck the menu item. In that case Skin is not changed, but the check mark is gone. Finally I decide to handle the click manually:

private void SkinItem_Click(object sender, RoutedEventArgs e)
{
MenuItem menu = (MenuItem)sender;
menu.IsChecked = true;
}

The main window xaml is like the following. When a menu item is clicked, the above handler would turn on IsChecked, the binding will invoke the converter to get the parameter skin name, and bind that name to the above Skin property, causing the skin switch. Other menu items will uncheck because the binding invokes the converter and check if the current Skin equals to the converter parameter skin. In the UI I use DynamicResource to refer to skin resources so that UI refreshes dynamically when skin resources are replaced at runtime.

Friday, November 27, 2009

WPF Data Binding: Objects and XML Data

ObjectDataProvider can be used to create new objects directly in xaml. However, typically objects are created in code and in such cases the binding needs to be set in code. Assuming we have these objects:

class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }

    public static Person[] Friends = new Person[] {
        new Person() { FirstName="Michael", LastName="Xu", Age=9 },
        new Person() { FirstName="Michael", LastName="Xu", Age=9 },
        new Person() { FirstName="Michael", LastName="Xu", Age=9 },
        new Person() { FirstName="Michael", LastName="Xu", Age=9 },
        new Person() { FirstName="Michael", LastName="Xu", Age=9 },
    };
}

To bind these to a ListView, create a ListView style with a data template:

<Window.Resources>

    <Style x:Key="personList" TargetType="{x:Type ListView}">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Path=FirstName}"
                                       FontWeight="Bold" />
                            <TextBlock Text="{Binding Path=LastName}"
                                       FontWeight="Bold" Margin="8,0,0,0" />
                        </StackPanel>
                        <TextBlock Text="{Binding Path=Age}" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Create a ListView control with the style:

Then create the binding in code:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
friendsListView.ItemsSource = Person.Friends;
}

To achieve similar results with an embeded XmlDataProvider, we can directly supply data and use XPath binding (note the xmlns).

Bind to a ListView:

X-SOFT

Saturday, November 28, 2009

WPF Command

WPF Skinning

Friday, November 27, 2009

WPF Data Binding: Objects and XML Data

Archive