Click here to Skip to main content
15,881,588 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.5K   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.AnimationLengthSample"
  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>
    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
      <GradientStop Color="#CC000000" Offset="0" />
      <GradientStop Color="#44000000" Offset="1" />
    </LinearGradientBrush>
  </UserControl.Background>
  
  <UserControl.Resources>
    <DataTemplate x:Key="ImageButtonTemplate">
      <Button 
        Command="thriple:ContentControl3D.RotateCommand"
        Content="{TemplateBinding Content}" 
        Cursor="Hand" 
        Width="480" Height="360"
        >
        <Button.Template>
          <ControlTemplate TargetType="{x:Type Button}">
            <Border BorderBrush="#CC000000" BorderThickness="8" Background="DarkGray" Padding="1">
              <Image Source="{Binding}" Stretch="Fill" />
            </Border>
          </ControlTemplate>
        </Button.Template>
      </Button>
    </DataTemplate>
  </UserControl.Resources>

  <DockPanel>
    <Border 
      DockPanel.Dock="Bottom" 
      Background="LightGray"
      BorderBrush="Gray"
      BorderThickness="1"
      CornerRadius="6"
      Margin="3"
      Padding="3"
      >
      <DockPanel>
        <TextBlock DockPanel.Dock="Left" Text="Animation Length: " VerticalAlignment="Center" />
        <TextBlock 
          DockPanel.Dock="Right" 
          Text="{Binding ElementName=cntCtrl3D, Path=AnimationLength}" 
          VerticalAlignment="Center" 
          />
        <Slider 
          Minimum="10" Maximum="2000"
          Value="{Binding ElementName=cntCtrl3D, Path=AnimationLength}" 
          />
      </DockPanel>
    </Border>
    
    <thriple:ContentControl3D 
      x:Name="cntCtrl3D"
      BackContent="Images/HawaiianBay.jpg"
      BackContentTemplate="{StaticResource ImageButtonTemplate}"
      Content="Images/HawaiianBayAtSunrise.jpg" 
      ContentTemplate="{StaticResource ImageButtonTemplate}"
      MaxWidth="600" MaxHeight="600"
      />
  </DockPanel>
</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