■ Image 엘리먼트의 Clip 속성을 사용하는 방법을 보여준다.
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<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="700" Title="TestProject" FontFamily="나눔고딕코딩" FontSize="16"> <Window.Resources> <ImageBrush x:Key="BackgroundImageBrushKey" ViewportUnits="Absolute" Viewport="0 0 200 256" Opacity="0.10" TileMode="Tile" ImageSource="IMAGE\scissors.jpg" /> </Window.Resources> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" Background="{StaticResource BackgroundImageBrushKey}"> <StackPanel Margin="10"> <TextBlock Margin="0 0 0 10">No Clip</TextBlock> <Image Width="200" Height="150" Source="IMAGE\Waterlilies.jpg" /> <TextBlock Margin="0 30 0 10">Triangular Clip Example</TextBlock> <Image Width="200" Height="150" Clip="M 0 150 L 100 0 200 150 Z" Source="IMAGE\Waterlilies.jpg" /> <TextBlock Margin="0 30 0 10">Elliptical Clip Example</TextBlock> <Image Width="200" Height="150" Source="IMAGE\Waterlilies.jpg"> <Image.Clip> <EllipseGeometry Center="100 75" RadiusX="100" RadiusY="75" /> </Image.Clip> </Image> </StackPanel> <StackPanel Margin="10"> <TextBlock Margin="0 0 0 10">Animated Clip Examples</TextBlock> <Image Width="200" Height="150" 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)" Duration="00:00:03" From="0 0" To="200 150" RepeatBehavior="Forever" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> <Image Margin="0 10 0 0" Width="200" Height="150" 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)" Duration="00:00:03" From="0" To="150" RepeatBehavior="Forever" AutoReverse="True" /> <DoubleAnimation Storyboard.TargetName="ellipseGeometry2" Storyboard.TargetProperty="(EllipseGeometry.RadiusY)" Duration="00:00:03" From="0" To="150" RepeatBehavior="Forever" AutoReverse="True" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Image.Triggers> </Image> </StackPanel> </StackPanel> </Window> |
