WPF - Brush

SolidBrush

1

<Grid x:Name="grd" Background="Red">

cs

1 2

grd.Background = new SolidColorBrush(Color.FromRgb(0, 255, 255)); grd.Background = new SolidColorBrush(Color.FromRgba(0, 255, 255, 222));

cs

SystemColors 로 시스템컬러도 가져올 수 있음.

GradientBrush

1 2 3 4 5 6 7

<Grid.Background>     <LinearGradientBrush StartPoint="0, 0" EndPoint="1, 0" >         <GradientStop Color="Blue" Offset="0"/>         <GradientStop Color="black" Offset="0.5"/>         <GradientStop Color="Red" Offset="1"/>     </LinearGradientBrush> </Grid.Background> Colored by Color Scripter

cs

왼위가 0, 0 인걸 기준으로 StartPoint, EndPoint 로 배합기준점을 정할 수 있음.

Background 뿐만 아니라 Shape 의 Fill 등 Brush 가 들어가는 데는 다 위처럼 가능

1

<LinearGradientBrush StartPoint="0, 0" EndPoint="0.2, 0" SpreadMethod="Reflect" >

cs

Start/EndPoint 로 커버되지 않는 부분을 어떻게 처리할지 SpreadMethod 로 지정함.

Pad 는 끝부분 색깔로 처리,

Reflect, Repeat 는 반복패턴임.

RadialGradient

1 2 3 4 5 6 7

<Ellipse.Fill>     <RadialGradientBrush RadiusX="0.5" RadiusY="0.5"                           Center="0.5, 0.5" GradientOrigin="0.7 0.3">         <GradientStop Color="White" Offset="0"/>         <GradientStop Color="Firebrick" Offset="1"/>     </RadialGradientBrush> </Ellipse.Fill> Colored by Color Scripter

cs

Center 은 퍼지는 중심이고, GradientOrigin 이 원의 중심임.

ImageBrush

1 2 3 4 5 6

<Grid.Background>     <ImageBrush Stretch="UniformToFill"          Viewbox="0.1,0.1 0.8,0.7" Viewport="0.3,0.3 0.3,0.3"                         TileMode="Tile" ViewportUnits="RelativeToBoundingBox"         ImageSource="https://ssl.nx.com/s2/game/maplestory/renewal/common/maple_image01.jpg"/> </Grid.Background> Colored by Color Scripter

cs

Stretch 는 Shape 의 Stretch 속성과 같음.

Viewbox 는 두 좌표를 통해 source 를 잘라냄.

Viewport 는 처음 좌표로 시작위치를 두번째좌표로 나타낼 source 의 크기를 보임.

TileMode 는 타일 시 좌표축을 기준으로 뒤집는다던가의 옵션이 있음.

ViewportUnits 는 FrameElement 의 크기가 바뀔 때 Viewport 크기의 상대/절대 옵션.

VisualBrush

1 2 3

<Rectangle.Fill>     <VisualBrush Visual="{Binding ElementName=btn1}"/> </Rectangle.Fill> Colored by Color Scripter

cs

해당 컨트롤 등의 모습을 동적 바인딩 하는 것.

위의 예시에선 btn1 이 클릭될 때 똑같이 클릭효과가 된 그림을 보여줄 것이다.

OpacityMask

1 2 3 4 5 6 7 8

<Button Foreground="Yellow" FontSize="20" Content="계속진행.." Width="120" Height="50">     <Button.OpacityMask>         <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">             <GradientStop Color="#ffaaaaaa" Offset="0"/>             <GradientStop Color="#88aaaaaa" Offset="1"/>         </LinearGradientBrush>     </Button.OpacityMask> </Button> Colored by Color Scripter

cs

투명도만 적용하는 방법임.

Brush 는 다른거해도 됨.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<Rectangle Grid.Row="1" Height="{Binding ElementName=txt01, Path=Height}">     <Rectangle.Fill>         <VisualBrush Visual="{Binding ElementName=txt01}"/>     </Rectangle.Fill>     <Rectangle.RenderTransform>         <TransformGroup>             <ScaleTransform ScaleY="-1"/>             <TranslateTransform X="0" Y="50"/>         </TransformGroup>     </Rectangle.RenderTransform>     <Rectangle.OpacityMask>         <LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1">             <GradientStop Offset="0.2" Color="#33aaaaaa"/>             <GradientStop Offset="1" Color="#afaaaaaa"/>         </LinearGradientBrush>     </Rectangle.OpacityMask> </Rectangle> Colored by Color Scripter

cs

위는 거울반사효과 예제.