[C#/WPF] 이미지 뒤집기

TestProject.zip

다운로드

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="이미지 뒤집기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="TopStoryboardKey"
            FillBehavior="Stop">
            <DoubleAnimation
                Storyboard.TargetName="targetTopSkewTransform"
                Storyboard.TargetProperty="(SkewTransform.AngleX)"
                Duration="0:0:0.1"
                From="0"
                To="-10" />
            <DoubleAnimation
                Storyboard.TargetName="targetTopScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                Duration="0:0:0.25"
                From="1"
                To="0" />
        </Storyboard>
        <Storyboard x:Key="BottomStoryboardKey"
            FillBehavior="Stop">
            <DoubleAnimation
                Storyboard.TargetName="targetBottomSkewTransform"
                Storyboard.TargetProperty="(SkewTransform.AngleX)"
                BeginTime="0:0:0.25"
                Duration="0:0:0.25"
                From="10"
                To="0" />
            <DoubleAnimation
                Storyboard.TargetName="targetBottomSkewTransform"
                Storyboard.TargetProperty="(SkewTransform.AngleX)"
                BeginTime="0:0:0.5"
                Duration="0:0:0.1"
                AutoReverse="True"
                From="0"
                To="5" />
            <DoubleAnimation
                Storyboard.TargetName="targetBottomScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                BeginTime="0:0:0.25"
                Duration="0:0:0.25"
                From="0"
                To="1" />
            <DoubleAnimation
                Storyboard.TargetName="targetBottomScaleTransform"
                Storyboard.TargetProperty="(ScaleTransform.ScaleY)"
                BeginTime="0:0:0.5"
                Duration="0:0:0.1"
                AutoReverse="True"
                From="1"
                To="0.9" />
        </Storyboard>
        <ImageBrush x:Key="TopBrushKey"    Viewbox="0 0 1 0.5"   />
        <ImageBrush x:Key="BottomBrushKey" Viewbox="0 0.5 1 0.5" />
    </Window.Resources>
    <Grid
        Width="640"
        Height="480"
        Margin="10"
        Background="RoyalBlue">
        <Rectangle x:Name="sourceTopRectangle"
            Height="240"
            VerticalAlignment="Top"
            Fill="{StaticResource TopBrushKey}" />
        <Rectangle x:Name="sourceBottomRectangle"
            Height="240"
            VerticalAlignment="Bottom"
            Fill="{StaticResource BottomBrushKey}" />
        <Rectangle x:Name="targetTopRectangle"
            Height="240"
            VerticalAlignment="Top"
            Fill="{StaticResource TopBrushKey}"
            RenderTransformOrigin="0.5,1">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <SkewTransform  x:Name="targetTopSkewTransform"  AngleX="0" />
                    <ScaleTransform x:Name="targetTopScaleTransform" ScaleY="1" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="targetBottomRectangle"
            Height="240"
            Fill="{StaticResource BottomBrushKey}"
            VerticalAlignment="Bottom"
            RenderTransformOrigin="0 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <SkewTransform  x:Name="targetBottomSkewTransform"  AngleX="0" />
                    <ScaleTransform x:Name="targetBottomScaleTransform" ScaleY="1" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <StackPanel
            Margin="20"
            Height="30"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom"
            Orientation="Horizontal">
            <StackPanel.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="Width"      Value="25"      />
                    <Setter Property="Cursor"     Value="Hand"    />
                    <Setter Property="Opacity"    Value="0.5"     />
                    <Setter Property="FontFamily" Value="Verdata" />
                    <Setter Property="FontSize"   Value="30"      />
                    <Setter Property="FontWeight" Value="Bold"    />
                    <Setter Property="FontStyle"  Value="Italic"  />
                    <Setter Property="Foreground" Value="White"   />
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="1" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </StackPanel.Resources>
            <TextBlock x:Name="textBlock1" Text="1" />
            <TextBlock x:Name="textBlock2" Text="2" />
            <TextBlock x:Name="textBlock3" Text="3" />
            <TextBlock x:Name="textBlock4" Text="4" />
        </StackPanel>
    </Grid>
</Window>

 

728x90

 

▶ MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;

namespace TestProject
{
    /// <summary>
    /// 메윈 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 테스트 윈도우
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            this.sourceTopRectangle.Fill    = (Resources["TopBrushKey"   ] as ImageBrush).Clone();
            this.sourceBottomRectangle.Fill = (Resources["BottomBrushKey"] as ImageBrush).Clone();
            this.targetTopRectangle.Fill    = (Resources["TopBrushKey"   ] as ImageBrush).Clone();
            this.targetBottomRectangle.Fill = (Resources["BottomBrushKey"] as ImageBrush).Clone();

            (Resources["TopStoryboardKey"   ] as Storyboard).Completed += topStoryboard_Completed;
            (Resources["BottomStoryboardKey"] as Storyboard).Completed += bottomStoryboard_Completed;

            this.textBlock1.MouseDown += textBlock_MouseDown;
            this.textBlock2.MouseDown += textBlock_MouseDown;
            this.textBlock3.MouseDown += textBlock_MouseDown;
            this.textBlock4.MouseDown += textBlock_MouseDown;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 텍스트 블럭 마우스 하강시 처리하기 - textBlock_MouseDown(sender, e)

        /// <summary>
        /// 텍스트 블럭 마우스 하강시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void textBlock_MouseDown(object sender, MouseButtonEventArgs e)
        {
            TextBlock textBlock = sender as TextBlock;

            ChangeTarget("pack://Application:,,,/" + textBlock.Text + ".png");
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 타겟 변경하기 - ChangeTarget(resourceURI)

        /// <summary>
        /// 타겟 변경하기
        /// </summary>
        /// <param name="resourceURI">리소스 URI</param>
        private void ChangeTarget(string resourceURI)
        {
            ImageSource sourceImageSource = (targetTopRectangle.Fill as ImageBrush).ImageSource as ImageSource;
            ImageSource targetImageSource = new BitmapImage(new Uri(resourceURI));

            this.targetBottomScaleTransform.ScaleY = 0;

            (this.sourceTopRectangle.Fill    as ImageBrush).ImageSource = targetImageSource;
            (this.targetTopRectangle.Fill    as ImageBrush).ImageSource = sourceImageSource;
            (this.targetBottomRectangle.Fill as ImageBrush).ImageSource = targetImageSource;

            (Resources["TopStoryboardKey"   ] as Storyboard).Begin(this);
            (Resources["BottomStoryboardKey"] as Storyboard).Begin(this);
        }

        #endregion
        #region 상위 스토리보드 완료시 처리하기 - topStoryboard_Completed(sender, e)

        /// <summary>
        /// 상위 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void topStoryboard_Completed(object sender, EventArgs e)
        {
            (this.targetTopRectangle.Fill as ImageBrush).ImageSource = (this.targetBottomRectangle.Fill as ImageBrush).ImageSource as ImageSource;
        }

        #endregion
        #region 하위 스토리보드 완료시 처리하기 - bottomStoryboard_Completed(sender, e)

        /// <summary>
        /// 하위 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void bottomStoryboard_Completed(object sender, EventArgs e)
        {
            (this.sourceBottomRectangle.Fill as ImageBrush).ImageSource = (this.targetBottomRectangle.Fill as ImageBrush).ImageSource as ImageSource;
        }

        #endregion
    }
}