Realize .NET Potential : WPF

Errata: WPF Recipes in C# 2008 4-3. Add Properties to a User Control

zhanbos — Mon, 26 Jan 2009 03:48:00 GMT

I am an avid reader. We can always learn something new in reading a new book. But no book can be perfect, esp. technical books on new technologies. So I would take notes when I noticed some inaccurate, misgudied or incorrect discussions or examples. And starting from this year, I will share some notes in my blog.

In WPF Recipes in C# 2008, chapter 4, example 3: Add Properties to a User Control, it demostrates how to use DependencyProperty to interact with a custom PageNumberControl. PageNumberControl defines two Dependency Properties: Current and Total. And the definition for Total looks like this:

        public int Total
        {
            get
            {
                return (int) GetValue(TotalProperty);
            }
            set
            {
                if(value >= Current
                   && value >= 0)
                {
                    SetValue(TotalProperty, value);
                }
            }
        }

        public static readonly DependencyProperty TotalProperty =
            DependencyProperty.Register("Total",
                                        typeof(int),
                                        typeof(PageNumberControl),
                                        new PropertyMetadata(0));

In CLR property Total setter, the code above does some sanity check: (1) Total value should not be negative. (2) Total value should not be smaller than Current value. Such constraint makes sense, but we should not place the check in CLR property setter.

That is because CLR property should always be a thin wrapper of the underlying Dependency Property. Users can always set TotalProperty to any int value with such code pageNumberControl1.SetValue(PageNumberControl.TotalProperty, -100); and the CLR property setter is not involved at all.

What's more, WPF features such as data binding, style and animations work on Dependency Property, rather than CLR property.

The fix is to use ValidValueCallback (for "Total value should not be negative number") and CoerceValueCallback (for "Total value should not be smaller than Current value") when we register DependencyProperty.

The same applies to Current property.

