如何在WPF中旋转整个窗口？ [英] How can I spin an entire window around in WPF?

问题描述

我希望能够对我的主窗口产生影响，它似乎转过来显示配置页面。想象一下，就像你正在看一张纸。  要配置应用程序，当您按下配置按钮时，
窗口似乎转过来，就像您看到一张纸被翻过来一样。  实际上，一旦窗口转向一侧，它就会消失，配置窗口会继续旋转，直到它在你面前是平的。  当
你关闭配置窗口时，过程就会反转。

我知道我问了很多，但有没有办法在XAML中做到这一点？  我知道我可以做一个故事板，窗口的宽度缩小到1，但这不会使窗口的内容看起来发生变化，只会被裁剪为空。

谢谢，

Jamie

解决方案

诀窍是包裹正面和背面您的卡片在Viewbox中，然后为歪斜和宽度设置动画。看看：

 
 <  窗口 
  xmlns   =  "   http： //schemas.microsoft.com/winfx/2006/xaml/presentation"  
  xmlns：x   =  "   http://schemas.microsoft.com/winfx/2006/xaml  "  
  xmlns：d   =  "   http://schemas.microsoft.com/expression/blend/2008  "   xmlns：mc   =  "   http://schemas.openxmlformats.org/markup-compatibility/2006  "   mc：可忽略  =  "   d  "  
  x：类  =  "   _ DTest.MainWindow  "  
  x：Name   =  "   Window  "  
 标题  =  "   MainWindow  " ;  
 宽度  =  "   500  "  高度  =  "   500  "  >  
 <   Window.Resources  >  
 <  故事板  x：键  =  "  翻转 "  >  
 <   DoubleAnimationUsingKeyFrames   Storyboard.TargetProperty   =  "  （UIElement.RenderTransform）。（TransformGroup .Children）[1]。（SkewTransform.AngleY） "   Storyboard.TargetName   =  "  正面 "  >  
 < ;   EasingDoubleKeyFrame   KeyTime   =  "   0：0：0.5  "  值  =  "   89  "   />  
 < /   DoubleAnimationUsingKeyFrames  >  
 <   DoubleAnimationUsingKeyFrames   Storyboard .TargetProperty   =  "   （FrameworkElement.Width） "   Storyboard.TargetName   =  "  前 "  >  
 <   EasingDoubleKeyFrame   KeyTime   =  "   0：0：0.5  &q uot;  值  =  " ;   0  "   / >  
 < /   DoubleAnimationUsingKeyFrames  >  
 <   DoubleAnimationUsingKeyFrames   Storyboard.TargetProperty   =  "  （FrameworkElement.Width） "   Storyboard .TargetName   =  "  返回 "  >  
 <   EasingDoubleKeyFrame   KeyTime   =  "   0：0：0.5  "  值  =  "   0  "   />  
 <   EasingDoubleKeyFrame  < span style ="color：Red;"> KeyTime   =  "   0：0：1  "  值  =  "   300  "   /> ;  
 < /   DoubleAnimationUsingKeyFrames  >  
 <   DoubleAnimationUsingKeyFrames  < span style ="color：Red;"> Storyboard.TargetProperty   =  "  （UIElement.RenderTransform）。（TransformGroup.Children）[1]。（SkewTransform.AngleY） "   Storyboard.TargetName   =  "  返回 "  >  
 <   EasingDoubleKeyFrame   KeyTime   =  &q uot;   0：0：0.5  "  值  =  "    -  89  "   />  
 <   EasingDoubleKeyFrame   KeyTime   =  "   0：0：1  "  值  =  "   0  "   />  
 < /   DoubleAnimationUsingKeyFrames  >  
 < /  故事板 >  
 < /   Window.Resources  >  
 <   Window.Triggers  >  
 <   EventTrigger   RoutedEvent   =  "   FrameworkElement.Loaded  "  >  
 <   BeginStoryboard  故事板  =  "   {StaticResource Flip}  "   />  
 < /   EventTrigger  >  
 < /   Window.Triggers  >  
 <  网格 >  
 <   Viewbox   x：名称  =  "  正面 "  宽度  =  "   300   "  高度  =  "   200  "   RenderTransformOrigin   =  "   0.5,0.5  "  >  
 <   Viewbox.RenderTransform   >  
 <   TransformGroup  >  
 <   ScaleTransform  < span style ="color：Blue;"> />  
 <   SkewTransform   />  
 <   RotateTransform   />  
 <   TranslateTransform   />  
 < /   TransformGroup  >  
 < /   Viewbox.RenderTransform  >  
 <  边框 背景  =  "  黑色 "  宽度  =  "   300  "  高度  =  "   200  "  >  
 <   TextBlock  文字  =   "  看着我！ "  前景  =  "  白色 "   Horizo​​ntalAlignment   =  "  中心  "   VerticalAlignment   =  " ;  中心 "   FontSize   =  "   48  "   FontWeight   =  "   Bold  "   />  
 < /  边框 >  
 < /   Viewbox  >  
 <   Viewbox   x：名称  =  "  返回 "  宽度  =  "  < span style ="color：Blue;"> 0  "  高度  =  "   200  "   RenderTransformOrigin   =  "   0.5,0.5  "  >  
 <   Viewbox。 RenderTransform  >  
 <   TransformGroup  >  
 <   ScaleTransform   />  
 <   SkewTransform   AngleY   =  "    -  89  "   /> ;  
 <   RotateTransform   />  
 <   TranslateTransform  < span style ="color：Blue;"> />  
 < /   TransformGroup  >  
 < /   Viewbox.RenderTransform  >  
 <  边框 < span style ="color：Red;">背景  =  "  红色 "  宽度  =  "   300  "  高度  =  "   200  "  >  
 <   TextBlock  文字  =  "  < span style ="color：Blue;">看着我！ "  前景  =  &quo t;  白色 "   Horizo​​ntalAlignment   =  "   Center  "   VerticalAlignment   =  "  中心 "   FontSize   =  "   48  "   FontWeight   =  "   Bold  "   />  
  < /  边框 >  
 < /   Viewbox  >  
 < /  网格 >  
 
 
 < /  窗口 >  
 

