Sunday, January 27, 2013

WPF Binding to a Static Instance

This tutorial will guide you how to bind in a static property of a class in a two directional way in WPF.

Two way Binding in a Static Property

In order for our class StaticBinder to participates in the two directional binding, we should implement the IPropertyNotifyChanged event. In our case, we are requiring you to read our pre-requisite blog so you will fully understand the implementation.

List of pre-requisite blogs.

And here we are expecting that you're finish reading the pre-requisite blogs above.

Now let's start with our explanation.

We need to modify our existing implementation of StaticBinder class and force inherit from the BaseObject class. With this, the StaticBinder will also inherit the implementation of the super class PropertyNotifier that implements the IPropertyNotifier interface.

In each property of the StaticBinder class, we should use the BaseObject GetValue/SetValue accessor so it will notify the listener on every property value changed. Please note that you need not to implement each method in a static way. In our case, you must remove the static keyword in each property.

Now, last thing to do within StaticBinder class is to declare an additional static property named Instance. This approach is a single-ton approach for the StaticBinder class. This new property named Instance will participate in WPF binding. See below our new class implementation.

public class StaticBinder : BaseObject
{
    private static StaticBinder __instance = null;

    static StaticBinder()
    {
        __instance = new StaticBinder();
    }

    public StaticBinder()
    {
        MSG_Cancel = "Welcome";
        MSG_OK = "OK";
        MSG_Welcome = string.Format("Welcome {0}!", "WPF Binding");
    }

    public string MSG_Cancel
    {
        get { return base.GetValue<string>("MSG_Cancel"); }
        set { base.SetValue("MSG_Cancel", value); }
    }

    public string MSG_OK
    {
        get { return base.GetValue<string>("MSG_OK"); }
        set { base.SetValue("MSG_OK", value); }
    }

    public string MSG_Welcome
    {
        get { return base.GetValue<string>("MSG_Welcome"); }
        set { base.SetValue("MSG_Welcome", value); }
    }

    public static StaticBinder Instance
    {
        get { return __instance; }
    }
}

Binding in XAML

Now, if we are binding a static property in XAML, we need to use the namespace referencing and direct call the static property of that instance. Additionally, you can bind directly to the property of that shared instance which is in our case it is the StaticBinder class.

With the help of the Binding (x:Static) keyword, the trick will be addressed. See below our codes in the XAML in yellow background.

<Window x:Class="CodesDirectory.WIN_StaticBinding"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WIN Static Binding" Height="300" Width="300"
        xmlns:classes="clr-namespace:CodesDirectory.Classes"
        WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
    <Grid Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Label Grid.Row="0"
               Content="{Binding Source={x:Static classes:StaticBinder.Instance}, Path=MSG_Welcome}"></Label>
        <StackPanel Grid.Row="1" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button Name="okayButton"
                    Click="okayButton_Click" Content="{Binding Source={x:Static classes:StaticBinder.Instance}, Path=MSG_OK}"
                    Width="100"
                    Margin="5"></Button>
            <Button Name="cancelButton"
                    Content="{Binding Source={x:Static classes:StaticBinder.Instance}, Path=MSG_Cancel}"
                    Width="100"
                    Margin="5"></Button>
        </StackPanel>
    </Grid>
</Window>

For you to check the actual two-dimensional binding, please follow the code behind implementation below.

public partial class WIN_StaticBinding : Window
{
    public WIN_StaticBinding()
    {
        InitializeComponent();
    }

    private void okayButton_Click(object sender, RoutedEventArgs e)
    {
        Classes.StaticBinder.Instance.MSG_OK = "Okay";
    }
}

You will notice that upon click of the OK button, the changes will then reflect to the UI.

And that's all about it. You just finished reading this blog.

No comments:

Post a Comment

Place your comments and ideas