Home » Fun with Silverlight: Building a photo mosaic

Fun with Silverlight: Building a photo mosaic

Door Willem Meints
14 years ago
1 Reacties
.NET

Most of the things I talk about on this weblog are serious posts on serious problems and solutions. However that is not the only thing I like to do with Software. From time to time I come across whaky ideas that aren’t necessarily useful.

The photo mosaic is one of those things. In this article I’m going to show you what it is and how you can build one yourself. Ooh and if you don’t want to build one, you can also download the code right at the bottom of the article.

Control demo

Unfortunately this website doesn’t really work great for showing demo code, so you will have to look at some screenshots.

The idea is that the application will take any kind of picture and divide it into a preconfigured number of horizontal and vertical tiles. The control will animate the tiles when you change the picture that is displayed into another picture.

Basic structure of the mosaic control

The control is made out of a couple of components. First there’s a grid that provides a basic layout for the tiles. Inside this grid the tiles are placed that display the photo. Each tile in the grid contains its own piece of the puzzle. The outer grid is there to prevent the mosaic layout from getting deformed by bad layout of the app that the control is hosted on.

The following picture shows the schematics of the control.

Building the grid

Because you can change the number of tiles and even the size of the tiles being displayed there’s really no point in making a static control template for the photo mosaic. So instead of doing that, I just created a template with an empty grid on it. When the control is initialized I will fire up a method that will generate a grid for me.

The following snippet demonstrates this:

/// <summary>
/// Rebuilds the control layout
/// </summary>
private void RebuildControlLayout()
{
    if (_tileCanvas == null)
        return;
&nbsp; 
    // Clear the grid contents
    _tileCanvas.Children.Clear();
&nbsp; 
    BuildTileLayout();
    BuildGridLines();
    BuildImageTiles();
}
&nbsp; 
/// <summary>
/// Applies a new tile layout to the control.
/// </summary>
private void BuildTileLayout()
{
    _tileCanvas.ColumnDefinitions.Clear();
    _tileCanvas.RowDefinitions.Clear();
&nbsp; 
    // Generate the columns for the grid
    // Add one extra to the left and right for the gradient line effect.
    for (int i = 0; i < ((HorizontalTiles + 2) * 2) - 1; i++)
    {
        ColumnDefinition column = null;
&nbsp; 
        if (i % 2 != 0)
        {
            column = new ColumnDefinition
            {
                Width = GridLength.Auto
            };
        }
        else
        {
            column = new ColumnDefinition
            {
                Width = new GridLength(TileSize.Width)
            };
        }
&nbsp; 
        _tileCanvas.ColumnDefinitions.Add(column);
    }
&nbsp; 
    // Generate the rows for the grid
    // Add one extra to the top and bottom for the gradient line effect.
    for (int i = 0; i < ((VerticalTiles + 2) * 2) - 1; i++)
    {
        RowDefinition row = null;
&nbsp; 
        if (i % 2 != 0)
        {
            row = new RowDefinition
            {
                Height = GridLength.Auto
            };
        }
        else
        {
            row = new RowDefinition
            {
                Height = new GridLength(TileSize.Height)
            };
        }
&nbsp; 
        _tileCanvas.RowDefinitions.Add(row);
    }
}

The first method shown in the snippet is the OnApplyTemplate method. This method is called by the runtime when the controltemplate is applied to the control. By invoking this method, the runtime allows you to link the layout of the control to the behavior of the control.

The second method shown generates a grid that contains (Rows + 2) * 2 – 1 RowDefinition objects to accomodate for the fact that there are lines between the cells. The same is done for the columns in the grid.

Each time you select a different number of tiles or change the size of the tiles, the grid will get updated with the new layout.

Reading between the tiles

No grid is complete without the gridlines. The photo mosaic sample has a pretty neat set of lines with the lines fading towards the ends. I created those by adding one tile to the end of each row and column. The brush applied to each line is made using the following settings in Blend:

For those less inclined to just poke around in blend, but instead like to work with hard figures here’s the settings:

