[C#/WPF] ImageBrush 엘리먼트 사용하기

■ ImageBrush 엘리먼트를 사용하는 방법을 보여준다.

TestProject.zip

0.17MB

▶ 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>
        <LinearGradientBrush x:Key="GrayBlueLinearGradientBrushKey"
            StartPoint="0 0"
            EndPoint="1 1">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0"   Color="DarkGray" />
                <GradientStop Offset="0.5" Color="#ccccff"  />
                <GradientStop Offset="1"   Color="DarkGray" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GlassLinearGradientBrushKey"
            StartPoint="0 0"
            EndPoint="1 1"
            Opacity="0.75">
            <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.2"  Color="WhiteSmoke"  />
                <GradientStop Offset="0.4"  Color="Transparent" />
                <GradientStop Offset="0.5"  Color="WhiteSmoke"  />
                <GradientStop Offset="0.75" Color="Transparent" />
                <GradientStop Offset="0.9"  Color="WhiteSmoke"  />
                <GradientStop Offset="1"    Color="Transparent" />
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Background" Value="{StaticResource GrayBlueLinearGradientBrushKey}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            ClipToBounds="True">
                            <Rectangle Name="outerRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="20"
                                RadiusY="20"
                                StrokeThickness="5"
                                Stroke="{TemplateBinding Background}"
                                Fill="Transparent" />
                            <Rectangle Name="innerRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="20"
                                RadiusY="20"
                                StrokeThickness="20"
                                Stroke="Transparent"
                                Fill="{TemplateBinding Background}" />
                            <Rectangle Name="glassRectangle"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                RadiusX="10"
                                RadiusY="10"
                                StrokeThickness="2"
                                Opacity="0"
                                Fill="{StaticResource GlassLinearGradientBrushKey}"
                                RenderTransformOrigin="0.5 0.5">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Offset="0.0" Color="LightBlue" />
                                            <GradientStop Offset="1.0" Color="Gray"      />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform  />
                                        <RotateTransform />
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                                <Rectangle.BitmapEffect>
                                    <BevelBitmapEffect />
                                </Rectangle.BitmapEffect>
                            </Rectangle>
                            <DockPanel>
                                <ContentPresenter Name="contentPresenter"
                                    Margin="20"
                                    TextBlock.Foreground="Black"
                                    Content="{TemplateBinding  Content}" />
                            </DockPanel>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsMouseOver" Value="True"  />
                                    <Condition Property="IsChecked"   Value="False" />
                                </MultiTrigger.Conditions>
                                <Setter
                                    TargetName="outerRectangle"
                                    Property="Rectangle.Stroke"
                                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                                <Setter
                                    TargetName="contentPresenter"
                                    Property="ContentPresenter.BitmapEffect">
                                    <Setter.Value>
                                        <BlurBitmapEffect Radius="1" />
                                    </Setter.Value>
                                </Setter>
                            </MultiTrigger>
                            <Trigger Property="IsChecked" Value="true">
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                            </Trigger>
                            <Trigger Property="IsFocused" Value="true">
                                <Setter
                                    TargetName="outerRectangle"
                                    Property="Rectangle.Stroke"
                                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                                <Setter
                                    TargetName="glassRectangle"
                                    Property="Rectangle.Opacity"
                                    Value="1" />
                            </Trigger>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard Name="mouseEnterBeginStoryboard">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                Duration="00:00:00.5"
                                                By="-0.1" />
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                Duration="00:00:00.5"
                                                By="-0.1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <EventTrigger.Actions>
                                    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="RadioButton.Checked">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="glassRectangle"
                                                Storyboard.TargetProperty="(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"
                                                Duration="00:00:00.5"
                                                By="360" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="AnimatedRectangleStyleKey">
            <Setter Property="Rectangle.Fill">
                <Setter.Value>
                    <ImageBrush
                        TileMode="FlipXY"
                        Opacity="0.25"
                        ImageSource="IMAGE\purpleblock.jpg">
                        <ImageBrush.Transform>
                            <RotateTransform Angle="0" />
                        </ImageBrush.Transform>
                    </ImageBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard SpeedRatio="1.25">
                                <RectAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Viewport)"
                                    Duration="00:00:20"
                                    To="0 0 0.5 0.5"
                                    RepeatBehavior="Forever"
                                    AutoReverse="True" />
                                <DoubleAnimation
                                    Storyboard.TargetProperty="(Rectangle.Fill).(ImageBrush.Transform).(RotateTransform.Angle)"
                                    Duration="00:01:00"
                                    To="360"
                                    RepeatBehavior="Forever"
                                    AccelerationRatio="0.5"
                                    DecelerationRatio="0.5" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"    />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"    />
        </Grid.RowDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
            Style="{StaticResource AnimatedRectangleStyleKey}"
            Margin="0 0 0 10" />
        <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
            Margin="0 0 0 10"
            BorderBrush="Black"
            BorderThickness="3">
            <Border.Background>
                <LinearGradientBrush
                    StartPoint="0 0.5"
                    EndPoint="1 0.5">
                    <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.0" Color="#993399ff" />
                    <GradientStop Offset="1.0" Color="#996600ff" />
                    </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
            </Border.Background>
            <DockPanel Margin="10">
                <RadioButton Name="imageRadioButton1"
                    Margin="5">
                    <Image
                        Width="50"
                        Height="50"
                        Source="IMAGE\blueberries.jpg" />
                </RadioButton>
                <RadioButton Name="imageRadioButton2"
                    Margin="5">
                    <Image
                        Width="50"
                        Height="50"
                        Source="IMAGE\sunset.jpg" />
                </RadioButton>
                <RadioButton Name="imageRadioButton3"
                    Margin="5">
                    <Image
                        Width="50"
                        Height="50"
                        Source="IMAGE\apple.jpg" />
                </RadioButton>
                <RadioButton Name="imageRadioButton4"
                    Margin="5">
                    <Image
                        Width="50"
                        Height="50"
                        Source="IMAGE\hummingbird.jpg" />
                </RadioButton>
                <TextBlock DockPanel.Dock="Left"
                    Margin="10"
                    TextWrapping="Wrap">
                    The following controls enable you to customize an ImageBrush.
                    Specify the ImageBrush's properties and click <Bold>Apply</Bold>
                    to view the ImageBrush.
                </TextBlock>
            </DockPanel>
        </Border>
        <Label Grid.Row="1" Grid.Column="0"
            HorizontalAlignment="Right"
            Margin="5">
            Stretch
        </Label>
        <ComboBox Name="stretchComboBox" Grid.Row="1" Grid.Column="1"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="2" Grid.Column="0"
            HorizontalAlignment="Right"
            Margin="5">
            AlignmentX
        </Label>
        <ComboBox Name="alignmentXComboBox" Grid.Row="2" Grid.Column="1"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="3" Grid.Column="0"
            HorizontalAlignment="Right"
            Margin="5">
            AlignmentY
        </Label>
        <ComboBox Name="alignmentYComboBox" Grid.Row="3" Grid.Column="1"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="4" Grid.Column="0"
            HorizontalAlignment="Right"
            Margin="5">
            TileMode
        </Label>
        <ComboBox Name="tileModeComboBox" Grid.Row="4" Grid.Column="1"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="1" Grid.Column="2"
            HorizontalAlignment="Right"
            Margin="5">
            Viewport
        </Label>
        <TextBox Name="viewportTextBox" Grid.Row="1" Grid.Column="3"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="2" Grid.Column="2"
            HorizontalAlignment="Right"
            Margin="5">
            ViewportUnits
        </Label>
        <ComboBox Name="viewportUnitsComboBox" Grid.Row="2" Grid.Column="3"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="3" Grid.Column="2"
            HorizontalAlignment="Right"
            Margin="5">
            Viewbox
        </Label>
        <TextBox Name="viewboxTextBox" Grid.Row="3" Grid.Column="3"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Label Grid.Row="4" Grid.Column="2"
            HorizontalAlignment="Right"
            Margin="5">
            ViewboxUnits
        </Label>
        <ComboBox Name="viewboxUnitsComboBox" Grid.Row="4" Grid.Column="3"
            Margin="5"
            VerticalContentAlignment="Center" />
        <Button Name="applyButton" Grid.Row="5" Grid.Column="1"
            HorizontalAlignment="Left"
            Margin="5"
            Width="100"
            Height="30">
            Apply
        </Button>
        <Rectangle Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="4"
            Margin="0 5 0 0"
            Stroke="Blue">
            <Rectangle.Fill>
                <ImageBrush x:Name="targetImageBrush"
                    ImageSource="IMAGE\blueberries.jpg" />
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

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

        #region Field

        /// <summary>
        /// 체크 라디오 버튼
        /// </summary>
        private RadioButton checkedRadioButton;

        #endregion

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

        #region 생성자 - MainWindow()

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

            Loaded                         += Window_Loaded;
            this.imageRadioButton1.Checked += imageRadioButton_Checked;
            this.imageRadioButton2.Checked += imageRadioButton_Checked;
            this.imageRadioButton3.Checked += imageRadioButton_Checked;
            this.imageRadioButton4.Checked += imageRadioButton_Checked;
            this.applyButton.Click         += applyButton_Click;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 윈도우 로드시 처리하기 - Window_Loaded(sender, e)

        /// <summary>
        /// 윈도우 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            #region Stretch 콤보 박스를 설정한다.

            string[] stretchArray = Enum.GetNames(typeof(Stretch));

            foreach(string stretch in stretchArray)
            {
                this.stretchComboBox.Items.Add(stretch);
            }

            this.stretchComboBox.SelectedItem = this.targetImageBrush.Stretch.ToString();

            #endregion
            #region AlignmentX 콤보 박스를 설정한다.

            string[] alignmentXArray = Enum.GetNames(typeof(AlignmentX));

            foreach(string alignmentX in alignmentXArray)
            {
                this.alignmentXComboBox.Items.Add(alignmentX);
            }

            this.alignmentXComboBox.SelectedItem = this.targetImageBrush.AlignmentX.ToString();

            #endregion
            #region AlignmentY 콤보 박스를 설정한다.

            string[] alignmentYArray = Enum.GetNames(typeof (AlignmentY));

            foreach(string alignmentY in alignmentYArray)
            {
                this.alignmentYComboBox.Items.Add(alignmentY);
            }

            this.alignmentYComboBox.SelectedItem = this.targetImageBrush.AlignmentY.ToString();

            #endregion
            #region TileMode 콤보 박스를 설정한다.

            string[] timeModeArray = Enum.GetNames(typeof(TileMode));

            foreach(string tileMode in timeModeArray)
            {
                this.tileModeComboBox.Items.Add(tileMode);
            }

            this.tileModeComboBox.SelectedItem = this.targetImageBrush.TileMode.ToString();

            #endregion
            #region ViewportUnits/ViewboxUnits 콤보 박스를 설정한다.

            string[] brushMappingModeArray = Enum.GetNames(typeof(BrushMappingMode));

            foreach(string brushMappingMode in brushMappingModeArray)
            {
                this.viewportUnitsComboBox.Items.Add(brushMappingMode);
                this.viewboxUnitsComboBox.Items.Add(brushMappingMode);
            }

            this.viewportUnitsComboBox.SelectedItem = this.targetImageBrush.ViewportUnits.ToString();
            this.viewboxUnitsComboBox.SelectedItem  = this.targetImageBrush.ViewboxUnits.ToString();

            #endregion

            this.viewportTextBox.Text = this.targetImageBrush.Viewport.ToString();
            this.viewboxTextBox.Text  = this.targetImageBrush.Viewbox.ToString();

            this.imageRadioButton1.IsChecked = true;
        }

        #endregion
        #region 이미지 라디오 버튼 체크시 처리하기 - imageRadioButton_Checked(sender, e)

        /// <summary>
        /// 이미지 라디오 버튼 체크시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void imageRadioButton_Checked(object sender, RoutedEventArgs e)
        {
            this.checkedRadioButton = sender as RadioButton;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region Apply 버튼 클릭시 처리하기 - applyButton_Click(sender, e)

        /// <summary>
        /// Apply 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void applyButton_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                this.targetImageBrush.ImageSource   = (this.checkedRadioButton.Content as Image).Source;
                this.targetImageBrush.Stretch       = (Stretch)Enum.Parse(typeof(Stretch), (string)this.stretchComboBox.SelectedItem);
                this.targetImageBrush.AlignmentX    = (AlignmentX)Enum.Parse(typeof(AlignmentX), (string)this.alignmentXComboBox.SelectedItem);
                this.targetImageBrush.AlignmentY    = (AlignmentY)Enum.Parse(typeof(AlignmentY), (string)this.alignmentYComboBox.SelectedItem);
                this.targetImageBrush.TileMode      = (TileMode)Enum.Parse(typeof(TileMode), (string)this.tileModeComboBox.SelectedItem);
                this.targetImageBrush.ViewportUnits = (BrushMappingMode)Enum.Parse(typeof(BrushMappingMode), (string)this.viewportUnitsComboBox.SelectedItem);
                this.targetImageBrush.ViewboxUnits  = (BrushMappingMode)Enum.Parse(typeof(BrushMappingMode), (string)this.viewboxUnitsComboBox.SelectedItem);

                RectConverter rectConverter = new RectConverter();

                string viewport = this.viewportTextBox.Text;

                if(!string.IsNullOrEmpty(viewport))
                {
                    this.targetImageBrush.Viewport = (Rect)rectConverter.ConvertFromString(viewport);
                }
                else
                {
                    this.targetImageBrush.Viewport = Rect.Empty;

                    this.viewportTextBox.Text = "Empty";
                }

                string viewbox = this.viewboxTextBox.Text;

                if(!string.IsNullOrEmpty(viewbox) && viewbox.ToLower() != "(auto)")
                {
                    this.targetImageBrush.Viewbox = (Rect)rectConverter.ConvertFromString(viewbox);
                }
                else
                {
                    this.viewboxTextBox.Text = "Empty";

                    this.targetImageBrush.Viewbox = Rect.Empty;
                }
            }
            catch(InvalidOperationException invalidOperationException)
            {
                MessageBox.Show("Invalid Viewport or Viewbox. " + invalidOperationException);
            }
            catch(FormatException formatException)
            {
                MessageBox.Show("Invalid Viewport or Viewbox. " + formatException);
            }
        }

        #endregion
    }
}