Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Brushes

Brushes

Colors can be produced by brushes in WPF.

SolidColorBrush

The simpliest class of Brush class for painting a given area with only a specified colour by the Color attribute.

Example VI.1 SolidColorBrush

VI.1. SolidColorBrush

<Grid>

        <Grid.Resources>

           <Color x:Key="ornageColor" A="255" R="255" G="176" B="59" ></Color>

           <Color x:Key="redColor">#FFAA2C27</Color>

           <SolidColorBrush x:Key="ornageFill"

                      Color="{StaticResource ornageColor}"></SolidColorBrush>

           <SolidColorBrush x:Key="redFill"

                      Color="{StaticResource redColor}"></SolidColorBrush>

        </Grid.Resources>

        <Button Width="150" Height="50" Content="Színek kezelése" FontSize="18"

                Background="{StaticResource ResourceKey=ornageFill}"

                Foreground="{StaticResource ResourceKey=redFill}">

        </Button>

</Grid>

LinearGradientBrush

LinearGadientBrush permits gradient fills.

<LinearGradientBrush

        StartPoint="0.5,0"

        EndPoint="0.5,1">

     <GradientStop Color="color1" Offset="0.4"/>

                 (0 – 1 )

     <GradientStop Color=”color2” Offset=”1”/>

</LinearGradientBrush>

VI.2. Gradient

VI.3. GradientStop

Example VI.2 LinearGradientBrush

VI.4. LinearGradientBrush

<LinearGradientBrush x:Key="orangetoyellowFill"

                  StartPoint="0.5,0"

                  EndPoint="0.5,1">

       <GradientStop Color="{StaticResource ResourceKey=orangeColor}"

                  Offset="0.4"/>

       <GradientStop Color="Red"

                  Offset="1"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="yellowtoblueFill"

                  StartPoint="0,0.5"

                  EndPoint="1,0.5">

      <GradientStop Color="Yellow" Offset="1"/>

      <GradientStop Color="Blue" Offset="0.4"/>

</LinearGradientBrush>

RadialGradientBrush

RadialGradientBrush makes the radial gradient fill possible.

<RadialGradientBrush GradientOrigin=”0.45, 0.30”>

        <GradientStop Color=””

        Offset=”0”/>

        <GradientStop Color=””

        Offset=”1”/>

</RadialGradientBrush>

The transition is a stretching line from the center of the transition (GradientOrigin) to the circumference of the ellipse.

VI.5. RadialGradientBrush

Example VI.3 RadialGradienBrush

VI.6. RadialGradientBrush

<Grid.Resources>

     <RadialGradientBrush x:Key="yellowtoorangeRadialFill"  GradientOrigin="0.75,0.25">

                <GradientStop Color="Yellow" Offset="0.0" />

                <GradientStop Color="Orange" Offset="0.2" />

                <GradientStop Color="Red" Offset="1.0" />

     </RadialGradientBrush>

</Grid.Resources>

<Button Width="150" Height="50" Content="Színek kezelése" FontSize="18"

             Background="{StaticResource ResourceKey= yellowtoorangeRadialFill}"

             Foreground="{StaticResource ResourceKey=yellowtoblueFill}"/>

ImageBrush

We can draw on the ImageSource with the help of ImageBrush.

VI.4 Példa ImageBrush

VI.7. ImageBrush

<Rectangle Width="75" Height="75">

            <Rectangle.Fill>

                <ImageBrush ImageSource="images/apple.jpg"/>

            </Rectangle.Fill>

</Rectangle>

DrawingBrush

The previously known brushes have plenty of options for formatting elements. When more complex operations needs, we can do it by the BrawingBrush drawing brush suitable for coloring images’ backgrounds working with geometric data instead of DrawingBrush shapes.

First, here an example for preparing chessboard (Rectangle object).

VI.5 Példa Chess board

VI.8. Chess board

<Rectangle Width="200" Height="200">

            <Rectangle.Fill>

                <DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">

                    <DrawingBrush.Drawing>

                        <DrawingGroup>

                            <GeometryDrawing Brush="White">

                                <GeometryDrawing.Geometry>

                                    <RectangleGeometry Rect="0,0,100,100" />

                                </GeometryDrawing.Geometry>

                            </GeometryDrawing>

                            <GeometryDrawing Brush="Black">

                                <GeometryDrawing.Geometry>

                                    <GeometryGroup>

                                        <RectangleGeometry Rect="0,0,50,50" />

                                        <RectangleGeometry Rect="50,50,50,50"/>

                                    </GeometryGroup>

                                </GeometryDrawing.Geometry>

                            </GeometryDrawing>

                        </DrawingGroup>

                    </DrawingBrush.Drawing>

                </DrawingBrush>

            </Rectangle.Fill>

</Rectangle>

VisualBrush

The VisualBrush has various functions, which can paint on any surfaces as a descendant of  the Visual class.

VI.7 Példa BMW emblem

VI.9. BMW emblem

<Rectangle Width="75" Height="75">

       <Rectangle.Fill>

           <VisualBrush TileMode="Tile">

               <VisualBrush.Visual>

                   <StackPanel>

                       <StackPanel.Background>

                           <DrawingBrush>

                               <DrawingBrush.Drawing>

                                   <GeometryDrawing>

                                       <GeometryDrawing.Brush>

                                           <RadialGradientBrush>

                                  <GradientStop Color="MediumBlue" Offset="0.0" />

                                  <GradientStop Color="White" Offset="1.0" />

                                           </RadialGradientBrush>

                                       </GeometryDrawing.Brush>

                                      <GeometryDrawing.Geometry>

                                          <GeometryGroup>

                                               <RectangleGeometry Rect="0,0,50,50" />

                                               <RectangleGeometry Rect="50,50,50,50" />

                                           </GeometryGroup>

                                      </GeometryDrawing.Geometry>

                                   </GeometryDrawing>

                               </DrawingBrush.Drawing>

                            </DrawingBrush>

                       </StackPanel.Background>

                      <TextBlock FontSize="10pt" Margin="10">BMW</TextBlock>

                   </StackPanel>

              </VisualBrush.Visual>

          </VisualBrush>

       </Rectangle.Fill>

</Rectangle>