WPF控件翻转

Question

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

即

​

​

点击“信息”按钮...

​

​

将图像绕轴旋转180度...

​

​

显示“背面”的图像与元数据(或任何实际)。

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

我没有真正用XAML做过任何3D，但我不明白为什么这会太复杂……

Answer 1

它可以在没有3D的情况下完成。将水平比例从1更改为-1的ScaleEffect具有相同的视觉效果：

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

您可以设置ScaleX属性的动画以获得旋转效果。您还应该将它的可见性从Visible更改为Hidden，反之亦然。使图像在旋转90度后消失。同时，后面板应该变得可见。

Answer 2

可翻转的UserControl：

<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>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Windows.Media.Animation;

namespace Test.UserControls
{
    /// <summary>
    /// Interaction logic for FlipControl.xaml
    /// </summary>
    public partial class FlipControl : UserControl, INotifyPropertyChanged
    {
        public static readonly DependencyProperty FrontProperty =
            DependencyProperty.Register("Front", typeof(UIElement), typeof(FlipControl), new UIPropertyMetadata(null));
        public UIElement Front
        {
            get { return (UIElement)GetValue(FrontProperty); }
            set { SetValue(FrontProperty, value); }
        }

        public static readonly DependencyProperty BackProperty =
            DependencyProperty.Register("Back", typeof(UIElement), typeof(FlipControl), new UIPropertyMetadata(null));
        public UIElement Back
        {
            get { return (UIElement)GetValue(BackProperty); }
            set { SetValue(BackProperty, value); }
        }

        public static readonly DependencyProperty FlipDurationProperty =
            DependencyProperty.Register("FlipDuration", typeof(Duration), typeof(FlipControl), new UIPropertyMetadata((Duration)TimeSpan.FromSeconds(0.5)));
        public Duration FlipDuration
        {
            get { return (Duration)GetValue(FlipDurationProperty); }
            set { SetValue(FlipDurationProperty, value); }
        }

        private bool _isFlipped = false;
        public bool IsFlipped
        {
            get { return _isFlipped; }
            private set
            {
                if (value != _isFlipped)
                {
                    _isFlipped = value;
                    OnPropertyChanged(new PropertyChangedEventArgs("IsFlipped"));
                }
            }
        }

        private IEasingFunction EasingFunction = new SineEase() { EasingMode = EasingMode.EaseInOut };

        public FlipControl()
        {
            InitializeComponent();
        }

        public void Flip()
        {
            var animation = new DoubleAnimation()
            {
                Duration = FlipDuration,
                EasingFunction = EasingFunction,
            };
            animation.To = IsFlipped ? 1 : -1;
            transform.BeginAnimation(ScaleTransform.ScaleXProperty, animation);
            IsFlipped = !IsFlipped;
            OnFlipped(new EventArgs());
        }

        public event EventHandler Flipped;

        protected virtual void OnFlipped(EventArgs e)
        {
            if (this.Flipped != null)
            {
                this.Flipped(this, e);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, e);
            }
        }
    }

    public class LessThanXToTrueConverter : IValueConverter
    {
        public double X { get; set; }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return (double)value < X;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

使用示例：

<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();

Answer 3

我知道以前的帖子，但看看http://thriple.codeplex.com/吧

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