(This posting is provided "AS IS" with no warranties, and confers no rights. Use of included script samples are subject to the terms specified at http://www.microsoft.com/info/cpyright.htm)

Locally set value takes precedence over Style value

zhanbos — Fri, 22 Apr 2005 11:31:00 GMT

If a DependencyProperty’s value is locally set, this value takes precedence over whatever value specified in Style. For example, the only button’s Background is LightGreen instead of LightBlue:

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" >
    <Grid.Resources>
        <Style>
            <Button Background="LightBlue"/>
        </Style>
    </Grid.Resources>
    <Button Content="Demo" Background="LightGreen"/>
</Grid>

The first example is indeed very obvious. Now take a look at the next example, in which PropertyTrigger within Style is used. When you move mouse over the only button, what will be its Background?

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005" >
    <Grid.Resources>
        <Style>
            <Button />
            <Style.VisualTriggers>
                <PropertyTrigger Property="IsMouseOver" Value="True">
                    <Set PropertyPath="Background" Value="LightBlue"/>
                </PropertyTrigger>
            </Style.VisualTriggers>
        </Style>
    </Grid.Resources>
    <Button Content="Demo" Background="LightGreen"/>
</Grid>

Because locally set value takes precedence over style value, the Background remains LightGreen when IsMouseOver is true.

To see the effect of PropertyTrigger, move Background="LightGreen" into Style definition.

(This posting is provided "AS IS" with no warranties, and confers no rights. Use of included script samples are subject to the terms specified at http://www.microsoft.com/info/cpyright.htm)

CLR Event vs. Routed Event: Two Demo Applications

zhanbos — Sat, 02 Apr 2005 11:10:00 GMT

As you may have already known, you can define and use Dependency Property as well as CLR Property in Avalon. (If you want to know more about Avalon’s property system, stay tuned in this blog.) Same thing can be said about CLR Event and Routed Event. By supporting routed event in Avalon, the parent element can participate in events sourcing from its child elements. This blog post presents two applications to show the differences between CLR event and RoutedEvent.

The first application is a Windows Form 2.0 application. WinForm only uses CLR event. System.Windows.Forms.Control.MouseMove event, for example, occurs when the mouse pointer is moved over the control. That control can choose to handle it by registering an event handler. But if it does not handle it, its parent control will not be notified that MouseMove event occurs for one of its child controls.

Compile the complete WinForm code below into a WinExe application and run it. Event handler outerPanel_MouseMove prints out the timestamp for each MouseMove event received by outerPanel(Green area). As you can see, when the mouse is moved into innerPanel (Blue area), event handler is not called. That makes sense for CLR event since the event now occurs for innerPanel instead of outerPanel.

Of course, to respond to MouseMove on innerPanel as well, you can hook up event handler on innerPanel itself. You do not need to do that in Avalon with Routed Event, though.

using System;

using System.Collections.Generic;

using System.Windows.Forms;

namespace ZhanboBlog.Demo

{

static class Program

{

[STAThread]

static void Main()

{

Application.EnableVisualStyles();

Application.Run(new DemoForm());

}

internal class DemoForm : Form

{

internal DemoForm()

{

InitializeComponent();

}

private void InitializeComponent()

{

this.Text = "Zhanbo Blog Demo 01";

this.Width = 600;

this.Height = 600;

info = new Label();

info.Text = "Blog Demo";

info.Font = new System.Drawing.Font("Arial", 20);

info.Dock = DockStyle.Top;

info.AutoEllipsis = true;

info.Height = 50;

outerPanel = new Panel();

outerPanel.BackColor = System.Drawing.Color.Green;

outerPanel.MouseMove += new MouseEventHandler(outerPanel_MouseMove);

outerPanel.Dock = DockStyle.Fill;

innerPanel = new Panel();

innerPanel.Width = 100;

innerPanel.Height = 100;

innerPanel.Left = 50;

innerPanel.Top = 100;

innerPanel.BackColor = System.Drawing.Color.Blue;

this.Controls.Add(info);

this.Controls.Add(outerPanel);

this.outerPanel.Controls.Add(innerPanel);

}

void outerPanel_MouseMove(object sender, MouseEventArgs e)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder();

sb.Append("MouseMove at ");

sb.Append(System.DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss:ffff tt"));

info.Text = sb.ToString();

}

private Label info;

private Panel outerPanel;

private Panel innerPanel;

}

In Avalon, MouseMove is a Routed Event. To be exact, it is a RoutedEvent with Bubble routing strategy. It means that MouseMove event moves up from source element to root element. In the previous demo, if RoutedEvent were used, event handler would still be called even if mouse is moving into innerPanel (Blue area). That is what you are seeing in the Avalon application below.

Create an Avalon application, edit Window1.xaml to be:

<Window x:Class="AvalonApplication1.Window1"

xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"

Text="Zhanbo Blog Demo 01"

Width="600"

Height="600">

<TextBlock x:ID="info"

TextContent="Blog Demo"

FontFamily="Arial"

FontSize="20"

DockPanel.Dock="Top"/>

<Canvas x:ID="outerCanvas"

Width="200"

Height="200"

Background="Green"

MouseMove="CanvasMouseMove"

DockPanel.Dock="Top"

<Canvas x:ID="innerCanvas" Width="100" Height="100"

Canvas.Top="50" Canvas.Left="50"

Background="Blue" />

</Canvas>

</DockPanel>

</Window>

In the code behind, add the event handler as follows:

void CanvasMouseMove(object sender, System.Windows.Input.MouseEventArgs e)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder();

sb.Append("MouseMove at ");

sb.Append(System.DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss:ffff tt"));
info.TextContent = sb.ToString();

}

Please note that MouseEventArgs defined by WinForm and Avalon are under different namespaces and with different APIs.

By running this application, you can clearly see that outerCanvas receives MouseMove event when it occurs directly on itself and indirectly on its child control, which is innerCanvas. We can differentiate these two scenarios by checking MouseEventArgs’ Source property. Simply speaking, Source property refers to the object that raised the event. In the above demo application, Source can be either outerCanvas or innerCanvas. Let’s put it into use by changing the event handler in code behind:

void CanvasMouseMove(object sender, System.Windows.Input.MouseEventArgs e)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder();

sb.Append("MouseMove at ");

sb.Append(System.DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss:ffff tt"));

if (e.Source == innerCanvas)

{

sb.Append(" within inner canvas");

}

else

{

sb.Append(" within canvas");

}

info.TextContent = sb.ToString();

}

I end this post with a question for my reader. If you want to reset info text back to initial string (Zhanbo Blog Demo 01) when the mouse left canvas area (i.e. when there is no MouseMove event to handle), I should handle a different event MouseLeave on outerCanvas. Let’s edit the XAML to add the attribute:

<Canvas x:ID="outerCanvas"

Width="200"

Height="200"

Background="Green"

MouseMove="CanvasMouseMove"

MouseLeave="CanvasMouseLeave"

DockPanel.Dock="Top"

Now, what to add inside this new event handler? The shorter, the better. Of course, it has to be correct first.

void CanvasMouseLeave(object sender, MouseEventArgs e)

{

//Question for my reader

}

(This posting is provided "AS IS" with no warranties, and confers no rights. Use of included script samples are subject to the terms specified at http://www.microsoft.com/info/cpyright.htm)