[C#/WPF] VisualBrush 엘리먼트 : RelativeTransform 속성을 사용해 엘리먼트 반사 이미지 만들기

■ VisualBrush 엘리먼트의 RelativeTransform 속성을 사용해 엘리먼트 반사 이미지를 만드는 방법을 보여준다.

▶ 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="VisualBrush 엘리먼트 : RelativeTransform 속성을 사용해 엘리먼트 반사 이미지 만들기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Grid Name="sourceGrid"
            HorizontalAlignment="Center">
            <Image
                Width="320"
                Height="213"
                Source="IMAGE/sample.jpg" />
            <Ellipse
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Width="100"
                Height="100"
                Stroke="Blue"
                StrokeThickness="10"
                Fill="Gold" />
        </Grid>
        <Grid
            Width="{Binding ElementName=sourceGrid, Path=ActualWidth}"
            Height="{Binding ElementName=sourceGrid, Path=ActualHeight}">
            <Grid.Background>
                <VisualBrush
                    Visual="{Binding ElementName=sourceGrid}"
                    Stretch="None">
                    <VisualBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="-1" />
                            <TranslateTransform Y="1" />
                        </TransformGroup>
                    </VisualBrush.RelativeTransform>
                </VisualBrush>
            </Grid.Background>
            <Grid.OpacityMask>
                <LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
                    <GradientStop Offset="0" Color="#80000000" />
                    <GradientStop Offset="1" Color="#00000000" />
                </LinearGradientBrush>
            </Grid.OpacityMask>
        </Grid>
    </StackPanel>
</Window>

<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="VisualBrush 엘리먼트 : RelativeTransform 속성을 사용해 엘리먼트 반사 이미지 만들기"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid Name="sourceGrid"

HorizontalAlignment="Center">

<Image

Width="320"

Height="213"

Source="IMAGE/sample.jpg" />

<Ellipse

HorizontalAlignment="Right"

VerticalAlignment="Top"

Width="100"

Height="100"

Stroke="Blue"

StrokeThickness="10"

Fill="Gold" />

</Grid>

<Grid

Width="{Binding ElementName=sourceGrid, Path=ActualWidth}"

Height="{Binding ElementName=sourceGrid, Path=ActualHeight}">

<Grid.Background>

<VisualBrush

Visual="{Binding ElementName=sourceGrid}"

Stretch="None">

<VisualBrush.RelativeTransform>

</TransformGroup>

</VisualBrush.RelativeTransform>

</VisualBrush>

</Grid.Background>

<Grid.OpacityMask>

</LinearGradientBrush>

</Grid.OpacityMask>

</Grid>

</StackPanel>

</Window>

TestProject.zip