C#

Using a delegate and Custom Appender with log4net to display live log text

Ryan Van Slooten — Fri, 30 Jan 2009 18:42:19 GMT

Recently I needed to display the text that was sent to log4net in a TextBox in a Form. It turns out this is very easy to do using a custom appender and the AppenderSkeleton. The custom appender uses a delegate to allow the host program to define a callback function to handle the log text as necessary.

1. Create a new custom appender class

I named my appender DelegateAppender because it needed to use a delegate to pass the text to the Form.

using log4net.Core;

namespace log4net.Appender
{
    public delegate void LogTextAppend(string text);

    public class DelegateAppender : log4net.Appender.AppenderSkeleton
    {
        private LogTextAppend logTextAppend;

        public LogTextAppend LogTextMethod
        {
            get { return logTextAppend; }
            set { logTextAppend = value; }
        }

        public DelegateAppender()
        {
            logTextAppend = EmptyAppend;
        }

        private void EmptyAppend(string text)
        {
            // Do nothing
        }

        protected override void Append(LoggingEvent loggingEvent)
        {
            if (logTextAppend != null)
                logTextAppend(RenderLoggingEvent(loggingEvent));
        }
    }
}

2. Create and assign the delegate to the appender

As far as I could tell, there was no easy way to specify the delegate to use in the configuration of the DelegateAppender. Therefore I added a simple method to assign the delegate in the Form to the DelegateAppender.

public void AddStatus(string message)
{
    textBoxStatus.AppendText(message);
}

private void InitializeLogging()
{
    bool initialized = false;

    if (!log.Logger.Repository.Configured)
    {
        log4net.Config.XmlConfigurator.Configure();
        textBoxStatus.AppendText("WARNING: log4net not automatically configured. " +
            "Check AssemblyInfo.cs for - " +
            "[assembly: log4net.Config.XmlConfigurator(Watch=true)]\r\n");
    }

    foreach (log4net.Appender.IAppender appender in log.Logger.Repository.GetAppenders())
    {
        if (appender.GetType() == typeof(log4net.Appender.DelegateAppender))
        {
            log4net.Appender.DelegateAppender delegateAppender = (log4net.Appender.DelegateAppender) appender;
            // .NET 2.0+
            delegateAppender.LogTextMethod = this.AddStatus;
            // .NET 1.1
            //delegateAppender.LogTextMethod = new log4net.Appender.LogTextAppend(this.AddStatus);
            initialized = true;
        }
    }

    if (!initialized)
    {
        textBoxStatus.AppendText("ERROR: Unable to add DelegateAppender to logging!\r\n");
    }
}

3. Add the log4net configuration to app.config and AssemblyInfo.cs

The code for AssemblyInfo.cs just tells log4net to configure itself and also watch for changes.

[assembly: log4net.Config.XmlConfigurator(Watch = true)]

The app.config is as follows:

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
 <configSections>
  <section
   name="log4net"
   type="log4net.Config.Log4NetConfigurationSectionHandler, log4net"
  />
 </configSections>

 <log4net>
  <logger name="log4netAppender.LogTestForm">
   <level value="ALL"/>
  </logger>
  <root>
   <level value="ALL" />
   <appender-ref ref="DelegateAppender" />
  </root>
  <appender
    name="DelegateAppender"
    type="log4net.Appender.DelegateAppender" >
   <layout type="log4net.Layout.PatternLayout">
    <param
     name="ConversionPattern"
     value="%m%n"
    />
   </layout>
  </appender>
 </log4net>
</configuration>

And there is a simple example of how to create a custom appender with log4net and hook it into an application.

Technorati tags: C#, log4net

Spinning Wait Symbol in Silverlight, Part4

Ryan Van Slooten — Thu, 06 Nov 2008 08:03:05 GMT

SpinningCursor4.zip (57 KB): Source (VS2008/Silverlight 2.0)

Series History