I would like to be able to have an effect on my main window where it appears to turn around to display the configuration page.  Think of it like you're looking at a piece of paper.  To configure the application, when you press the configure button, the window appears to turn around, like you're seeing a piece of paper turn over.  In actuality, once the window has turned to the side, it disappears and the configuration window appears to continue the rotation until it is flat in front of you.  When you dismiss the configuration window, the process is reversed.

I know I'm asking a lot, but is there any way to do this in XAML?  I know I can do a storyboard where the width of the window shrinks to 1, but that doesn't make the contents of the window appear to change, just get cropped down to nothing.

Thanks,

Jamie

解决方案

The trick is to wrap the front and back of your cards in a Viewbox, then animate both the skew and the width. Take a look:

<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	x:Class="_DTest.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="500" Height="500">
	<Window.Resources>
		<Storyboard x:Key="Flip">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="Front">
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="89"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Front">
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="Back">
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="300"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="Back">
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-89"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</Window.Resources>
	<Window.Triggers>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource Flip}"/>
		</EventTrigger>
	</Window.Triggers>
	<Grid>
		<Viewbox x:Name="Front" Width="300" Height="200" RenderTransformOrigin="0.5,0.5" >
			<Viewbox.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Viewbox.RenderTransform>
			<Border Background="Black" Width="300" Height="200" >
				<TextBlock Text="Look at me!" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontWeight="Bold"/>
			</Border>
		</Viewbox>
		<Viewbox x:Name="Back" Width="0" Height="200" RenderTransformOrigin="0.5,0.5">
			<Viewbox.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform AngleY="-89"/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Viewbox.RenderTransform>
			<Border Background="Red" Width="300" Height="200">
				<TextBlock Text="Look at me!" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="48" FontWeight="Bold"/>
			</Border>
		</Viewbox>
	</Grid>

	
</Window>

这篇关于如何在WPF中旋转整个窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！