Silverlight 3 – Simple “Flip Control” built on PlaneProjection

Posted on by

Just sharing a very small experiment I did with building a simple control that would use the new PlaneProjection capabilities in Silverlight 3 in order to present double-sided content which was capable of being flipped over.

I did a similar thing in this FlickR project but I just wanted to make it a little more general (and I’d like to make it more general still if I get a chance to spend a little more time on it).

I’ve shared the control project here for download – what this provides is a control called FlipControl which has properties;

  • IsIdle
  • FrontContent
  • RearContent
  • FlipAxis (Vertical/Horizontal)
  • Duration
  • OffsetX
  • OffsetY
  • OffsetZ

and then a single method;

Flip()

and a single event;

FlipCompleted

and so I can go and use it in a Silverlight app with something like;

<UserControl
    x:Class="SilverlightApplication5.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="clr-namespace:MikesControls;assembly=MikesControls">
    <Grid
        x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition
                Height="Auto" />
        </Grid.RowDefinitions>
        <mc:FlipControl
            x:Name="fc"
            Margin="10"
            Duration="00:00:00.5"
            FlipAxis="Horizontal"
            FlipDirection="Forwards"
            OffsetX="96"
            OffsetY="96"
            OffsetZ="96"
            Width="384"
            Height="384">
            <mc:FlipControl.FrontContent>
                <Grid>
                    <Image
                        Source="/img10.jpg"
                        Stretch="Fill" />
                </Grid>
            </mc:FlipControl.FrontContent>
            <mc:FlipControl.RearContent>
                <Grid>
                    <Image
                        Source="/img21.jpg"
                        Stretch="Fill" />
                </Grid>
            </mc:FlipControl.RearContent>
        </mc:FlipControl>
        <StackPanel
            Grid.Row="1">
            <Button
                IsEnabled="{Binding ElementName=fc,Path=IsIdle}"
                Content="Forward"
                Margin="10"
                HorizontalAlignment="Center"
                Click="OnFlip" />
            <Button
                IsEnabled="{Binding ElementName=fc,Path=IsIdle}"
                Content="Back"
                Margin="10"
                HorizontalAlignment="Center"
                Click="OnFlipBackwards" />
        </StackPanel>
    </Grid>
</UserControl>

and that’s just setting an image on the “front” of the control and an image on the “back” of the control and is requesting a flip around the horizontal axis with a 1/2 second duration and that the flip ends up offset a little in the X,Y, Z directions.

There’s then a little bit of code behind that XAML in this case;

  public partial class MainPage : UserControl
  {
    public MainPage()
    {
      InitializeComponent();
    }
    void OnFlip(object sender, RoutedEventArgs e)
    {
      fc.FlipDirection = FlipDirection.Forwards;
      fc.Flip();
    }

    void OnFlipBackwards(object sender, EventArgs e)
    {
      fc.FlipDirection = FlipDirection.Backwards;
      fc.Flip();
    }
  }

and it produces an effect something like;

I’d like to add a few more options like flipping over multiple times and take a look at how I might ( or might not ) get this to work nicely in a listbox so I’ll perhaps revisit this in the future.