26. diel - WPF - 2D efekty

V minulej lekcii, Audio/Video prehrávač v C# a WPF - Dokončenie zmeny vzhľadu , sme dokončili vylepšenie vzhľadu obrazovky nášho prehrávača.

V minulej lekcii, Audio/Video prehrávač v C# a WPF - Dokončenie zmeny vzhľadu , sme si ukazovali ako okrem iného zmeniť tvar WPF formulára. O úpravách vzhľadu WPF prvkov sme si už hovorili vo WPF lekciách o štýloch, skinov a motívoch. Popisovali sme si nastavovanie vzhľadu pomocou vlastností prvkov. Vo WPF možné nastavovať vzhľad tiež pomocou tzv. 2D efektov. Využívame k tomu menný priestor Effects, ktorý je definovaný v .NET Framework 4 a vyšším (System.Windows.Media.Effects), triedu Brush (z System.Windows.Media) a triedu Transform (opäť z System.Windows.Media).

Effects

Menný priestor Effects nám ponúka niekoľko grafických efektov, ktoré môžeme aplikovať na ľubovoľný ovládací prvok WPF.

BlurEffect

Ukážme si príklad efektu rozostrenie na ovládacom prvku Label:

<Label Grid.Row="1" Content="Nějaký text"
        Style="{StaticResource Text}">
    <Label.Effect>
        <BlurEffect Radius="10"/>
    </Label.Effect>
</Label>

výsledok:

Vlastnosti

U efektu rozostrenie môžeme nastaviť nasledujúce vlastnosti:

• Radius - nastavuje polomer rozostrenie

DropShadowEffect

Ako druhý efekt tu máme DropShadowEffect, ktorý vytvorí tieň okolo prvku. Ukážme si opäť ako by vyzeral na ovládacom prvku Label:

<Label Grid.Row="1" Content="Nějaký text"
        Style="{StaticResource Text}">
    <Label.Effect>
        <DropShadowEffect ShadowDepth="5"
                          BlurRadius="5"
                          Direction="315"
                          Opacity="1"
                          Color="Black"/>
    </Label.Effect>
</Label>

výsledok:

Vlastnosti

Tieň má už niekoľko vlastností, ktorými si efekt môžeme prispôsobiť:

• BlurRadius - nastavuje polomer rozostrenie
• Direction - uhol zobrazenie tieňa (0 - 360 stupňov)
• Opacity - priehľadnosť tieňa (0 - 1)
• ShadowDepth - veľkosť posunu tieňa

Transformácia

Transformácia umožňujú daný ovládací prvok otáčať, škálovať, skosiť a posúvať. Už sme si uviedli, že je za ne interne zodpovedná trieda Transform.

Druhy transformáciou

k dispozícii máme nasledujúce triedy pre rôzne typy tarnsformací:

• TranslateTransform - nastavuje posun prvku podľa súradníc X, Y
• ScaleTransform - mení veľkosť prvku podľa súradníc X, Y
• SkewTransform - vykonáva skosenie prvku podľa súradníc X, Y (0 - 360 stupňov)
• RenderTransformOrigin - nastavuje súradnice otáčania prvku (ľavý horný roh, stred, pravý dolný roh)
• RotateTransform - vykonáva rotáciu prvku (0 - 360 stupňov)

Príklad

Na rozdiel od efektov si môžeme transformácie vyskúšať na jedinom príklade a to pomerne prehľadne:

<Label x:Name="lblText" Content="Text"
       Style="{StaticResource Text}" RenderTransformOrigin="0.5,0.5">
    <Label.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1"
                            ScaleY="1"/>
            <SkewTransform AngleX="10"
                           AngleY="10"/>
            <RotateTransform Angle="45"/>
            <TranslateTransform/>
        </TransformGroup>
    </Label.RenderTransform>
</Label>

výsledok:

Brush

Dostávame sa ku štetcom. Pomocou nich môžeme okrem obyčajné farby nastaviť ovládaciemu prvku pozadia aj farebným prechodom, obrázkom alebo vlastným vzorom.

SolidColorBrush

Štetec vyplní plochu jednou farbou:

<Rectangle Grid.Row="1" Width="140" Height="140" Stroke="Black">
    <Rectangle.Fill>
        <SolidColorBrush Color="Lime" Opacity="1"/>
    </Rectangle.Fill>
</Rectangle>

výsledok:

Vlastnosti

U SolidColorBrush nastavujeme:

• Color - nastavuje farbu pozadia
• Opacity - priehľadnosť farby (0 - 1)

LinearGradientBrush

Štetec vyplní plochu lineárnym farebným prechodom:

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="Yellow" Offset="0"/>
    <GradientStop Color="Red" Offset="0.5"/>
    <GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>

výsledok:

Vlastnosti

Ohľadom vlastností tu máme:

• StartPoint - nastavuje začiatok farebného prechodu (od 0.0 do 1.1).
• EndPoint - nastavuje koniec farebného prechodu (od 0.0 do 1.1).
• GradientStop - farba a umiestnenie farebného prechodu. Môžeme nastaviť: Color - použitá farba

  Offset - umiestnenie farby (0 až 1)

• Color - použitá farba
• Offset - umiestnenie farby (0 až 1)
• Opacity - transparentnosť farebného prechodu (0 - 1).
• SpreadMethod - nastavuje spôsob vyplnenia plochy. Metódy sú: Pad - zobrazuje jeden farebný prechod

  Reflect - zobrazí farebný prechod a na jeho konci ho zopakuje s obráteným poradím farieb

  Repeat - zobrazí farebný prechod a na jeho konci ho zopakuje s rovnakým poradím farieb

