<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.
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)