Color

 안녕하세요, 이번 글은 [Microsoft Control Style & Template 톺아보기] 시리즈의 개별 Control로 들어가기 전 공통적으로 나오는 Color에 관하여 알려드리도록 하겠습니다.

 

 

Color 소스와 Button 예제에서 사용 예

 Control 스타일 및 템플릿을 살펴보면 <!--Control colors. -->로 시작하는 소스가 있습니다. 이 소스는 Control에서 사용되는 색의 코드 값(주로 ARGB)을 이름으로 정의하여 보다 편리하게 코드 작업을 할 수 있도록 도와줍니다.

 

 

 소스 코드에는 Control colors,  Border colors, Control-specific resources로 나누어서 색이 정의되어 있습니다. Control colors는 대부분의 Control에서 사용하는 색, Border colors는 각 control의 테두리에 사용하는 색, Control-specific resources에는 특정 Control에 필요한 색이 정의되어있습니다. 대부분의 색들은 <Color>로 단색이 정의되어있지만, <LinearGradientBrush>로 그라데이션으로 정의되어있는 색도 있습니다.

 

 

 

---

 

 

Color

: 단색으로 영역을 그리는 방법으로 Key값(색을 정의할 이름)에 ARGB(A:투명도, R:빨간색, G:초록색, B:파란색) 값을 정의하는 것입니다.

 

사용 예시

<!-- 방법 1 : 16진수 값 0 ~ FF 로 표기(#을 앞에 꼭 붙여야됩니다!) -->
<Color x:Key="Color1">#FFCCE8FF</Color>

<!-- 방법 2 : 10진수 값 0 ~ 255 수로 표기 -->
<Color x:Key="Color2" A="255" R="235" G="232" B="255"/>

<!-- 방법 3 : 미리 정의된 색 견본 이름으로 표시 -->
<Color x:Key="Color3">Aliceblue</Color>

 

[전체 코드]가 궁금하신 분들은 더보기를 눌러보시면 됩니다.

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Color x:Key="Color1">#FFCCE8FF</Color>
        <Color x:Key="Color2" A="255" R="235" G="232" B="255"/>
        <Color x:Key="Color3">Aliceblue</Color>

        <Style TargetType="Rectangle">
            <Setter Property="Width" Value="200"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Margin" Value="20"/>
        </Style>

        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="30"/>
        </Style>
    </Window.Resources>
    
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel Orientation="Horizontal">
            <Grid>
                <Rectangle>
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource Color1}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="Color1"/>
            </Grid>
            
            <Grid>
                <Rectangle>
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource Color2}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="Color2"/>
            </Grid>

            <Grid>
                <Rectangle>
                    <Rectangle.Fill>
                        <SolidColorBrush Color="{StaticResource Color3}"/>
                    </Rectangle.Fill>
                </Rectangle>
                <TextBlock Text="Color3"/>
            </Grid>
        </StackPanel>
    </Grid>
</Window>

 

---

 

LinearGradientBrush

: 선형 그라데이션으로 영역을 그리는 방법으로 StartPoint와 EndPoint로 그라데이션 모양과 GradientStop을 이용하여 색 구간을 설정할 수 있습니다. GradientStopCollection을 이용하여 코드 효율을 더 높일 수 있습니다.

 

StartPoint와 EndPoint 위치는 아래의 사진을 참고하시면 됩니다.

 

사용 예시

<!-- GradientStopCollection 정의 -->
<GradientStopCollection x:Key="GSC1">
  <GradientStop Color="{StaticResource Color1}" Offset="0.0" />
  <GradientStop Color="{StaticResource Color2}" Offset="0.5" />
  <GradientStop Color="{StaticResource Color3}" Offset="1.0" />
</GradientStopCollection>

<!-- 방향 : → -->
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
  <GradientStop Color="{StaticResource Color1}" Offset="0.0" />
  <GradientStop Color="{StaticResource Color2}" Offset="0.5" />
  <GradientStop Color="{StaticResource Color3}" Offset="1.0" />
</LinearGradientBrush>

<!-- 방향 : ↘ GradientStopCollection 사용 -->
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1" GradientStops="{StaticResource GSC1}"/>

<!-- 방향 : ↓ GradientStopCollection 사용 -->
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" GradientStops="{StaticResource GSC1}"/>

 

[전체 코드]가 궁금하신 분들은 더보기를 눌러보시면 됩니다.

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Color x:Key="Color1">#FFFCB9AA</Color>
        <Color x:Key="Color2">#FFCBAACB</Color>
        <Color x:Key="Color3">#FF55CBCD</Color>

        <Style TargetType="Rectangle">
            <Setter Property="Width" Value="200"/>
            <Setter Property="Height" Value="100"/>
            <Setter Property="Margin" Value="20"/>
        </Style>

        <Style TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="30"/>
        </Style>

        <GradientStopCollection x:Key="GSC1">
            <GradientStop Color="{StaticResource Color1}" Offset="0.0" />
            <GradientStop Color="{StaticResource Color2}" Offset="0.5" />
            <GradientStop Color="{StaticResource Color3}" Offset="1.0" />
        </GradientStopCollection>
    </Window.Resources>
    
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <StackPanel>

            <StackPanel Orientation="Horizontal">
                <Grid>
                    <Rectangle>
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1, 0.5">
                                <GradientStop Color="{StaticResource Color1}" Offset="0.0" />
                                <GradientStop Color="{StaticResource Color2}" Offset="0.5" />
                                <GradientStop Color="{StaticResource Color3}" Offset="1.0" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Text="→"/>
                </Grid>

                <Grid>
                    <Rectangle>
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" GradientStops="{StaticResource GSC1}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Text="↘"/>
                </Grid>

                <Grid>
                    <Rectangle>
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" GradientStops="{StaticResource GSC1}"/>
                        </Rectangle.Fill>
                    </Rectangle>
                    <TextBlock Text="↓"/>
                </Grid>
            </StackPanel>

        </StackPanel>
    </Grid>
</Window>

 

 

---

 

 

 Control colors에 사용되는 Color에 대하여 간략하게 설명해보았습니다. Microsoft Control 스타일 및 템플릿에서 사용되는 전체 코드가 궁금하신 분들은 더보기를 눌러보시면 됩니다.

 

 

Control colors 전체 소스 내용

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>

<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush" EndPoint="0.5,1" StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0" EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF" Offset="0" />
      <GradientStop Color="#600000FF" Offset="0.4" />
      <GradientStop Color="#600000FF" Offset="0.6" />
      <GradientStop Color="#000000FF" Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>