Part 4: Adding an animation (static XAML) to the slices (in Silverlight/C#)
Part 3: Adding curvature to the slices (in Silverlight/C#)
Part 2: Dynamically building slices (in Silverlight/C#)
Part 1: Treo-like wait symbol in static XAML

Introduction

The goal of these posts is to build a spinning cursor similar to the Mac OS X wait cursor through programmatic means in Silverlight. The cursor is still very rough and will undergo improvements progrressively. One of the reasons to build the cursor programmatically is to have more control over the output such as changing the number of slices or rotation or other parameters.

For this post, I added an animation to the rotation angle of the canvas which causes the slices to spin. I also added a simple navigation to the previous examples.

Download Silverlight

Step 1: Adding the Animation

In the previous post, I had one canvas for the background image as well as the slices. This time I realized I needed two canvases: one for the background and one for the slices. I needed separate canvases so that I could apply a rotation transform animation to the slices without affecting the background image. I used Expression Blend 2.0 sp1 and selected the "SpinningCanvas" and added an Storyboard named "SpinStoryboard". I then changed the Angle of the RotateTransform from 0 - 360° for the time range 0.0 - 2.0 sec.

This resulted in the following XAML:

<UserControl.Resources>
    <Storyboard x:Name="SpinStoryboard" RepeatBehavior="Forever">
        <DoubleAnimationUsingKeyFrames
            BeginTime="00:00:00"
            Storyboard.TargetName="SpinningCanvas"
            Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
            <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

Step 2: Starting the Animation

When the control is created or updated, the Update() method is called. I modified the method as follows:

void Update()
{
    SpinStoryboard.Stop();
    CursorCanvas.Children.Clear();
    SpinningCanvas.Children.Clear();
    CreateOutlineGuides(CursorCanvas);
    CreateBackground(CursorCanvas);
    CreateSlicePaths(SpinningCanvas);
    SpinStoryboard.Begin();
}

Step 3: Adding the Sample Navigation

I wanted to support future samples, so I used reflection to find all of the UserControls not including App or Page. I used a Dictionary<string, Type> to map the Type.Name with the Type in case I need it for future samples. I then dynamically created a button for each sample.

void Page_Loaded(object sender, RoutedEventArgs e)
{
    Assembly assembly = Assembly.GetExecutingAssembly();
    Type[] exportedTypes = assembly.GetExportedTypes();
    foreach (Type t in exportedTypes)
    {
        // Testing various inheritance detection methods
        bool isNotApp = (t != typeof(App));
        bool isNotSelf = (t != this.GetType());
        bool isUserControl = t.IsSubclassOf(typeof(UserControl));

        if (isNotApp && isNotSelf && isUserControl)
        {
            _implementedTypes.Add(t.Name, t);
        }
    }

    Button lastButton = null;

    // Sort the names of the UserControls to make more sense
    List<string> sortedKeys = new List<string>(_implementedTypes.Keys);
    sortedKeys.Sort();

    for (int index = 0; index < _implementedTypes.Count; ++index)
    {
        string key = sortedKeys[index];
        Type t = _implementedTypes[key];
        lastButton = AddButton(t, index);
    }

    // Use the last UserControl for the initial display
    if (lastButton != null)
    {
        Button_Click(lastButton, null);
    }
}

To make it simple, I used name of the UserControl for the Button.Content and in the Button_Click event I used System.Activator to create an instance of the class.

private void Button_Click(object sender, RoutedEventArgs e)
{
    UIElement control = null;

    try
    {
        Button button = sender as Button;
        string typeName = button.Content as string;
        Type type = _implementedTypes[typeName];
        object instance = System.Activator.CreateInstance(type);
        control = instance as UIElement;
    }
    catch (Exception ex)
    {
        System.Diagnostics.Debug.WriteLine(ex.ToString());
    }

    WorkArea.Children.Clear();
    if (control != null)
        WorkArea.Children.Add(control);
}

Conclusion

The animation looks nice and adds a lot to the overall effect. For the next part, I plan to dynamically create the animation instead of using Blend and perhaps improve the background shape to more closely resemble the Mac OS X spinning cursor.

Technorati tags: C#, Silverlight

Spinning Wait Symbol in Silverlight, Part3

Ryan Van Slooten — Wed, 29 Oct 2008 16:16:42 GMT

SpinningCursor3.zip (34 KB): Source (VS2008/Silverlight 2.0)

Series History

Part 3: Adding curvature to the slices (in Silverlight/C#)
Part 2: Dynamically building slices (in Silverlight/C#)
Part 1: Treo-like wait symbol in static XAML

In this post, I add curvature to the slices and refactor the code to support upcoming features. The goal of these posts is to build a spinning cursor similar to the Mac OS X wait cursor through programmatic means in Silverlight. One of the reasons to build the cursor programmatically is to create it will different number of slices or rotation or other parameters. At this point, the cursor is still very rough and just beginning to resemble the final result. In upcoming posts, I will animate the cursor and adjust the appearance to more closely resemble the desired cursor.

Step 1: Adjust the cursor properties

I added AlternateSlices and Origin properties, and also DefaultSliceCount and DefaultRotationAngle to the class.

public static readonly int DefaultSliceCount = 10;
public static readonly double DefaultSliceRotationAngle = 360.0 / DefaultSliceCount;

/// <summary>
/// Show alternating slices (true) or all slices (false)        
/// </summary> 
public bool AlternateSlices { get; set; }

/// <summary>        
/// The origin of the ellipse for the spinning cursor 
/// </summary> 
public Point Origin { get; private set; }

Step 2: Set the default parameter values

I specified the default slice count and the radius and origin of the cursor.

void Page_Loaded(object sender, RoutedEventArgs e)
{
    txtVersion.Text = this.GetType().Name;
    AlternateSlices = true;
    SliceCount = DefaultSliceCount;
    txtSliceCount.Text = Convert.ToString(SliceCount);

    SliceRotationAngle = DefaultSliceRotationAngle;
    txtRotation.Text = Convert.ToString(SliceRotationAngle);

    RadiusX = SpinningCanvas.Width / 2.0;
    RadiusY = SpinningCanvas.Height / 2.0;
    Origin = new Point(RadiusX, RadiusY);

    Update();
}

Step 3: Create a background circle (ellipse)

I used a simple linear gradient for now because the final gradient looks much more complicated and will take more time.

void CreateBackground(Canvas cursorCanvas)
{
    GradientBrush brush = new LinearGradientBrush();
    GradientStop stop1 = new GradientStop();
    stop1.Color = Color.FromArgb(255, 255, 0, 0);
    stop1.Offset = 0.25;
    brush.GradientStops.Add(stop1);

    GradientStop stop2 = new GradientStop();
    stop2.Color = Color.FromArgb(255, 0, 255, 0);
    stop2.Offset = 0.5; // cursorCanvas.Width / 2.0;
    brush.GradientStops.Add(stop2);

    GradientStop stop3 = new GradientStop();
    stop3.Color = Color.FromArgb(255, 0, 0, 255);
    stop3.Offset = 0.75; // cursorCanvas.Width;
    brush.GradientStops.Add(stop3);

    Ellipse ellipse = new Ellipse();
    ellipse.Height = cursorCanvas.Height;
    ellipse.Width = cursorCanvas.Width;
    ellipse.Fill = brush;
    cursorCanvas.Children.Add(ellipse);
}

Step 4: Implement the alternating slices

Implementing the alternating slices was simple:

/// <summary>
/// Create an ellipse using rotated slices to build the ellipse
/// </summary>
void CreateSlicePaths(Canvas cursorCanvas)
{
    // Create Slices
    for (int index = 0; index < SliceCount; ++index)
    {
        PathFigure pathFigure = CreateSliceFigure();

        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures.Add(pathFigure);

        Path path = new Path();
        path.Stroke = new SolidColorBrush(Color.FromArgb(128, 0, 0, 0));
        path.StrokeThickness = 1.0;
        path.Fill = new SolidColorBrush(Color.FromArgb(192, 128, 128, 128));
        path.Data = pathGeometry;

        // Rotate the slice for all slices after the first slice
        if (index > 0)
        {
            RotateTransform t1 = new RotateTransform();
            t1.CenterX = RadiusX;
            t1.CenterY = RadiusY;
            t1.Angle = SliceCenterAngle * index;

            TransformGroup transformGroup = new TransformGroup();
            transformGroup.Children.Add(t1);
            path.RenderTransform = transformGroup;
        }

        cursorCanvas.Children.Add(path);

        if (AlternateSlices)
            ++index;
    }
}

Step 5: Add the curvature to the slices

The curvature isn't perfect, but it looks fine with the default settings (10 slices and 36° rotation). I used a Bezier curve, but perhaps the standard arc would work better in the future.

// Curve control weighting
double curveWeight = 0.75;

// Create the first line
BezierSegment seg1 = new BezierSegment();
seg1.Point1 = point0;
seg1.Point2 = CalculatePointOnEllipse(0.0, RadiusX * curveWeight, RadiusY * curveWeight, Origin);
seg1.Point3 = point1;
pathFigure.Segments.Add(seg1);

// Use an arc for the circular side
ArcSegment seg2 = new ArcSegment();
seg2.Point = point2;
seg2.Size = new Size(RadiusX, RadiusY);
seg2.RotationAngle = SliceCenterAngle;
seg2.IsLargeArc = (SliceCenterAngle > 180.0);
seg2.SweepDirection = SweepDirection.Counterclockwise;
pathFigure.Segments.Add(seg2);

// Close shape by going back to the starting point
BezierSegment seg3 = new BezierSegment();
seg3.Point1 = point2;
seg3.Point2 = CalculatePointOnEllipse(SliceCenterAngle, RadiusX * curveWeight, RadiusY * curveWeight, Origin);
seg3.Point3 = point0;
pathFigure.Segments.Add(seg3);

Conclusion

The spinning cursor now has a dynamic number of slices and rotation angle, and it is starting to look more like the desired result. In the next post, I will animate the cursor to give it the spinning effect.

Technorati tags: C#, Silverlight

Spinning Wait Symbol in Silverlight, Part 2

Ryan Van Slooten — Mon, 20 Oct 2008 20:08:58 GMT

After my previous spinning wait symbol, I decided to see how difficult it would be to create a Silverlight version of the Mac OSX wait cursor that I referenced in the previous post. The Mac OSX cursor is commonly referred to as the "Spinning Pizza of Death" or the "Marble of Doom" and in fact there is a Marble of Doom web site dedicated to the amount of time spent waiting while watching the spinning cursor. The Marble of Doom web site has a very nice and large version of the cursor using Flash although it doesn't have any vector information but is using video frames (they probably just published the final product and did not include the vector/animation information). The purpose of this post is to programmatically build the cursor and then in later posts to animate it.

Step 1: Decide on the initial interface properties

I realized quickly that I would need a little geometry to programmatically build the cursor, but the first step was to build the interface requirements. The essential properties were:

public int SliceCount { get; set; }
public double SliceCenterAngle { get; private set; }
public double SliceRotationAngle { get; set; }
public double RadiusX { get; set; }
public double RadiusY { get; set; }

The SliceCount determines how many slices or divisions to create, and the SliceCenterAngle is simply 360° / SliceCount. The SliceRotationAngle is the angle to twist or bend the slice. I decided to have a RadiusX and RadiusY to support ellipses in the future as well.

Step 2: Manually create a slice

Before I could programmatically create a slice, I needed to find out how to create a slice using XAML and Blend. The points on the slice would be in the center of the circle, and then two points on the circle determined by the SliceCenterAngle. The biggest question was how to create the arc and maintain the circular appearance. Fortunately, the Geometry Overview on MSDN was very helpful and got me started on the right track with the PathGeometry. I was able to create the simplest scenario with a single slice from a circle with four slices:

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="50,50">
                    <PathFigure.Segments>
                        <LineSegment Point="0,50" />
                        <ArcSegment Size="50,50" IsLargeArc="False"
                            RotationAngle="90" SweepDirection="CounterClockwise" Point="50,100" />
                        <LineSegment Point="50,50" />
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

The next step was to create the same quarter-circle except with two slices:

<Path Stroke="Black" StrokeThickness="1">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigure StartPoint="50,50">
                    <PathFigure.Segments>
                        <LineSegment Point="0,50" />
                        <ArcSegment
                            Size="50,50"
                            Point="14.645,85.355" 
                            RotationAngle="45" 
                            IsLargeArc="False"
                            SweepDirection="CounterClockwise" 
                        />
                        <LineSegment Point="50,50" />
                    </PathFigure.Segments>
                </PathFigure>
                
                <PathFigure StartPoint="50,50">
                    <PathFigure.Segments>
                        <LineSegment Point="14.645,85.355" />
                        <ArcSegment
                            Size="50,50"
                            Point="50, 100" 
                            RotationAngle="45" 
                            IsLargeArc="False"
                            SweepDirection="CounterClockwise" 
                        />
                        <LineSegment Point="50,50" />
                    </PathFigure.Segments>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

Step 3: Create a slice programmatically

The general idea is to create one slice and then rotate the slice around the circle to create the complete circle.

/// <summary>
/// Create an ellipse using rotated slices to build the ellipse
/// </summary>
void CreateSlicePaths(Canvas cursorCanvas)
{
    SliceCenterAngle = 360.0 / SliceCount;

    // Create Slices
    for (int index = 0; index < SliceCount; ++index)
    {
        PathFigure pathFigure = CreateSliceFigure();

        PathGeometry pathGeometry = new PathGeometry();
        pathGeometry.Figures.Add(pathFigure);

        Path path = new Path();
        path.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
        path.StrokeThickness = 1.0;
        path.Data = pathGeometry;

        // Rotate the slice for all slices after the first slice
        if (index > 0)
        {
            RotateTransform t1 = new RotateTransform();
            t1.CenterX = RadiusX;
            t1.CenterY = RadiusY;
            t1.Angle = SliceCenterAngle * index;

            TransformGroup transformGroup = new TransformGroup();
            transformGroup.Children.Add(t1);
            path.RenderTransform = transformGroup;
        }

        cursorCanvas.Children.Add(path);
    }
}

/// <summary>
/// Create the base shape for the slice
/// </summary>
private PathFigure CreateSliceFigure()
{
    // Start at the center of the ellipse
    Point point0 = new Point(RadiusX, RadiusY);

    // Next point is the left side of the ellipse
    //Point point1 = new Point(0.0, RadiusY); // if no rotation
    Point point1 = CalculatePointOnEllipse(SliceRotationAngle);

    // Calculate the bottom point on the ellipse
    Point point2 = CalculatePointOnEllipse(SliceRotationAngle + SliceCenterAngle);

    // Starting point
    PathFigure pathFigure = new PathFigure();
    pathFigure.StartPoint = point0;

    // Create the first line
    LineSegment seg1 = new LineSegment();
    seg1.Point = point1;
    pathFigure.Segments.Add(seg1);

    // Use an arc for the circular side
    ArcSegment seg2 = new ArcSegment();
    seg2.Point = point2;
    seg2.Size = new Size(RadiusX, RadiusY);
    seg2.RotationAngle = SliceCenterAngle;
    seg2.IsLargeArc = (SliceCenterAngle > 180.0);
    seg2.SweepDirection = SweepDirection.Counterclockwise;
    pathFigure.Segments.Add(seg2);

    // Close shape by going back to the starting point
    LineSegment seg3 = new LineSegment();
    seg3.Point = new Point(point0.X, point0.Y);
    pathFigure.Segments.Add(seg3);

    pathFigure.IsClosed = true;
    pathFigure.IsFilled = true;

    return pathFigure;
}

/// <summary>
/// Returns a point on the ellipse based on the rotationAngle, using
/// RadiusX/Y as the center (0, 0).
/// </summary>
private Point CalculatePointOnEllipse(double rotationAngle)
{
    double angleRadians = rotationAngle * Math.PI / 180.0;
    double x = Math.Cos(angleRadians);
    x = RadiusX * x;
    double y = Math.Sin(angleRadians);
    y = RadiusY * y;

    Point result = new Point(x, y);
    result.X = RadiusX - x;
    result.Y = RadiusY + y;
    return result;
}

Step 4: Going Forward

Obviously this still needs a lot of improvement before it approaches the appeal of the Marble of Doom, which I will work on in the coming posts. However, the initial effort to create the "pizza" slices has been achieved and it is easier to build upon a base.

I added a grid in the background when I had some difficulty with the path geometry, but it is useful to I added two text boxes for the number of slices and rotation angle so that I could see the shape update dynamically.

Since I just used LineSegments to connect the slice points, the shape does not have the swirl or twist effect yet. Next time I will add the twist as well as rotation.

Technorati tags: C#, Silverlight

Spinning Wait Symbol in Silverlight

Ryan Van Slooten — Wed, 08 Oct 2008 13:03:49 GMT

Download: RotatingHourGlass VS2008 Source/Silverlight beta 2 (503 KB)

My wife has a Treo with Windows Mobile and I when I was using it I noticed it had a cool rotating wait symbol, so I wondered how difficult it would be to build the symbol in Silverlight. The symbol is similar to the old BeOS wait cursor and has as well as the Mac OS X wait cursor which I've always thought looks nice. At one point in time I created a Windows cursor that duplicated the look of the BeOS cursor but I don't use it anymore. If I found a really nice looking 24-bit cursor then I might use it again.

The first step is to create the four quadrants. I used the path geometry to create each quadrant, for example the first quadrant is:

Data="M0,0 C0,0 100,0 100,100 L0,100 z"

For reference , the path markup syntax is documented at MSDN. The shape starts at (0,0) and creates a curve point with a control point at (100,0) and end point at (100,100). Then there is a LineTo (0,100) and finally the close ("z") marker to complete the shape. While this is fairly easy through a graphical editor such as Expression Blend (blog), I created this manually so that I could have more control over the exact coordinates rather than relying on the graphical editor.

I repeated the shape for each quadrant by adjusting the coordinates as necessary. It is also possible to simply apply a rotation to the shape so you have rotations of 90, 180, and 270 degrees, but remember to set the RenderTransformOrigin to the correct corner such as (0,1) to rotate by the bottom left corner.

Once the quadrants are built, then I placed a rotating quadrant named 'Spinner' over the combined shape. I used an alpha mask on the spinner to differentiate it from the other quadrants. Finally, I added a Storyboard to rotate the 'Spinner' 360 degrees every two seconds:

<Storyboard x:Name="SpinStoryboard" RepeatBehavior="Forever">
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Spinner"
      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
    <SplineDoubleKeyFrame KeyTime="00:00:02" Value="360"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

The end result is a nice looking animation that is fairly simple. I'm tempted to try to duplicate the Mac OS X wait cursor, but that will have to wait until I have more time.

Technorati tags: Silverlight

Bouncing Balls in Silverlight Part 1

Ryan Van Slooten — Mon, 15 Sep 2008 04:28:30 GMT

BounceTest1 (104 KB): Source (VS2008)

Recently I wanted to make a very simple sample in Silverlight that used a little code to animate bouncing balls. The overall effect is fairly simple, but getting the sample down to the basics took a little time. As part of my research, I looked at several old bouncing ball demos using JavaScript and it was an eye-opening reminder of the dark ages of browsers and JavaScript.

For the sample, I wanted to keep everything very simple. I started with a circle (ellipse with the same height and width) in a canvas. In order to move the ball, I chose to position the ball at (0, 0) and use a TranslateTransform to adjust the position. You could easily move the ball around with Left and Top, but I also plan to use RotateTransform in later samples so it makes sense to use a TransformGroup to manipulate the object.

The XAML for the base page is just a Canvas and a rectangle that acts as a border. The ball is placed on the canvas using the common TransformGroup that is created by Expression Blend when you add a transform to an object. Expression Blend also uses the same order for the transforms (ScaleTransform, SkewTransform, RotateTransform, TranslateTransform) and will reorder the transforms back to this order if you adjust any transform using Blend (at least as of Blend 2.5 June 2008 Preview). Here is the XAML for the page:

<UserControl x:Class="BounceTest.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot">
        <Rectangle x:Name="Boundary" Height="300" Width="400" 
            Canvas.Left="0" Canvas.Top="0"
            Fill="#FFFFFFFF" Stroke="#FF000000" />
        <Ellipse x:Name="Ball01" Height="25" Width="25"
            Canvas.Left="0" Canvas.Top="0"
            Fill="#FFEE3131" Stroke="#FF000000"
            RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="50" Y="50"/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>
</UserControl>

I created a small class to manage the position and velocity of the ball. The constructor takes the source shape (the ball), the velocity, and the boundary shape. For this scenario, I assume that the ball already has the RotateTransform otherwise it throws an exception. The code could easily create a RotateTransform if it isn't present. The Update method takes the elapsed time since the previous method call. The boundary checking is extremely simple and just changes the direction of the motion when the ball hits a boundary edge. This obviously needs a lot of work for more complex scenarios, but it will do for this simple case.

public class ShapeVelocity
{
	public Shape shape;
	public Vector velocity;
	public TranslateTransform translate;
	public Size bounds;
	public Size container;

	public ShapeVelocity(Shape AShape, Vector AVelocity, Shape BoundsContainer)
	{
		this.shape = AShape;
		this.velocity = AVelocity;

		var renderTransform = this.shape.RenderTransform;
		if (renderTransform is TransformGroup)
		{
			TransformGroup transformGroup = (TransformGroup)renderTransform;
			foreach (Transform transform in transformGroup.Children)
				if (transform is TranslateTransform)
					this.translate = (TranslateTransform)transform;
		}
		if (this.translate == null)
			throw new ArgumentException("Shape must have a TranslateTransform in it");

		container = new Size(BoundsContainer.Width, BoundsContainer.Height);
		bounds = new Size(
			this.shape.ActualWidth + this.shape.StrokeThickness,
			this.shape.ActualHeight + this.shape.StrokeThickness);
	}

	public void Update(TimeSpan Interval)
	{
		Rect pos = new Rect(
			translate.X,
			translate.Y,
			bounds.Width,
			bounds.Height);

		if ((velocity.X < 0.0) && (pos.Left < 0.0))
			velocity.X = -velocity.X;
		else if ((velocity.X > 0.0) && (pos.Right > container.Width))
			velocity.X = -velocity.X;
		if ((velocity.Y < 0.0) && (pos.Top < 0.0))
			velocity.Y = -velocity.Y;
		else if ((velocity.Y > 0.0) && (pos.Bottom > container.Height))
			velocity.Y = -velocity.Y;

		translate.X += velocity.X * (double) Interval.Milliseconds / 1000.0;
		translate.Y += velocity.Y * (double) Interval.Milliseconds / 1000.0;
	}
}

In anticipation of future examples, I used a List<Shape> collection to store the ball shape to updae the position. For the motion, I used the StoryBoard instead of a DispatcherTimer based on the recommendation of Adam Kinney.

public partial class Page : UserControl
{
    private DateTime _lastTime = DateTime.MinValue;
    private double _initialSpeed = 50.0;
    private Storyboard _storyboard;
    private List<ShapeVelocity> _shapes;

    public Page()
    {
        InitializeComponent();
        _shapes = new List<ShapeVelocity>();
        _storyboard = new Storyboard();
        _storyboard.Duration = TimeSpan.FromMilliseconds(10);
        _storyboard.Completed += new EventHandler(storyboard_Tick);
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e)
    {
        _shapes.Add(new ShapeVelocity(Ball01, new Vector(_initialSpeed, _initialSpeed), Boundary));
        _lastTime = System.DateTime.Now;
        _storyboard.Begin();
    }

    void storyboard_Tick(object sender, EventArgs e)
    {
        DateTime now = System.DateTime.Now;
        TimeSpan interval = now - _lastTime;
        foreach (ShapeVelocity s in _shapes)
        {
            s.Update(interval);
        }
        _lastTime = now;
        _storyboard.Begin();
    }
}

So that is the very simple bouncing ball sample.

Technorati tags: C#, Silverlight

On Sample Simplicity

Ryan Van Slooten — Fri, 13 Jun 2008 21:08:44 GMT

I was working through a Communications sample of connecting SilverLight to POX, then Web Services, and finally WCF and I came across the following instructions:

(Part 1: POX) The Generic handler will process an incoming request using the code declared in the ProcessRequest function. This function should create some new instances of CityData and add them to the myCities list. Here are some examples of cities with longitude and latitude { (London, 51.5, 0), (Stratford-upon-Avon, 52.3, -1.71), (Edinburgh, 55.95, -3.16) }. See if you can write the code to do this.

(And later in the lab...)

In this example your ASHX served up hard-coded data for 1 city. Can you build it so that it can accept parameters on the URI string (i.e. http://localhost:8001/Sample1Web/GetData.ashx?city=whatever)?

(And even further in the lab...)

Write a function that takes in a country and builds a List<CityData> of several cities for that country. Here are some cities and their latitudes and longitudes:
("Paris", 48.87, 2.33);
("Lourdes", 43.1, 0.05);
("Toulouse", 43.6, 1.38);
("London", 51.5, 0);
("Stratford-Upon-Avon", 52.3, -1.71);
("Edinburgh", 55.95, -3.16);
("Berlin", 52.52, 13.42);
("Munich", 48.13, 11.57);
("Hamburg", 53.58, 9.98);

Provided Solution

The sample provided "solution" code at the end of the instructions. The code is basic and unimaginative, but perhaps that is all the is needed of sample code (I would offer that samples are the perfect to push the boundaries -- lead by example).

// File: CityData.cs
public class CityData
{
    public string CityName { get; set; }
    public double Latitude { get; set; }
    public double Longitude { get; set; }

    public CityData(string strCityName, double nLatitude, double nLongitude)
    {
        CityName = strCityName;
        Latitude = nLatitude;
        Longitude = nLongitude;
    }

    public CityData()
    {
    }
}

// File: GetData.ashx
public class GetData : IHttpHandler
{
    private List<CityData> getCities(string strCountry)
    {
        List<CityData> ret = new List<CityData>();

        switch (strCountry)
        {
        case "france":
            ret.Add(new CityData("Paris", 48.87, 2.33));
            ret.Add(new CityData("Lourdes", 43.1, 0.05));
            ret.Add(new CityData("Toulouse", 43.6, 1.38));
            break;

        case "uk":
            ret.Add(new CityData("London", 51.5, 0));
            ret.Add(new CityData("Stratford-Upon-Avon", 52.3, -1.71));
            ret.Add(new CityData("Edinburgh", 55.95, -3.16));
            break;

        case "germany":
            ret.Add(new CityData("Berlin", 52.52, 13.42));
            ret.Add(new CityData("Munich", 48.13, 11.57));
            ret.Add(new CityData("Hamburg", 53.58, 9.98));
            break;

        default:
            ret.Add(new CityData("London", 51.5, 0));
            ret.Add(new CityData("Stratford-Upon-Avon", 52.3, -1.71));
            ret.Add(new CityData("Edinburgh", 55.95, -3.16));
            break;
        }
        return ret;
    }
}

Alternative 1

I wanted to explore alternatives to the supplied code, so I decided to initialize the CityData list with the data instead of using "Add". In C++ this was more efficient (it set the initial list size instead of using the default capacity sizing algorithm among other things), but I'm not sure of performance in terms of C#. I would not expect any significant performance difference with this small sample though.

public List<CityData> getCities(string strCountry)
{
    List<CityData> ret = new List<CityData>();

    switch ( strCountry.ToLower() )
    {
        case "france":
            ret = new List<CityData>() {
                new CityData("Paris", strCountry, 48.87, 2.33),
                new CityData("Lourdes", strCountry, 43.1, 0.05),
                new CityData("Toulouse", strCountry, 43.6, 1.38)
            };
            break;

        case "germany":
            ret = new List<CityData>() {
                new CityData("Berlin", strCountry, 52.52, 13.42),
                new CityData("Munich", strCountry, 48.13, 11.57),
                new CityData("Hamburg", strCountry, 53.58, 9.98)
            };
            break;

        case "uk":
        default:
            strCountry = "UK";
            ret = new List<CityData>() {
                new CityData("London", strCountry, 51.5, 0),
                new CityData("Stratford-Upon-Avon", strCountry, 52.3, -1.71),
                new CityData("Edinburgh", strCountry, 55.95, -3.16)
            };
            break;
    }
    return ret;
}

Alternative 2

I haven't worked very much with LINQ, so I wanted to compare the same functionality using LINQ. I added a string "Country" to the CityData class and here is the result:

private static List<CityData> cityList = new List<CityData>()
{
    // UK
    new CityData("Paris", "UK", 48.87, 2.33),
    new CityData("Lourdes", "UK", 43.1, 0.05),
    new CityData("Toulouse", "UK", 43.6, 1.38),

    // France
    new CityData("Paris", "France", 48.87, 2.33),
    new CityData("Lourdes", "France", 43.1, 0.05),
    new CityData("Toulouse", "France", 43.6, 1.38),

    // Germany
    new CityData("Berlin", "Germany", 52.52, 13.42),
    new CityData("Munich", "Germany", 48.13, 11.57),
    new CityData("Hamburg", "Germany", 53.58, 9.98)
};

public List<CityData> getCities(string strCountry)
{
    IEnumerable<CityData> data = from city in cityList
                                 where city.Country == strCountry
                                 select city;
    return new List<CityData>(data);
}

This is still not the most efficient or optimal method, but I think it looks nice and is helps introduce LINQ in an understandable manner.

Conclusion

Samples and labs should be simple and yet it is a perfect time to include new technologies and push the boundaries so to speak. One thing I certainly don't want to see in samples are basic programming inefficiencies (things that make you cringe) due to lack of effort by the sample creator. That was not necessarily the case with this sample, but it would have been better to present alternatives such as the examples I listed.

Technorati tags: C#, LINQ

Automatically setting the Specified property in WSDL Generated files

Ryan Van Slooten — Tue, 01 Apr 2008 20:51:15 GMT

The wsdl.exe tool with Visual Studio can be used to manually generate a code file to use with a project. If you use the nillable or minOccurs attributes in the XSD though, the wsdl.exe tool generates a boolean 'Specified' field that must be set to true in order to transmit the data through the web service. For example:

WSDL File (myfile.wsdl)

<xs:element name="duedate" type="xs:dateTime" nillable="1" minOccurs="0" maxOccurs="1" />

Generated CS File (wsdl.exe myfile.wsdl)

// ...

private System.Nullable<System.DateTime> duedateField;

private bool duedateFieldSpecified;

// ...

/// <remarks/>
[System.Xml.Serialization.XmlElementAttribute(IsNullable=true)]
public System.Nullable<System.DateTime> duedate {
    get {
        return this.duedateField;
    }
    set {
        this.duedateField = value;
    }
}

/// <remarks/>
[System.Xml.Serialization.XmlIgnoreAttribute()]
public bool duedateSpecified {
    get {
        return this.duedateFieldSpecified;
    }
    set {
        this.duedateFieldSpecified = value;
    }
}

"Breaking Change"

What I wanted was simply add the line to the 'duedate' setter to check if the newly assigned value was null or not (the assumption is that a non-null value would mean the field is 'specified'):

    set {
        this.duedateField = value;
        this.duedateFieldSpecified = (value != null);
    }

I looked around for a solution, but all I found a very good suggestion to add this functionality to the wsdl.exe tool. Unfortunately the status was "Closed (Won't Fix)" and the comment was:

Thank you for the suggestion.
This would be nice enhancement, but unfortunately this also is a breaking change: in the previous versions of the .net framework setting value of 'xxx' field did not toggle the xxxSepcified value, so if we change this runtime behavior of some existing applications may change and will require user code change to run the same way as before.

On the contrary, I contend it would not be difficult or breaking to simply add the functionality through optional parameters, such as:

wsdl.exe /autospecified:1 myfile.wsdl

The optional parameters would not affect default operation nor break existing code, but instead we have to deal with a short-sighted decision.

Quick and Dirty Solution

I decided to write a quick script to try and automatically generate the extra line of code for each setter. I decided to use awk (there are a number of sources for a Windows awk/gawk - cygwin, unxutils, and more) as it is very quick to implement and script. The following script is the result:

#!/usr/bin/awk -f

# This is a quick and dirty script to add automatically set the
# 'myFieldSpecified' variables generated from the Visual Studio
# wsdl.exe tool. The script searches for System.Nullable types 
# (myField) and verifies a specified variable exists 
# (myFieldSpecified). It then searches for the setter and adds
# the line: this.myFieldSpecified = (value != null);
#
# Copyright (C) 2008 Ryan Van Slooten
#
# Version:
#   1.0     2008-04-01      Initial release
#

BEGIN { FS = " "; }

# Match the nullable types in the file: int, DateTime, etc.
/[ \t]*private System.Nullable/ {
    print $0;

    # Add name of field to nullable array
    name = substr($3, 1, length($3)-1);
    nullable[name] = "";
    next; 
}

# Match the xxxFieldSpecified variables
/[ \t]*private .*FieldSpecified;/ {
    print $0;

    # Increment value of 'specified' null field to nullable array
    name = substr($3, 1, length($3)-10);
    specified = substr($3, 1, length($3)-1);
    nullable[name] = specified;
    next; 
}

# Match the field setter and check if it is nullable and specified
/[ \t]*this.* = value;/ {
    print $0;

    # Check if field is nullable and has a specified property
    name = substr($1, 6);
    if (name in nullable) {
        if (length(nullable[name]) > 0) {
            # Fix lost indentation level
            indent = substr($0, 1, index($0, $1)-1);

            # Adjust the xxxFieldSpecified value
            $1 = $1 "Specified";
            $3 = "(" substr($3, 1, length($3)-1) " != null);";
            print indent $0;

            # Remove element from array
            delete nullable[name];
        }
    }
    next;
}

# default line handler
{ print $0; }

Technorati tags: awk, c#, wsdl, web services

Best Practice for Verbatim String Text Block

Ryan Van Slooten — Fri, 23 Nov 2007 06:05:51 GMT

I was browsing various blogs today and I came across a good example for using a verbatim string instead of a StringBuilder object. The code I came across looked like this (I mean absolutely no disrespect to the author, so I won't include the original link):

private void ClientScript()
{
   StringBuilder sb_Script = new StringBuilder();
   sb_Script.Append("<script language=\"javascript\">");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("function cb_verify(sender) {");
   sb_Script.Append("\r");
   sb_Script.Append("var val = document.getElementById(document.getElementById"
			+"(sender.id).controltovalidate);");
   sb_Script.Append("\r");
   sb_Script.Append("var col = val.getElementsByTagName(\"*\");");
   sb_Script.Append("\r");
   sb_Script.Append("if ( col != null ) {");
   sb_Script.Append("\r");
   sb_Script.Append("for ( i = 0; i < col.length; i++ ) {");
   sb_Script.Append("\r");
   sb_Script.Append("if (col.item(i).tagName == \"INPUT\") {");
   sb_Script.Append("\r");
   sb_Script.Append("if ( col.item(i).checked ) {");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("return true;");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("return false;");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("</script>");

   //Inject the script into the page

   Page.ClientScript.RegisterClientScriptBlock(GetType(), SCRIPTBLOCK,
					sb_Script.ToString());
   //Registering validator clientside javascript function
   Page.ClientScript.RegisterExpandoAttribute(ClientID, "evaluationfunction",
					"cb_verify");
}

There are many articles on the performance of string concatenation compared to StringBuilder, but this is an example where the verbatim string is significantly better in terms of performance and maintenance. The modified code with the verbatim string looks like this:

private void ClientScript()
{
   string sb_Script = @"
<script language=""javascript"">
function cb_verify(sender) {
   var val = document.getElementById(document.getElementById(sender.id).controltovalidate);
   var col = val.getElementsByTagName(""*"");
   if ( col != null ) {
       for ( i = 0; i < col.length; i++ ) {
           if (col.item(i).tagName == ""INPUT"") {
               if ( col.item(i).checked ) {
                   return true;
               }
           }
       }
       return false;
    }
}
</script>";

   //Inject the script into the page
   Page.ClientScript.RegisterClientScriptBlock(GetType(), SCRIPTBLOCK,
                    sb_Script);
   //Registering validator clientside javascript function
   Page.ClientScript.RegisterExpandoAttribute(ClientID, "evaluationfunction",
                    "cb_verify");
}

The indentation is optional if you wish to minimize the javascript, but the end result is code that is easier to maintain. (I'm still evaluating the dp.SyntaxHighlighter and I see it has an issue with the verbatim string markup.)

Technorati tags: c#, javascript

Efficient String Blocks

Ryan Van Slooten — Fri, 09 Nov 2007 21:18:51 GMT

One of the things that bothers me a lot is using a lot of string concatenation when you can just use the verbatim string literal (@"") to define a large block of text. For example, I saw some code on a blog the other day that looked something like this:

string strValue = "<div id='test'>";
strValue += "<input type='text' id='name' value='" + strName + "/>";
strValue += "<input type='submit' />";
strValue += "</div>";
// Many more lines before it finally
// finished building the string

There are many things wrong with the code sample above including not using StringBuilder. I have seen the same type of code extensively with VB and VBScript mostly due to the lack of a multi-line string and VB and VBScript don't have the concatenation operator either so you end up using strValue = strValue + "stuff".

The issue I have with code like this is both efficiency and maintainability and significant difficulty supporting translations. I once had to maintain a SharePoint 2003 server-side control (not a lot of fun!) that built a lot of html that was sent to the browser. The code was even originally developed by a Microsoft consultant, but it was a mess of string concatenation similar to the first example. I converted the string html to use the verbatim string literal like:

@"<div id='test'>
<input type='text' id='name' value='" + strName + @"/>
<input type='submit' />
</div>";

But even this is hard to pick out the variable assignments in the string. A more generic version is desired, such as:

@"<div id='test'>
<input type='text' id='name' value='${name}' />
<input type='submit' />
</div>";

At this point, it is easy to use Replace or a RegEx to specify the variable values. The downside is potential performance issues with Replace or RegEx, but the upside is less string concatenation and maintainability. It is easy to place the string in a resource or in configuration where it can be maintained outside of code.

Technorati tags: c#, strings