WPF rotating button

Question

Help me plz. I need to animate rotation of the button on z-axis without using external libraries, only with C# and xaml code.

Is that possible? How can I do that?

Thanks.

Fredrik Hedblad · Accepted Answer · 2011-08-24T06:14:44.337

Have a look at Viewport2DVisual3D

The example in the link does exactly that.

Edit: Here is the example from the link with an added animation of the Z axis

Looks like this
enter image description here

<Viewport3D>
    <Viewport3D.Camera>
        <PerspectiveCamera Position="0, 0, 4"/>
    </Viewport3D.Camera>
    <Viewport2DVisual3D x:Name="v2dv3d">
        <Viewport2DVisual3D.Transform>
            <RotateTransform3D>
                <RotateTransform3D.Rotation>
                    <AxisAngleRotation3D Angle="0" Axis="0, 1, 0" />
                </RotateTransform3D.Rotation>
            </RotateTransform3D>
        </Viewport2DVisual3D.Transform>
        <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 Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
        </Viewport2DVisual3D.Material>
        <Button Content="Hello, 3D">
            <Button.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <Rotation3DAnimation Storyboard.TargetName="v2dv3d"
                                                    Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                                                    Duration="0:0:2"
                                                    BeginTime="0:0:0">
                                <Rotation3DAnimation.From>
                                    <AxisAngleRotation3D Angle="0" Axis="0, 1, 0" />
                                </Rotation3DAnimation.From>
                                <Rotation3DAnimation.To>
                                    <AxisAngleRotation3D Angle="90" Axis="0, 1, 0" />
                                </Rotation3DAnimation.To>
                            </Rotation3DAnimation>
                            <Rotation3DAnimation Storyboard.TargetName="v2dv3d"
                                                    Storyboard.TargetProperty="(Viewport2DVisual3D.Transform).(RotateTransform3D.Rotation)"
                                                    Duration="0:0:2"
                                                    BeginTime="0:0:2">
                                <Rotation3DAnimation.From>
                                    <AxisAngleRotation3D Angle="-90" Axis="0, 1, 0" />
                                </Rotation3DAnimation.From>
                                <Rotation3DAnimation.To>
                                    <AxisAngleRotation3D Angle="0" Axis="0, 1, 0" />
                                </Rotation3DAnimation.To>
                            </Rotation3DAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Viewport2DVisual3D>
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>

Thank you for your answer. I was not precise. I need to animate this process. — Yevgeniy, Aug 23 '11 at 23:30
@Eugene: Updated my answer with a z axis animation. Paste it and try it :) — Fredrik Hedblad, Aug 24 '11 at 05:40
@Meleak This is a Y-axis rotation. If you change the axis to Z, you can also simplify the storyboard, because the button will never turn away from the camera. — Kimberly, Aug 24 '11 at 21:16
@Kimberly: True, this isn't Z-axis (mixed up 3d with Z-axis) but I have a feeling this effect was what the OP wanted. Like a rotating logotype in 3D (I could be wrong of course) — Fredrik Hedblad, Aug 28 '11 at 10:40
@Meleak pls, see my question http://stackoverflow.com/questions/15499764/rotate-a-panel-90?noredirect=1#comment21947277_15499764 I need rotate my panel when user click on the button... — Ladessa, Mar 19 '13 at 14:06

score 1 · Answer 2 · answered Aug 23 '11 at 23:47

1

Transformations may help you in this case. Look at here if that helps.

The RotateTransform class is used to rotate a WPF object in an X-Y plane. It can be applied via XAML or directly via imperative code.

answered Aug 23 '11 at 23:47

CharithJ

46,289
20
116
131

score 1 · Answer 3 · answered Aug 24 '11 at 03:07

If you only need to rotate your button about the Z axis, then you won't need any 3D graphics. All UIElements (such as Buttons) have the property RenderTransform, which enables basic transformation of their default appearance. By means of Storyboards, WPF allows you to animate almost any dependency property. You can use a storyboard, triggered on load, to animate the Angle property of a RotateTransform applied to the button:

<Button Width="100" Height="100" Content="Wheeee!">
  <Button.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard>
        <Storyboard Storyboard.TargetName="ButtonRotation" Storyboard.TargetProperty="Angle">
          <DoubleAnimation From="0" To="360" Duration="0:0:3" RepeatBehavior="Forever"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
  <Button.RenderTransform>
    <RotateTransform x:Name="ButtonRotation" CenterX="50" CenterY="50" Angle="45"/>
  </Button.RenderTransform>
</Button>

The Viewport2DVisual3D, as recommended by @Meleak, also supports animation, and is fun to play with if you have time. To animate the MSDN example, you need to add a name to the AxisAngleRotation3D element and switch it to target the Z axis:

<AxisAngleRotation3D x:Name="RotateAboutZ" Angle="40" Axis="0, 0, 1" />

Then, as above, trigger a storyboard to begin on the Loaded event of the Viewport3D. In either case, if you need more control over the animation, you can make your storyboard a named resource to be referenced by other events, or even build and control it entirely in code.

WPF rotating button

3 Answers3

Linked