Gradientstop 1: Transparent (Offset = 0%)
Gradientstop 2: White (Offset = 6%)
Gradientstop 3: White (Offset = 94%)
Gradientstop 4: White (Offset = 100%)

I used the same settings for horizontal and vertical lines, but with a different start and endpoint for the brush.

This makes the line fade inside the extra tile at the end of each row and column. Not a very difficult trick, but it takes a bit of fiddling in Blend to get it right.

The lines themselves are created using the following snippet of code:

/// <summary>
/// Creates the gridlines
/// </summary>
private void BuildGridLines()
{
    int rowSpan = ((VerticalTiles + 2) * 2) - 1;
    int columnSpan = ((HorizontalTiles + 2) * 2) - 1;
&nbsp; 
    for (int x = 1; x < ((HorizontalTiles + 2) * 2) - 1; x += 2)
    {
        Path path = new Path
        {
            Data = new LineGeometry
            {
                StartPoint = new Point(0, 0),
                EndPoint = new Point(0, 1),
            },
            Stretch = Stretch.Fill,
            Stroke = HorizontalLineBrush
        };
&nbsp; 
        // Provide the correct placement on the grid
        Grid.SetColumn(path, x);
        Grid.SetRowSpan(path, rowSpan);
        Grid.SetRow(path, 0);
&nbsp; 
        // Add the path to the grid
        _tileCanvas.Children.Add(path);
    }
&nbsp; 
    for (int x = 1; x < ((VerticalTiles + 2) * 2) - 1; x += 2)
    {
        Path path = new Path
        {
            Data = new LineGeometry
            {
                StartPoint = new Point(0, 0),
                EndPoint = new Point(1, 0)
            },
            Stretch = Stretch.Fill,
            Stroke = VerticalLineBrush
        };
&nbsp; 
        // Provide the correct placement on the grid
        Grid.SetRow(path, x);
        Grid.SetColumnSpan(path, columnSpan);
        Grid.SetColumn(path, 0);
&nbsp; 
        // Add the path to the grid
        _tileCanvas.Children.Add(path);
    }
}

There’s a ColumnSpan (to create a horizontal line) or RowSpan (to create a vertical line) value applied to each linetTo make the line go all the way horizontally or vertically.

Note: Because the lines are generated dynamically there isn’t any templatebinding applied. This can be somewhat annoying, because the line brushes aren’t updated when you change them in Visual Studio or in Expression Blend. I’ve added a bit of extra code to the dependency properties for the brushes to fix this issue.

/// <summary>
/// Dependency property registration for VerticalLineBrush
/// </summary>
/// <param name="oldValue">The old value for the property</param>
/// <param name="newValue">The new value for the property</param>
protected virtual void OnVerticalLineBrushChanged(Brush oldValue, Brush newValue)
{
    if (_tileCanvas == null)
        return;
&nbsp; 
    foreach (var line in _tileCanvas.Children.OfType<Line>())
    {
        // Skip the lines that have a column span larger than one.
        // These are horizontal lines
        if (Grid.GetColumnSpan(line) == 1)
        {
            line.Stroke = newValue;
        }
    }
}
&nbsp; 
/// <summary>
/// Dependency property registration for HorizontalLineBrush
/// </summary>
/// <param name="oldValue">The old value for the property</param>
/// <param name="newValue">The new value for the property</param>
protected virtual void OnHorizontalLineBrushChanged(Brush oldValue, Brush newValue)
{
    if (_tileCanvas == null)
        return;
&nbsp; 
    foreach (var line in _tileCanvas.Children.OfType<Line>())
    {
        // Skip the lines that have a column span of one
        // These are vertical lines
        if (Grid.GetColumnSpan(line) > 1)
        {
            line.Stroke = newValue;
        }
    }
}

Adding the tiles to the grid

The next step in creating the mosaic, is to create the contents of the mosaic itself. This is done by generating tiles for each column and row.

