How do you make a canvas (labels, rectangles, etc) 3d in expression blend 4?
I'm trying to make a "page turn", similar to the selections in windows 开发者_StackOverflow中文版phone 7 media player. How do I make the left side an axis and make the right side "keystoned"? I've figured this out with images, I go into Tools>Make Image 3D. I want to do this with a canvas. Is this possible in wpf using expression blend 4?
I've been looking into this as well.
Just note that it depends on whether you are targeting Silverlight or WPF. Silverlight has the PlaneProjection element which appears as a Perspective section under Transform in Blend.
For WPF you will need to use Viewport3DVisual3D as the other answer says though there are helpful open source helpers out there. The nearest to Silverlight's PlaneProjection that I found is called Plane and can be found here:
http://blog.endquote.com/post/710116433/planeprojection-in-wpf
You can try to use Viewport2DVisual3D
, you may need to do a lot of hand-coding though. To make the content hinge on one side you need to translate, rotate and translate back, by default blend uses one transform of each kind only. I adapted the example in the documentation to show this:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Duration="0:0:5"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="rotation"
Storyboard.TargetProperty="Angle"
To="-360"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="0, 0, 4"/>
</Viewport3D.Camera>
<!-- Button on 3D -->
<Viewport2DVisual3D>
<!-- Give the plane a slight rotation -->
<Viewport2DVisual3D.Transform>
<Transform3DGroup>
<TranslateTransform3D OffsetX="1"/>
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="rotation" Axis="0, 1, 0"/>
</RotateTransform3D.Rotation>
</RotateTransform3D>
<TranslateTransform3D OffsetX="-1"/>
</Transform3DGroup>
</Viewport2DVisual3D.Transform>
<!-- The Geometry, Material, and Visual for the Viewport2DVisual3D -->
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Brush="White" Viewport2DVisual3D.IsVisualHostMaterial="True"/>
</Viewport2DVisual3D.Material>
<Grid Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" Background="Transparent">
<Button VerticalAlignment="Center" Content="Hello, 3D"/>
</Grid>
</Viewport2DVisual3D>
<!-- Lights -->
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
</ScrollViewer>
</Page>
精彩评论