Click here to Skip to main content
15,885,546 members
Articles / Desktop Programming / WPF

Rotating WPF Content in 3D Space

Rate me:
Please Sign up or sign in to vote.
4.92/5 (72 votes)
22 Mar 2009CPOL9 min read 336.9K   13.8K   170  
Introducing ContentControl3D: a control that makes it easy to incorporate 3D flips into any WPF user interface.
<UserControl 
  x:Class="ContentControl3D_Demo.Samples.ContentTemplatesSample"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:thriple="http://thriple.codeplex.com/"
  >
  <UserControl.Background>
    <ImageBrush ImageSource="Images/OuterSpace.jpg" />
  </UserControl.Background>

  <UserControl.Resources>
    <!-- 
    This template is used to render both the  
    front and back sides of the surface. 
    -->
    <DataTemplate x:Key="FrontAndBackTemplate">
      <Border 
        x:Name="border" 
        Background="#AA000000" 
        BorderBrush="DarkRed" 
        BorderThickness="3"
        CornerRadius="6" 
        Padding="2"
        >
        <Grid x:Name="grid" Width="300" Height="300">
          <Grid.Background>
            <ImageBrush 
              ImageSource="Images/Spaceship1.jpg" 
              Opacity="0.5"
              Stretch="Uniform" 
              />
          </Grid.Background>

          <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <TextBlock
            Grid.Row="0"
            FontSize="20"
            FontWeight="Bold"
            Foreground="DodgerBlue"
            HorizontalAlignment="Center"
            Text="{TemplateBinding Content}"
            TextAlignment="Center"
            VerticalAlignment="Top"
            />
          <TextBlock Grid.Row="1" HorizontalAlignment="Center">
            <Hyperlink Command="thriple:ContentControl3D.RotateCommand">
              <TextBlock Text="(rotate)" />
            </Hyperlink>
          </TextBlock>
        </Grid>
      </Border>
      <DataTemplate.Triggers>
        <!-- 
        Show a different spaceship on the back side of the surface. 
        -->
        <Trigger Property="thriple:ContentControl3D.IsOnFrontSide" Value="False">
          <Setter TargetName="grid" Property="Background">
            <Setter.Value>
              <ImageBrush ImageSource="Images/Spaceship2.jpg" Stretch="Uniform" Opacity="0.5"/>
            </Setter.Value>
          </Setter>
        </Trigger>

        <!-- 
        Fade away the surface during a rotation, 
        and then fade it back in halfway through. 
        -->
        <DataTrigger 
          Binding="{Binding 
            Path=IsRotating, 
            RelativeSource={RelativeSource 
              Mode=FindAncestor, 
              AncestorType={x:Type thriple:ContentControl3D}}}"
          Value="True"
          >
          <DataTrigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="border" 
                  Storyboard.TargetProperty="Opacity" 
                  From="1" To="0.25" 
                  AutoReverse="True"
                  Duration="0:0:0.400"
                  />
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>

    <!-- 
    This Style makes the control rotate in the 'opposite' 
    direction when flipping from back to front. 
    -->
    <Style x:Key="BackFlipStyle" TargetType="{x:Type thriple:ContentControl3D}">
      <Setter Property="RotationDirection" Value="LeftToRight" /> 
      <Style.Triggers>
        <Trigger Property="IsFrontInView" Value="False">
          <Setter Property="RotationDirection" Value="RightToLeft" />
        </Trigger>
      </Style.Triggers>
    </Style>
  </UserControl.Resources>

  <thriple:ContentControl3D
    AnimationLength="800"
    BackContent="Spacecruiser"
    BackContentTemplate="{StaticResource FrontAndBackTemplate}"
    Content="Galactic Warship" 
    ContentTemplate="{StaticResource FrontAndBackTemplate}"
    MaxWidth="700" MaxHeight="700"
    Style="{StaticResource BackFlipStyle}"
    />
</UserControl>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
Josh creates software, for iOS and Windows.

He works at Black Pixel as a Senior Developer.

Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.

Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.

Check out his Advanced MVVM[^] book.

Visit his WPF blog[^] or stop by his iOS blog[^].

See his website Josh Smith Digital[^].

Comments and Discussions