Mike Taulty's Blog
Bits and Bytes from Microsoft UK
Silverlight 3 – Simple “Flip Control” built on PlaneProjection

Blogs

Mike Taulty's Blog

Elsewhere

Archives

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;
imageimage   image image 

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.


Posted Mon, Apr 27 2009 4:46 PM by mtaulty
Filed under: ,

Comments

Simple “Flip Control” built on PlaneProjection « vincenthome’s Tech Clips wrote Simple &ldquo;Flip Control&rdquo; built on PlaneProjection &laquo; vincenthome&#8217;s Tech Clips
on Tue, Apr 28 2009 7:21 AM
Dew Drop - April 28, 2009 | Alvin Ashcraft's Morning Dew wrote Dew Drop - April 28, 2009 | Alvin Ashcraft's Morning Dew
on Tue, Apr 28 2009 7:29 AM
Mike Taulty's Blog : Silverlight 3 ??? Simple ???Flip Control??? built … « L R G Clothing wrote Mike Taulty&#39;s Blog : Silverlight 3 ??? Simple ???Flip Control??? built &#8230; &laquo; L R G Clothing
on Wed, Apr 29 2009 5:19 AM