/// <summary>
/// Builds the image tiles
/// </summary>
private void BuildImageTiles()
{
    int row = 2;
    int column = 2;
&nbsp; 
    // Leave one tile empty at the outside of the grid around the image.
    for (int y = 0; y < VerticalTiles; y++)
    {
        column = 2;
&nbsp; 
        for (int x = 0; x < HorizontalTiles; x++)
        {
            Rectangle tile = new Rectangle
            {
                Width = TileSize.Width,
                Height = TileSize.Height,
                Fill = CreateTileBrush(y, x),
                RenderTransformOrigin = new Point(0.5, 0.5)
            };
&nbsp; 
            // Add a dummy transform that will be used by the animation later on
            TransformGroup tileTransformGroup = new TransformGroup();
            TranslateTransform tileTranslateTransform = new TranslateTransform();
&nbsp; 
            tileTransformGroup.Children.Add(tileTranslateTransform);
            tile.RenderTransform = tileTransformGroup;
&nbsp; 
            Grid.SetRow(tile, row);
            Grid.SetColumn(tile, column);
&nbsp; 
            _tileCanvas.Children.Add(tile);
            _tiles.Add(tile);
&nbsp; 
            column += 2;
        }
&nbsp; 
        row += 2;
    }
}

For the image to be tiled correctly I’m creating a brush with a relative transform applied to it. This causes the image to be moved over the tile by the specified translation coordinates. The translation coordinates range from 0.0 in the top-left corner to 1.1 in the bottom-right corner of each tile. By specifying a number bigger than one, I’m basically saying the image should be moved a specified number of tiles.

The following snippet demonstrates the creation of the tile brush:

/// <summary>
/// Creates a new tile brush based on the location of the tile
/// </summary>
/// <param name="row"></param>
/// <param name="column"></param>
/// <returns></returns>
private Brush CreateTileBrush(int row, int column)
{
    // Return a transparent brush if the image source is empty
    if (_actualImageSource == null)
    {
        return new SolidColorBrush(Colors.Transparent);
    }
&nbsp; 
    // Apply a translate transform to get the right piece of the
    // image onto the tile
    TranslateTransform tileTransform = new TranslateTransform
    {
        X = -column,
        Y = -row
    };
&nbsp; 
    // Create the new tile brush
    ImageBrush tileBrush = new ImageBrush
    {
        AlignmentX = AlignmentX.Left,
        AlignmentY = AlignmentY.Top,
        ImageSource = _actualImageSource,
        RelativeTransform = tileTransform,
        Stretch = Stretch.None
    };
&nbsp; 
    return tileBrush;
}

Animating the tiles

The tiles in the mosaic are animated using two storyboards. One to move the tiles away from the grid and one to move them back in with the new image. Again because the grid and tiles are generated dynamically I had to create the animations in code to.

To create the animation for moving tiles away from the grid is created using the following two methods:

