70-511 Rozdział 3 - Graficzny interfejs użytwkonika - Pędzle

WPF oferuje całkowicie nowe podejście w kwestii tworzenia wizualnego interfejsu użytkownika. Dzięki wykorzystaniu możliwości DirectX można tworzyć dużo bardziej intuicyjny i przyjazny interfejs.

Pędzle
Podstawowy obiekt służący do malowania interfejsu użytkonika. Można go przypisywać do różnych właściwości kontrolki jak np.

• Background - kolor tła kontrolki
• BorderBrush - kolor ramki kontrolki
• Fill - kolor wypełnienia kontrolki
• Foreground - kolor pierwszego planu, np. wartość tekstowa na przycisku
• OpacityMask - służy do tworzenia przeźroczystych kolorów
• Stroke - służy do malowania rogów kontrolki

 Pędzla można użyć aż do momentu gdy nie zostanie wywołana metoda Freeze. Wtedy pędzel staje się tylko do odczytu.

SolidColorBrush
Najprostszy z pędzli - tworzy jednokolorowy pędzel. Dostępne są gotowe predefiniowane pędzle w klasie Brushes:

Code:

Brush aBrush;
aBrush = Brushes.AliceBlue;

Można także podawać kolor heksadecymalne:

Code:

<Button Background="#FFFF0000"></Button>

bądź jako składowe RGB:

Code:

        <Button>
            <Button.Background>
                <SolidColorBrush>
                    <SolidColorBrush.Color>
                        <Color A="255" R="0" G="0" B="255"/>
                    </SolidColorBrush.Color>
                </SolidColorBrush>
            </Button.Background>
        </Button>

Gradient
Pozwala na tworzenie pędzla złożonego z dwóch lub więcej kolorów. Koordynaty przebiegają tak jak jest to przedstawione na poniższym obrazku:

są one relatywne do wielkości obrazka.

Code:

        <Grid>
            <Grid.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>

Każdy pędzel tego typu udostępnia kolekcję GradientStop która udostępnia dwie ważne właściwości:

• Color - kolor
• Offset - określa miejsce w którym dany kolor nie jest mieszany z innym. 

W przykładzie powyższym górny róg będzie koloru białego, a dolny czarnego, pozostałe miejsce będzie wypełnione mieszaniną tych kolorów
Domyślnie tworzony jest gradient przebiegający w poprzek - od lewego górnego rogu do prawego dolnego. Możemy to zachowanie zmienić ustawiając dwie właściwości: StartPoint oraz EndPoint

Code:

        <Grid>
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>

Jeżeli EndPoint lub StartPoint nie pokrywa całej powierzchni, właściwość Spread decyduje jak będzie pokryta reszta malowanego obiektu. Spred może przyjąć jedną z 3 możliwych wartości:

• Pad - używa jednorodnego koloru na końcach przedziału
• Reflect - daje efekt odbitego gradientu na pozostałej powierzchni
• Repeat - powtarza gradient

RadialGradientBrush
Tworzy gradient w kształcie kół:

Właściwości:

• GradientOrigin - określa w którym miejscu jest środek gradientu
• RadiusX - poziomy promień najbardziej zewnętrznego okręgu
• RadiusY - pionowy promień najbardziej zewnętrznego okręgu

Code:

        <Grid>
            <Grid.Background>
                <RadialGradientBrush Center=".5, .5" RadiusX="0.5" RadiusY=".25">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="BlueViolet" Offset="0.5"/>
                    <GradientStop Color="DarkCyan" Offset="0.5"/>
                    <GradientStop Color="White" Offset="1"/>    
                </RadialGradientBrush>
            </Grid.Background>
        </Grid>

ImageBrush
Pozwala malować po obiektach grafiką pobraną z pliku graficznego:

Code:

        <Grid.Background>
            <ImageBrush ImageSource="Penguins.jpg" Viewbox="0,0,1,1" />
        </Grid.Background>

Za pomocą właściwości Viewbox określamy która część obrazka ma zostać pobrana (koordynaty tak samo jak w przypadku GradientBrush)

Jeżeli właściwość Stretch jest ustawiona na None można zmienić zachowanie pędzla przez ustawienie właściwości TileMode najlepiej przedstawia poniższy obrazek:

VisualBrush
VisualBrush jest bardzo podobny w działaniu do ImageBrush z tym że do malowania używa obiektów które dziedziczą po klasie Visual np. przycisku:

Code:

<VisualBrush Visual="{Binding ElementName=Button1}">
</VisualBrush>