WPF Fernando’s Blog

One of the amazing things in WPF is how easy can be make 3D stuff, and even animate it. I’m gonna show my first experiment with 3D animations. The “CubeButtonStyle” Style was taken from the book “Windows Presentation Foundation Unleashed” (btw, If you want learn WPF you MUST have this book).

This is the code for our Window, no code behind needed this time

 

<Window x:Class=”BlogStuff.ButtonWindow”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

Title=”Cube Button” Height=”600″ Width=”600″>

<Window.Resources>

<Style x:Key=”CubeButtonStyle” TargetType=”{x:Type Button}”>

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate>

<ControlTemplate.Triggers>

<!– When the button is pressed, spin the cube –>

<Trigger Property=”Button.IsPressed” Value=”true”>

<Trigger.EnterActions>

<BeginStoryboard>

<Storyboard TargetName=”RotateY” TargetProperty=”Angle”>

<DoubleAnimation Duration=”0:0:1″ From=”0″ To=”360″ DecelerationRatio=”1.0″/>

</Storyboard>

</BeginStoryboard>

</Trigger.EnterActions>

</Trigger>

</ControlTemplate.Triggers>

<Viewport3D>

<Viewport3D.Camera>

<PerspectiveCamera Position=”2.9,2.65,2.9″ LookDirection=”-1,-1,-1″/>

</Viewport3D.Camera>

<Viewport3D.Children>

<ModelVisual3D x:Name=”Light”>

<ModelVisual3D.Content>

<DirectionalLight Direction=”-0.3,-0.4,-0.5″/>

</ModelVisual3D.Content>

</ModelVisual3D>

<ModelVisual3D x:Name=”Cube”>

<ModelVisual3D.Transform>

<RotateTransform3D>

<RotateTransform3D.Rotation>

<AxisAngleRotation3D x:Name=”RotateY” Axis=”0,1,0″ Angle=”0″/>

</RotateTransform3D.Rotation>

</RotateTransform3D>

</ModelVisual3D.Transform>

<ModelVisual3D.Content>

<GeometryModel3D>

<GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<!– Use a VisualBrush to display the Button’s original

Background and Content on the faces of the cube. ViewboxUnits=”RelativeToBoundingBox”–>

<VisualBrush Stretch=”Fill” Transform=”1,0,0,-1,0,1″>

<VisualBrush.Visual>

<Label Content=”{Binding Path=Content,

RelativeSource={RelativeSource TemplatedParent}}”

Background=”{Binding Path=Background,

RelativeSource={RelativeSource TemplatedParent}}”

Foreground=”{Binding Path=Foreground,

RelativeSource={RelativeSource TemplatedParent}}”

FontSize=”9″

Margin=”5,5,5,5″

HorizontalContentAlignment=”Center”

VerticalAlignment=”Center”/>

</VisualBrush.Visual>

</VisualBrush>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

<GeometryModel3D.Geometry>

<MeshGeometry3D

Positions=”1,1,-1 1,-1,-1 -1,-1,-1 -1,1,-1 1,1,1 -1,1,1 -1,-1,1

1,-1,1 1,1,-1 1,1,1 1,-1,1 1,-1,-1 1,-1,-1 1,-1,1 -1,-1,1 -1,-1,-1

-1,-1,-1 -1,-1,1 -1,1,1 -1,1,-1 1,1,1 1,1,-1 -1,1,-1 -1,1,1″

TriangleIndices=”0 1 2 0 2 3 4 5 6 4 6 7 8 9 10 8 10 11 12

13 14 12 14 15 16 17 18 16 18 19 20 21 22 20 22 23″

TextureCoordinates=”0,1 0,0 1,0 1,1 1,1 0,1 0,-0 1,0 1,1

0,1 0,-0 1,0 1,0 1,1 0,1 0,-0 0,0 1,-0 1,1 0,1 1,-0

1,1 0,1 0,0″/>

</GeometryModel3D.Geometry>

</GeometryModel3D>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D.Children>

</Viewport3D>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height=”auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<Label Content=”Click on the button to spin the cube!” FontSize=”18″/>

<Button Style=”{StaticResource CubeButtonStyle}” Content=”Click Me”

Background=”LightGreen” Foreground=”Yellow” Grid.Row=”1″/>

</Grid>

</Window>

 

Get fun!