[C#/WPF] VisualBrush 엘리먼트 : 돋보기 만들기

■ VisualBrush 엘리먼트를 사용해 돋보기를 만드는 방법을 보여준다.

TestProject.zip

0.08MB

▶ 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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <DrawingBrush x:Key="GridBackgroundDrawingBrushKey"
            ViewportUnits="Absolute"
            Viewport="0 0 10 10"
            TileMode="Tile">
            <DrawingBrush.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="White">
                            <GeometryDrawing.Geometry>
                                <RectangleGeometry Rect="0 0 1 1" />
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                        <GeometryDrawing
                            Brush="#e6e8f6"
                            Geometry="M 0 0 L 0 1 0.1 1 0.1 0.1 1 0.1 1 0 Z" />
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingBrush.Drawing>
        </DrawingBrush>
        <Style TargetType="{x:Type Paragraph}">
            <Setter Property="Margin" Value="10" />
        </Style>
    </Window.Resources>
    <Grid>
        <ScrollViewer>
            <StackPanel Name="contentStackPanel"
                VerticalAlignment="Stretch"
                Background="{StaticResource GridBackgroundDrawingBrushKey}">
                <FlowDocumentScrollViewer>
                    <FlowDocument>
                        <Paragraph>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sit amet arcu ullamcorper sem volutpat facilisis. Donec posuere. Cras lectus dolor, euismod sit amet, aliquet ut, scelerisque in, tortor. Donec vulputate. Nunc mauris sem, blandit ut, imperdiet eu, eleifend a, tortor. Donec sed purus ut pede luctus commodo. Duis et quam vitae quam rhoncus sollicitudin. Nam rhoncus ullamcorper sapien. Aenean blandit, erat a ultricies imperdiet, mauris risus fermentum wisi, ac aliquet orci libero non felis. Fusce felis. Maecenas cursus. </Paragraph>
                        <Paragraph><Button>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</Button></Paragraph>
                        <Paragraph>Nunc semper cursus est. Aenean ultrices venenatis odio. Nam condimentum leo ut libero. Cras nibh tellus, euismod non, blandit et, porta vel, justo. Praesent consequat porta est. Fusce nonummy congue augue. Sed tristique quam elementum augue. Donec lobortis molestie sapien. Vivamus dictum. Duis congue consectetuer leo. In pharetra pharetra tellus. Proin suscipit feugiat lacus. Nunc lobortis sollicitudin tortor. Nulla sem magna, egestas vel, accumsan posuere, rhoncus non, wisi. Suspendisse viverra enim non dui. Sed a lectus. Nam rhoncus bibendum ipsum. Aliquam lectus.</Paragraph>
                        <Paragraph>Praesent suscipit ornare velit. Vestibulum tortor. Fusce eleifend, nisl ultricies iaculis vehicula, justo dolor tincidunt quam, in bibendum wisi libero nonummy massa. Nullam elit eros, blandit ac, porta et, iaculis eget, nisl. In varius. Nam a sapien. Praesent vel elit. Pellentesque quam. Mauris et nisl molestie arcu lobortis viverra. Vestibulum lorem justo, viverra a, condimentum at, adipiscing non, justo. Donec iaculis tellus nec dui aliquam suscipit. Pellentesque ante. Integer pretium, metus non convallis dapibus, arcu diam iaculis neque, et luctus justo odio vel nunc. Quisque fringilla. Integer ac tortor vitae felis aliquam bibendum. Suspendisse iaculis, magna et pellentesque fringilla, sapien est sagittis magna, id dignissim erat purus vitae pede. Maecenas fringilla libero sed odio. Aliquam erat volutpat.</Paragraph>
                        <Paragraph><Border BorderBrush="Black" BorderThickness="1"><Image Source="IMAGE\bananas.jpg" Stretch="None" /></Border></Paragraph>
                        <Paragraph>Praesent vitae leo. Donec et elit vitae orci suscipit ornare. Proin tincidunt enim eget nisl. Nam arcu. Donec vitae odio sit amet enim semper accumsan. Nullam molestie interdum diam. Sed elit metus, interdum ac, condimentum at, pellentesque nec, metus. Aenean nec augue. Vestibulum lorem eros, tempus et, rutrum et, gravida sed, nunc. Suspendisse lacus velit, rhoncus non, euismod sit amet, viverra at, quam. Curabitur ut turpis a lacus laoreet condimentum. Nunc egestas nunc sit amet risus. Aliquam erat volutpat. In id velit. Sed augue. Vestibulum pretium gravida lacus. Ut neque erat, convallis non, feugiat eu, venenatis sit amet, tellus. Nullam ac felis a ipsum volutpat vestibulum.</Paragraph>
                        <Paragraph>Duis condimentum sem id dui. Nam ullamcorper orci ut lorem. Aenean et diam in erat adipiscing auctor. Integer congue orci ac diam. Morbi tempor elit nec elit. Maecenas porttitor. Aenean accumsan. Aliquam erat volutpat. Quisque metus. Maecenas neque. Aliquam erat volutpat. Cras massa. Duis in lorem sed justo pulvinar egestas.</Paragraph>
                    </FlowDocument>
                </FlowDocumentScrollViewer>
            </StackPanel>
        </ScrollViewer>
        <Canvas Name="magnifyingGlassCanvas">
            <Ellipse Name="magnifyingGlassEllipse"
                Width="100"
                Height="100"
                Stroke="Black">
                <Ellipse.Fill>
                    <DrawingBrush>
                        <DrawingBrush.Drawing>
                            <DrawingGroup>
                                <DrawingGroup.Children>
                                    <GeometryDrawing Brush="White">
                                        <GeometryDrawing.Geometry>
                                            <RectangleGeometry Rect="0 0 1 1" />
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                    <GeometryDrawing>
                                        <GeometryDrawing.Brush>
                                            <VisualBrush x:Name="visualBrush"
                                                ViewboxUnits="Absolute"
                                                Visual="{Binding ElementName=contentStackPanel}" />
                                        </GeometryDrawing.Brush>
                                        <GeometryDrawing.Geometry>
                                            <RectangleGeometry Rect="0 0 1 1" />
                                        </GeometryDrawing.Geometry>
                                    </GeometryDrawing>
                                </DrawingGroup.Children>
                            </DrawingGroup>
                        </DrawingBrush.Drawing>
                    </DrawingBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Canvas>
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

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

        #region Field

        /// <summary>
        /// 마우스 거리
        /// </summary>
        private static readonly double _distanceFromMouse = 5;

        #endregion

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

        #region 생성자 - MainWindow()

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

            this.contentStackPanel.MouseMove += contentStackPanel_MouseMove;
        }

        #endregion

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

        #region 컨텐트 스택 패널 마우스 이동시 처리하기 - contentStackPanel_MouseMove(sender, e)

        /// <summary>
        /// 컨텐트 스택 패널 마우스 이동시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void contentStackPanel_MouseMove(object sender, MouseEventArgs e)
        {
            Mouse.SetCursor(Cursors.Cross);

            Point currentMousePosition = e.GetPosition(this);

            if(ActualWidth - currentMousePosition.X > magnifyingGlassEllipse.Width + _distanceFromMouse)
            {
                Canvas.SetLeft(magnifyingGlassEllipse, currentMousePosition.X + _distanceFromMouse);
            }
            else
            {
                Canvas.SetLeft(magnifyingGlassEllipse, currentMousePosition.X - _distanceFromMouse - magnifyingGlassEllipse.Width);
            }

            if(ActualHeight - currentMousePosition.Y > magnifyingGlassEllipse.Height + _distanceFromMouse)
            {
                Canvas.SetTop(magnifyingGlassEllipse, currentMousePosition.Y + _distanceFromMouse);
            }
            else
            {
                Canvas.SetTop(magnifyingGlassEllipse, currentMousePosition.Y - _distanceFromMouse - magnifyingGlassEllipse.Height);
            }

            this.visualBrush.Viewbox = new Rect(currentMousePosition.X - 10, currentMousePosition.Y - 10, 20, 20);
        }

        #endregion
    }
}