[C#/WPF] UIElement 엘리먼트 : Clip 속성 사용하기

■ UIElement 엘리먼트의 Clip 속성을 사용하는 방법을 보여준다.

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="UIElement 엘리먼트 : Clip 속성 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ImageBrush x:Key="ImageBrushKey"
            Viewport="0 0 200 256"
            ViewportUnits="Absolute"
            Opacity="0.10"
            TileMode="Tile"
            ImageSource="IMAGE\scissors.jpg" />
    </Window.Resources>
    <StackPanel
        Margin="10"
        Orientation="Horizontal"
        Background="{StaticResource ImageBrushKey}">
        <StackPanel Margin="10">
            <TextBlock Margin="10">
                Clip 속성 미설정
            </TextBlock>
            <Image
                HorizontalAlignment="Center"
                Width="200"
                Height="150"
                Source="IMAGE\Waterlilies.jpg" />
            <TextBlock Margin="10">
                Clip 속성 : 삼각형
            </TextBlock>
            <Image
                HorizontalAlignment="Center"
                Width="200"
                Height="150"
                Clip="M 0 150 L 100 0 200 150 Z"
                Source="IMAGE\waterlilies.jpg" />
        </StackPanel>
        <StackPanel Margin="10">
            <TextBlock Margin="10">
                Clip 속성 : 타원
            </TextBlock>
            <Image
                Width="200"
                Height="150"
                HorizontalAlignment="Left"
                Source="IMAGE\waterlilies.jpg">
                <Image.Clip>
                    <EllipseGeometry
                        Center="100 75"
                        RadiusX="100"
                        RadiusY="75" />
                </Image.Clip>
            </Image>
        </StackPanel>
        <StackPanel Margin="10">
            <TextBlock Margin="10">
                Clip 속성 : 애니메이션
            </TextBlock>
            <Image
                Width="200"
                Height="150"
                HorizontalAlignment="Left"
                Source="IMAGE\waterlilies.jpg">
                <Image.Clip>
                    <EllipseGeometry x:Name="ellipseGeometry1"
                        Center="100 75"
                        RadiusX="100"
                        RadiusY="75" />
                </Image.Clip>
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <PointAnimation
                                    Storyboard.TargetName="ellipseGeometry1"
                                    Storyboard.TargetProperty="(EllipseGeometry.Center)"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    From="0 0"
                                    To="200 150"
                                    Duration="0:0:3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
            <Image
                Width="200"
                Height="150"
                HorizontalAlignment="Left"
                Source="IMAGE\waterlilies.jpg">
                <Image.Clip>
                    <EllipseGeometry x:Name="ellipseGeometry2"
                        Center="100 75"
                        RadiusX="100"
                        RadiusY="75" />
                </Image.Clip>
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="ellipseGeometry2"
                                    Storyboard.TargetProperty="(EllipseGeometry.RadiusX)"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    From="0"
                                    To="150"
                                    Duration="0:0:3" />
                                <DoubleAnimation
                                    Storyboard.TargetName="ellipseGeometry2"
                                    Storyboard.TargetProperty="(EllipseGeometry.RadiusY)"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True"
                                    From="0"
                                    To="150"
                                    Duration="0:0:3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Image.Triggers>
            </Image>
        </StackPanel>
    </StackPanel>
</Window>