/// <summary>
/// Creates a storyboard that moves the tiles away from the grid
/// </summary>
/// <returns></returns>
private Storyboard CreateHideTilesAnimation()
{
    Storyboard board = new Storyboard();
    IEasingFunction easingFunction = new CubicEase
    {
        EasingMode = EasingMode.EaseOut
    };
&nbsp; 
    // Animate all the tiles at once
    foreach (var tile in _tileCanvas.Children.OfType<Rectangle>())
    {
        double targetDirection = Math.Round(_randomizer.NextDouble());
        double targetOffsetX = 0.0;
        double targetOffsetY = 0.0;
&nbsp; 
        // Choose a random direction
        if (targetDirection == 0)
        {
            targetOffsetX = (_randomizer.Next(3) - 1) * (TileSize.Width * 4);
        }
        else
        {
            targetOffsetY = (_randomizer.Next(3) - 1) * (TileSize.Height * 4);
        }
&nbsp; 
        // Add all the generated items to the story board
        foreach (var animation in BuildTileAnimations(tile, targetOffsetX, targetOffsetY, 0.0, easingFunction))
        {
            board.Children.Add(animation);
        }
    }
&nbsp; 
    return board;
}
&nbsp; 
/// <summary>
/// Builds a set of tile animations for the specified tile
/// </summary>
/// <param name="tile">Tile to generate animations for</param>
/// <param name="horizontalTranslation">Horizontal translation</param>
/// <param name="verticalTranslation">Vertical translation</param>
/// <param name="targetOpacity">Target opacity</param>
/// <returns>Returns the generated animations</returns>
private IEnumerable<Timeline> BuildTileAnimations(Rectangle tile,
    double horizontalTranslation, double verticalTranslation, double targetOpacity, IEasingFunction easingFunction)
{
    Storyboard board = new Storyboard();
    TimeSpan animationDuration = TimeSpan.FromMilliseconds(400);
&nbsp; 
    DoubleAnimation horizontalAnimation = new DoubleAnimation
    {
        To = horizontalTranslation,
        Duration = animationDuration,
        EasingFunction = easingFunction
    };
&nbsp; 
    DoubleAnimation verticalAnimation = new DoubleAnimation
    {
        To = verticalTranslation,
        Duration = animationDuration,
        EasingFunction = easingFunction
    };
&nbsp; 
    DoubleAnimation opacityAnimation = new DoubleAnimation
    {
        Duration = animationDuration,
        To = targetOpacity,
        EasingFunction = easingFunction
    };
&nbsp; 
    Storyboard.SetTargetProperty(horizontalAnimation, new PropertyPath(
        "(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"));
&nbsp; 
    Storyboard.SetTargetProperty(verticalAnimation, new PropertyPath(
        "(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"));
&nbsp; 
    Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(Rectangle.OpacityProperty));
&nbsp; 
    Storyboard.SetTarget(horizontalAnimation, tile);
    Storyboard.SetTarget(verticalAnimation, tile);
    Storyboard.SetTarget(opacityAnimation, tile);
&nbsp; 
    // Return the animations to the caller
    yield return horizontalAnimation;
    yield return verticalAnimation;
    yield return opacityAnimation;
}

The first method creates the storyboard by adding animations for each tile to it. The tile animations are created using an iterator that returns a couple of animation timeline. One to move the tile horizontally, one to move the tile vertically and one to hide the tile.

To make the animation a bit more fun I added an easing function to it. The cubic ease makes the animation appear to go faster towards the end.

Once the hide animation is completed, the new image is applied and the show animation is started. To create this animation I created a new method that move the tiles into their original position.

/// <summary>
/// Creates a storyboard that moves the tiles back into the grid
/// </summary>
/// <param name="tile"></param>
private Storyboard CreateShowTilesAnimation()
{
    // Create a new tile animation the moves the tile back into the grid
    Storyboard board = new Storyboard();
    IEasingFunction easingFunction = new CubicEase
    {
        EasingMode = EasingMode.EaseIn
    };
&nbsp; 
    // Animate all the tiles at once
    foreach (var tile in _tileCanvas.Children.OfType<Rectangle>())
    {
        // Add all the generated items to the story board
        foreach (var animation in BuildTileAnimations(tile, 0.0, 0.0, 1.0, easingFunction))
        {
            board.Children.Add(animation);
        }
    }
&nbsp; 
    return board;
}

Exactly the same animate tiles method is used here, but instead of providing a positive or negative translation value I choose a neutral translation here.

The transforms that are animated were added before hand when generating the tiles. Animating the render transforms has two advantages. The first one is that you don’t need to change the control layout for the animations to work, which means less code to write. The second advantage is that the animation can go on beyond the border of the control itself. Which makes for a prettier effect.

Next steps

The demo is pretty basic, but you can of extend it by connecting to Flickr, Bing or Google to bring in more photos. Adding new photos is easy because I used an ImageSource which can be anything from a resource to an image downloaded from a webserver.

Don’t have Silverlight or looking for an alternative? Checkout Marco’s weblog: http://www.marcofolio.net/webdesign/jfancytile_a_jquery_tile_shifting_image_viewer_plugin.html for an alternative implementation using jQuery.