[C#/WPF] VisualBrush 엘리먼트 : 반사 효과 만들기

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

▶ 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.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="bouncingBall"
                        Storyboard.TargetProperty="(Canvas.Top)"
                        Duration="00:00:03"
                        From="0"
                        To="250"
                        RepeatBehavior="Forever"
                        AutoReverse="True"
                        AccelerationRatio="1.0" />
                    <DoubleAnimation
                        Storyboard.TargetName="bouncingBall"
                        Storyboard.TargetProperty="(Canvas.Left)"
                        Duration="00:00:20"
                        From="0"
                        To="350"
                        RepeatBehavior="Forever"
                        AutoReverse="True"
                        AccelerationRatio="1.0" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <StackPanel>
        <Canvas Name="reflectedCanvas"
            Width="400"
            Height="300">
            <Canvas.Background>
                <LinearGradientBrush
                    StartPoint="0 0.5"
                    EndPoint="1 0.5">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#ccccff" />
                        <GradientStop Offset="1.0" Color="White"   />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Canvas.Background>
            <TextBlock Canvas.Top="40" Canvas.Left="5"
                Width="390"
                TextWrapping="Wrap"
                FontSize="14">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vel ante. Donec luctus tortor sit amet est. Nullam pulvinar odio et wisi. Pellentesque quis magna. Sed pellentesque. Nulla euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pulvinar, augue non ornare malesuada, odio urna hendrerit augue, et rutrum ante nulla eget lectus. Nulla nonummy. Maecenas dui arcu, feugiat quis, dapibus quis, blandit non, leo. Nullam auctor, turpis ac elementum ultricies, justo orci dictum metus, molestie elementum turpis mauris a turpis. Nullam tortor nibh, sollicitudin eu, pulvinar vitae, vestibulum id, nibh. Integer eget mauris nec libero congue sollicitudin.
            </TextBlock>
            <Ellipse Name="bouncingBall"
                Width="50"
                Height="50">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.75 0.25">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Offset="0.0"  Color="White"   />
                            <GradientStop Offset="0.75" Color="Red"     />
                            <GradientStop Offset="1.0"  Color="DarkRed" />
                        </RadialGradientBrush.GradientStops>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <TextBox Canvas.Left="75" Canvas.Top="250">Hello, World!</TextBox>
        </Canvas>
        <Rectangle
            Width="400"
            Height="1"
            Fill="Gray" />
        <Canvas
            Width="{Binding Path=(Canvas.ActualWidth), ElementName=reflectedCanvas}"
            Height="{Binding Path=(Canvas.ActualHeight), ElementName=reflectedCanvas}">
            <Canvas.Background>
                <VisualBrush
                    Stretch="None"
                    AlignmentX="Left"
                    AlignmentY="Top"
                    Opacity="0.75"
                    Visual="{Binding ElementName=reflectedCanvas}">
                    <VisualBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform
                                ScaleX="1"
                                ScaleY="-1" />
                            <TranslateTransform  Y="1" />
                        </TransformGroup>
                    </VisualBrush.RelativeTransform>
                </VisualBrush>
            </Canvas.Background>
            <Canvas.OpacityMask>
                <LinearGradientBrush
                    StartPoint="0.5 0"
                    EndPoint="0.5 1">
                    <LinearGradientBrush.GradientStops>
                        <GradientStop Offset="0.0" Color="#ff000000" />
                        <GradientStop Offset="0.5" Color="#00000000" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Canvas.OpacityMask>
        </Canvas>
    </StackPanel>
</Window>

100

101

102

103

104

105

106

107

108

<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.Triggers>

<DoubleAnimation

Storyboard.TargetName="bouncingBall"

Storyboard.TargetProperty="(Canvas.Top)"

Duration="00:00:03"

From="0"

To="250"

RepeatBehavior="Forever"

AutoReverse="True"

AccelerationRatio="1.0" />

<DoubleAnimation

Storyboard.TargetName="bouncingBall"

Storyboard.TargetProperty="(Canvas.Left)"

Duration="00:00:20"

From="0"

To="350"

RepeatBehavior="Forever"

AutoReverse="True"

AccelerationRatio="1.0" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Window.Triggers>

<Canvas Name="reflectedCanvas"

Width="400"

Height="300">

<Canvas.Background>

<LinearGradientBrush

StartPoint="0 0.5"

EndPoint="1 0.5">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Canvas.Background>

<TextBlock Canvas.Top="40" Canvas.Left="5"

Width="390"

TextWrapping="Wrap"

FontSize="14">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse vel ante. Donec luctus tortor sit amet est. Nullam pulvinar odio et wisi. Pellentesque quis magna. Sed pellentesque. Nulla euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque pulvinar, augue non ornare malesuada, odio urna hendrerit augue, et rutrum ante nulla eget lectus. Nulla nonummy. Maecenas dui arcu, feugiat quis, dapibus quis, blandit non, leo. Nullam auctor, turpis ac elementum ultricies, justo orci dictum metus, molestie elementum turpis mauris a turpis. Nullam tortor nibh, sollicitudin eu, pulvinar vitae, vestibulum id, nibh. Integer eget mauris nec libero congue sollicitudin.

</TextBlock>

<Ellipse Name="bouncingBall"

Width="50"

Height="50">

<Ellipse.Fill>

<RadialGradientBrush.GradientStops>

</RadialGradientBrush.GradientStops>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

<TextBox Canvas.Left="75" Canvas.Top="250">Hello, World!</TextBox>

</Canvas>

<Rectangle

Width="400"

Height="1"

Fill="Gray" />

<Canvas

Width="{Binding Path=(Canvas.ActualWidth), ElementName=reflectedCanvas}"

Height="{Binding Path=(Canvas.ActualHeight), ElementName=reflectedCanvas}">

<Canvas.Background>

<VisualBrush

Stretch="None"

AlignmentX="Left"

AlignmentY="Top"

Opacity="0.75"

Visual="{Binding ElementName=reflectedCanvas}">

<VisualBrush.RelativeTransform>

<ScaleTransform

ScaleX="1"

ScaleY="-1" />

</TransformGroup>

</VisualBrush.RelativeTransform>

</VisualBrush>

</Canvas.Background>

<Canvas.OpacityMask>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

<LinearGradientBrush.GradientStops>

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Canvas.OpacityMask>

</Canvas>

</StackPanel>

</Window>

TestProject.zip

.NETFRAMEWORK 2D BRUSH C# GRAPHICS MICROSOFT WPF

icodebroker

[C#/WPF] VisualBrush 엘리먼트 : 반사 효과 만들기

분류

가장 많이 읽힌 글

보관함