[C#/WPF] Storyboard 엘리먼트 : 마우스 위치에 따라 특정 엘리먼트 표시하기/숨기기

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="Storyboard 엘리먼트 : 마우스 위치에 따라 특정 엘리먼트 표시하기/숨기기"
    Background="Black"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <LinearGradientBrush x:Key="ShadedBackgroundSolidColorBrushKey"
            StartPoint="0 0"
            EndPoint="0 1">
            <GradientStopCollection>
                <GradientStop Offset="0.0" Color="#00000000" />
                <GradientStop Offset="0.1" Color="#44000000" />
                <GradientStop Offset="0.2" Color="#66000000" />
                <GradientStop Offset="0.4" Color="#d6000000" />
                <GradientStop Offset="0.4" Color="#d6000000" />
            </GradientStopCollection>
        </LinearGradientBrush>
        <Storyboard x:Key="ShowDescriptionGridStoryboardKey"
            Storyboard.TargetProperty="(UIElement.Opacity)">
            <DoubleAnimation
                FillBehavior="HoldEnd"
                To="1"
                Duration="0:0:0.100" />
        </Storyboard>
        <Storyboard x:Key="HideDescriptionGridStoryboardKey"
            Storyboard.TargetProperty="(UIElement.Opacity)">
            <DoubleAnimation
                FillBehavior="HoldEnd"
                To="0"
                Duration="0:0:0.300" />
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Image
            Stretch="UniformToFill"
            Source="IMAGE/sample.jpg" />
        <DockPanel LastChildFill="False">
            <Grid Name="descriptionGrid" DockPanel.Dock="Bottom"
                Height="100"
                Background="{StaticResource ShadedBackgroundSolidColorBrushKey}"
                Visibility="Hidden">
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    FontSize="16"
                    Foreground="White"
                    Text="샘플 이미지 설명 입니다." />
            </Grid>
        </DockPanel>
    </Grid>
</Window>

 

728x90

 

▶ MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;
using System.Windows.Threading;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 디스패처 타이머
        /// </summary>
        private DispatcherTimer dispatcherTimer;

        /// <summary>
        /// 마지막 마우스 이동 시간
        /// </summary>
        private DateTime lastMouseMoveTime;

        /// <summary>
        /// 마지막 마우스 포인트
        /// </summary>
        private Point lastMousePoint;

        /// <summary>
        /// 설명 그리드 표시 스토리보드
        /// </summary>
        private Storyboard showDescriptionGridStoryboard => FindResource("ShowDescriptionGridStoryboardKey") as Storyboard;

        /// <summary>
        /// 설명 그리드 숨김 스토리보드
        /// </summary>
        private Storyboard hideDescriptionGridStoryboard => FindResource("HideDescriptionGridStoryboardKey") as Storyboard;

        /// <summary>
        /// 설명 그리드 숨김 스토리보드 완료 여부
        /// </summary>
        private bool isHideDescriptionGridStoryboardCompleted;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            Storyboard.SetTarget(this.hideDescriptionGridStoryboard, this.descriptionGrid);
            Storyboard.SetTarget(this.showDescriptionGridStoryboard, this.descriptionGrid);

            #region 디스패처 타이머를 설정한다.

            this.dispatcherTimer = new DispatcherTimer(DispatcherPriority.Background)
            {
                Interval  = TimeSpan.FromMilliseconds(150),
                IsEnabled = true
            };

            #endregion

            Loaded                                       += Window_Loaded;
            MouseMove                                    += Window_MouseMove;
            MouseLeave                                   += Window_MouseLeave;
            this.dispatcherTimer.Tick                    += dispatcherTimer_Tick;
            this.showDescriptionGridStoryboard.Completed += showDescriptionGridStoryboard_Completed;
            this.hideDescriptionGridStoryboard.Completed += hideDescriptionGridStoryboard_Completed;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            this.lastMouseMoveTime = DateTime.UtcNow;

            this.dispatcherTimer.Start();
        }

        #endregion
        #region 윈도우 마우스 이동시 처리하기 - Window_MouseMove(sender, e)

        /// <summary>
        /// 윈도우 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_MouseMove(object sender, MouseEventArgs e)
        {
            Point mousePoint = e.GetPosition(this);

            if(Math.Abs(mousePoint.X - this.lastMousePoint.X) > double.Epsilon || Math.Abs(mousePoint.Y - this.lastMousePoint.Y) > double.Epsilon)
            {
                this.lastMouseMoveTime = DateTime.UtcNow;
            }

            this.lastMousePoint = mousePoint;
        }

        #endregion
        #region 윈도우 마우스 이탈시 처리하기 - Window_MouseLeave(sender, e)

        /// <summary>
        /// 윈도우 마우스 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_MouseLeave(object sender, MouseEventArgs e)
        {
            this.lastMouseMoveTime = DateTime.UtcNow.Subtract(TimeSpan.FromSeconds(10));
        }

        #endregion
        #region 디스패처 타이머 틱 처리하기 - dispatcherTimer_Tick(sender, e)

        /// <summary>
        /// 디스패처 타이머 틱 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void dispatcherTimer_Tick(object sender, EventArgs e)
        {
            TimeSpan timeSpan = DateTime.UtcNow.Subtract(this.lastMouseMoveTime);

            if(timeSpan.TotalMilliseconds >= 3000 && this.descriptionGrid.IsMouseOver == false)
            {
                if(this.isHideDescriptionGridStoryboardCompleted)
                {
                    return;
                }

                Cursor = Cursors.None;

                this.isHideDescriptionGridStoryboardCompleted = false;

                this.hideDescriptionGridStoryboard?.Begin();
            }
            else
            {
                Cursor = Cursors.Arrow;

                this.descriptionGrid.Visibility = Visibility.Visible;

                this.showDescriptionGridStoryboard?.Begin();
            }
        }

        #endregion
        #region 설명 그리드 표시 스토리보드 완료시 처리하기 - showDescriptionGridStoryboard_Completed(sender, e)

        /// <summary>
        /// 설명 그리드 표시 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void showDescriptionGridStoryboard_Completed(object sender, EventArgs e)
        {
            this.isHideDescriptionGridStoryboardCompleted = false;
        }

        #endregion
        #region 설명 그리드 숨김 스토리보드 완료시 처리하기 - hideDescriptionGridStoryboard_Completed(sender, e)

        /// <summary>
        /// 설명 그리드 숨김 스토리보드 완료시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void hideDescriptionGridStoryboard_Completed(object sender, EventArgs e)
        {
            this.descriptionGrid.Visibility = Visibility.Hidden;

            this.isHideDescriptionGridStoryboardCompleted = true;
        }

        #endregion
    }
}