wpf仿QQ之窗体翻转

时间：2021-07-30 11:39:56

很久以前在网上找过窗体翻转的Demo，但看得不是很明白，大多是内容的翻转，研究了下，现在分享给大家。

wpf仿QQ之窗体翻转

利用UIElement.RenderTransform 属性就能实现元素的呈现位置的转换，因此只需改变window的RenderTransform属性就可以达到想要的效果。

//关键代码

<Window.RenderTransform>

        <ScaleTransform x:Name="WindowTransform"></ScaleTransform>

 </Window.RenderTransform>

//动画

<Storyboard x:Key="TransformToMiddle">

            <DoubleAnimation Storyboard.TargetName="WindowTransform" Storyboard.TargetProperty="ScaleX" From="1" To="-1" By="1" Duration="0:0:1" />

</Storyboard>

后台调用动画

Storyboard sbto = Application.Current.Resources["TransformToMiddle"] as Storyboard;
sbto.Brgin(this);

如何使用 ScaleTransform 水平或垂直翻转 UIElement（查阅MSDN）

下图显示要翻转的按钮。

wpf仿QQ之窗体翻转

<Button Content="Flip me!" Padding="5">

</Button>

若要水平翻转按钮，请创建一个 ScaleTransform 并将它的 ScaleX 属性设置为 -1。 将 ScaleTransform 应用于按钮的 RenderTransform 属性。

<Button Content="Flip me!" Padding="5">

  <Button.RenderTransform>

    <ScaleTransform ScaleX="-1" />

  </Button.RenderTransform>

</Button>

效果图wpf仿QQ之窗体翻转

若要原地翻转按钮，需要将 ScaleTransform 应用于按钮的中心，而不是角。 将 ScaleTransform 应用于按钮中心的一个简便方法是将按钮的 RenderTransformOrigin 属性设置为 0.5, 0.5。

<Button Content="Flip me!" Padding="5"

  RenderTransformOrigin="0.5,0.5">

  <Button.RenderTransform>

    <ScaleTransform ScaleX="-1" />

  </Button.RenderTransform>

</Button>

wpf仿QQ之窗体翻转

由于我的程序里包含太多其它东西，程序就不上传了

相关文章