• Pad - zobrazuje jeden farebný prechod
• Reflect - zobrazí farebný prechod a na jeho konci ho zopakuje s obráteným poradím farieb
• Repeat - zobrazí farebný prechod a na jeho konci ho zopakuje s rovnakým poradím farieb

RadialGradientBrush

Tento štetec vyplní plochu paprskovitým farebným prechodom:

<Ellipse Width="140" Height="140" Stroke="Black">
    <Ellipse.Fill>
        <RadialGradientBrush x:Name="radialni"
                             RadiusX="0.5"
                             RadiusY="0.5"
                             Opacity="1">
            <GradientStop Color="Yellow" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

výsledok:

Vlastnosti

Ohľadom vlastností štetci nastavujeme:

• GradientOrigin - nastavuje stred farebného prechodu podľa súradníc X, Y
• GradientStop - farba a umiestnenie farebného prechodu. nastavujeme: - Color - použitá farba
  • Offset - umiestnenie farby (0 až 1)
• Opacity - transparentnosť farebného prechodu (0 - 1)
• Radius - nastavuje polomer farebného prechodu (0 - 1)
• SpreadMethod - nastavuje spôsob vyplnenia plochy. Metódy sú nasledovné: - Pad - zobrazuje jeden farebný prechod
  • Reflect - zobrazí farebný prechod a na jeho konci ho zopakuje s obráteným poradím farieb
  • Repeat - zobrazí farebný prechod a na jeho konci ho zopakuje s rovnakým poradím farieb

ImageBrush

Štetec vyplní plochu ovládacieho prvku obrázkom:

<Rectangle Grid.Row="1" Stroke="Black"
            Width="200" Height="150">
    <Rectangle.Fill>
        <ImageBrush ImageSource="img1.jpg" Viewport="0,0,0.2,0.2"
                    TileMode="Tile"/>
    </Rectangle.Fill>
</Rectangle>

výsledok:

Vlastnosti

Opäť si uveďme vlastnosti, ktoré môžeme ImageBrush nastaviť:

• Opacity - priehľadnosť obrázku (0 - 1)
• Viewport - veľkosť zobrazenia obrázku (0 - 1)
• TileMode - spôsob vyplnenia plochy obrázkom. Máme nasledujúce možnosti: None - zobrazí iba 1 obrázok

  FlipX - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi X

  FlipY - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi Y

  FlipXY - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi X a Y

  Tile - vyplní plochu opakujúcim sa obrázkom ako dlaždicami

• None - zobrazí iba 1 obrázok
• FlipX - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi X
• FlipY - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi Y
• FlipXY - vyplní plochu opakujúcim sa obrázkom a striedavo otáča obrázok okolo osi X a Y
• Tile - vyplní plochu opakujúcim sa obrázkom ako dlaždicami

VisualBrush

VisualBrush vyplní plochu vlastným vzorom. Uveďme si príklad:

<StackPanel>
    <Rectangle Name="RectImage" Width="200" Height="100"
                    Stroke="Black">
        <Rectangle.Fill>
            <ImageBrush ImageSource="img1.jpg"/>
        </Rectangle.Fill>
    </Rectangle>

    <Rectangle Width="200" Height="80" RenderTransformOrigin="0.5,0.5"
               Margin="0,2,0,0" VerticalAlignment="Top">
        <Rectangle.Fill>
            <VisualBrush Opacity="1"
                         Visual="{Binding ElementName=RectImage}">
            </VisualBrush>
        </Rectangle.Fill>

        <Rectangle.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                <SkewTransform AngleX="0" AngleY="180"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </Rectangle.RenderTransform>

        <Rectangle.OpacityMask>
            <LinearGradientBrush x:Name="lgbMaska1"
                                 StartPoint="0.5, 0" EndPoint="0.5, 1">
                <GradientStop Color="#00000000" Offset="0.0"/>
                <GradientStop Color="#33000000" Offset="0.5"/>
                <GradientStop Color="#FF000000" Offset="0.75"/>
            </LinearGradientBrush>
        </Rectangle.OpacityMask>
    </Rectangle>
</StackPanel>

výsledok:

OpacityMask

Na záver si ešte spomeňme jednu možnosť, ako vytvárať zaujímavé efekty. Okrem vyššie uvedených nástrojov je vo WPF k dispozícii ešte vlastnosť OpacityMask. Je možné ju nastaviť napr. U farby Background, Foreground, BorderBrush ... a má aj rovnaké možnosti (1 farba, farebný prechod, obrázok). Funguje tak, že zvyšuje transparentnosť jednotlivé časti obrázku podľa farby daného bodu v maske. Kde je v maske čierna farba, je obrázok pod maskou viditeľný a kde je biela je úplne priehľadný (neviditeľný). Odtiene sivej v maske potom určujú čiastočnú viditeľnosť danej oblasti obrázka. Nižšie si spriehľadnenie časti obrázku predvedú na dvoch maskách:

V niekoľkých ďalších lekciách si urobíme taký prelet ovládacími prvkami z Toolbox, čím zakončíme náš kurz. V budúcej lekcii, Audio/Video prehrávač v C# a WPF - Nové funkcie - XAML , to budú Button, CheckBox a RadioButton.

V budúcej lekcii, Audio/Video prehrávač v C# a WPF - Nové funkcie - XAML , si v prehrávači upravíme kód formulára.