WPF控制翻转

我有一个主要由图像和按钮组成的控件。我想在图像背面显示图像元数据，并在按下按钮时使控件水平翻转：

i、 e

点击“信息”按钮

将图像绕轴旋转180度

用元数据显示图像的“背面”（或其他真正的内容）

显然，当单击红色“关闭”按钮时，图像将围绕最后180度旋转，以便图像再次显示

---

我没有在XAML中真正实现任何3D，但我不明白为什么这会太复杂…

没有3D也可以实现

ScaleEffect

将水平比例从

1

更改为

-1

具有相同的视觉效果：

<Image RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <ScaleTransform ScaleX="-1" />
    </Image.RenderTransform>
</Image>

您可以设置

ScaleX

属性的动画以获得旋转效果。您还应该将其可视性从

可见

更改为

隐藏

，反之亦然。使图像在旋转90度后消失。同时，后面板应清晰可见。

请仔细观察

---

我正在等待Silverlight的平面投影到WPF。

一个可翻转的用户控件：

<UserControl x:Class="Test.UserControls.FlipControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test.UserControls" Name="control">
    <UserControl.Resources>
        <ContentControl x:Key="BackSide" Content="{Binding Source={x:Reference control}, Path=Back}" RenderTransformOrigin="0.5,0.5">
            <ContentControl.RenderTransform>
                <ScaleTransform ScaleX="-1" />
            </ContentControl.RenderTransform>
        </ContentControl>
    </UserControl.Resources>
    <ContentControl RenderTransformOrigin="0.5,0.5">
        <ContentControl.RenderTransform>
            <TransformGroup>
                <ScaleTransform x:Name="transform" ScaleX="1" />
            </TransformGroup>
        </ContentControl.RenderTransform>
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
                <Setter Property="Content" Value="{Binding ElementName=control, Path=Front}" />
                <Style.Triggers>
                    <DataTrigger Value="True">
                        <DataTrigger.Binding>
                            <Binding ElementName="transform" Path="ScaleX">
                                <Binding.Converter>
                                    <local:LessThanXToTrueConverter X="0" />
                                </Binding.Converter>
                            </Binding>
                        </DataTrigger.Binding>
                        <DataTrigger.Setters>
                            <Setter Property="Content" Value="{StaticResource BackSide}"/>
                        </DataTrigger.Setters>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
</UserControl>

---

您可以使用这个博客中的想法，它展示了如何在Silverlight中实现这一点。如果我们使用ViewPort3D而不是投影，那么WPF中的情况也差不多

---

我知道这是一篇老文章，但请看一看

---

Josh smith在2009年提供了一个控件来实现这一点

这只会翻转图像，询问者的图像有一个背面。是的，但他不能模拟图像背面的出现，使用相同的效果，但以另一种方式？我可以，但我认为ScaleX单独使旋转看起来非常平坦。。。只是想弄清楚需要什么样的扭曲才能给它一些深度：）你想给旋转设置动画吗？是和否。我需要能够关闭动画，因为应用程序将在本地和远程连接上使用。抱歉-没有说清楚：）是的，我一直在尝试X比例变换，虽然它提供了一个旋转的外观，因为控件没有倾斜，它看起来相当平坦。我将继续调查，但为了简单起见，可能会解决这个问题：）我通过翻转两次来“修复”翻转的背面问题；你是对的，看起来很平坦，但我怀疑一个简单的倾斜变换会让它看起来很好，透视变换会更好。是的，它需要真正的剪切来获得正确的透视，而要做到这一点需要3D。当我可以证明在UI上花费更多的时间时，我会进一步调查：）+1用于动画，但在使用单独的控件而不是图像作为UI元素时，back控件不起作用…那东西的交互逻辑非常糟糕，因此，虽然这个想法可能是好的，但我建议几乎完全重写它。此外，您确定可以创建一个这样的RenderTransform吗？

<uc:FlipControl x:Name="fc">
    <uc:FlipControl.Front>
        <Image Source="/Images/Default.ico" />
    </uc:FlipControl.Front>
    <uc:FlipControl.Back>
        <Image Source="/Images/Error.ico" />
    </uc:FlipControl.Back>
</uc:FlipControl>

fc.Flip();