Lekce 32 - WPF - 2D efekty

V minulé lekci, Změna tvaru formuláře v C# .NET WPF, jsme si ukazovali jak mimo jiné změnit tvar WPF formuláře.

O úpravách vzhledu WPF prvků jsme si již říkali ve WPF lekcích o stylech, skinech a motivech. Popisovali jsme si nastavování vzhledu pomocí vlastností prvků. Ve WPF lze nastavovat vzhled také pomocí tzv. 2D efektů. Využíváme k tomu jmenný prostor Effects, který je definován v .NET Framework 4 a vyšším (System.Windows.Media.Effects), třídu Brush (z System.Windows.Media) a třídu Transform (opět z System.Windows.Media).

Effects

Jmenný prostor Effects nám nabízí několik grafických efektů, které můžeme aplikovat na libovolný ovládací prvek WPF.

BlurEffect

Ukažme si příklad efektu rozostření na ovládacím prvku Label:

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

Výsledek:

Vlastnosti

U efektu rozostření můžeme nastavit následující vlastnosti:

• Radius – nastavuje poloměr rozostření

DropShadowEffect

Jako druhý efekt zde máme DropShadowEffect, který vytvoří stín kolem prvku. Ukažme si opět jak by vypadal na ovládacím 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ýsledek:

Vlastnosti

Stín má již několik vlastností, kterými si efekt můžeme přispůsobit:

• BlurRadius – nastavuje poloměr rozostření
• Direction – úhel zobrazení stínu (0 – 360 stupňů)
• Opacity – průhlednost stínu (0 – 1)
• ShadowDepth – velikost posunu stínu

   

Transformace

Transformace umožňují daný ovládací prvek otáčet, škálovat, zkosit a posouvat. Již jsme si uvedli, že je za ně interně odpovědná třída Transform.

Druhy transformací

k dispozici máme následující třídy pro různé typy tarnsformací:

• TranslateTransform – nastavuje posun prvku podle souřadnic X, Y
• ScaleTransform – mění velikost prvku podle souřadnic X, Y
• SkewTransform – provádí zkosení prvku podle souřadnic X, Y (0 – 360 stupňů)
• RenderTransformOrigin – nastavuje souřadnice otáčení prvku (levý horní roh, střed, pravý dolní roh)
• RotateTransform – provádí rotaci prvku (0 – 360 stupňů)

Příklad

Na rozdíl od efektů si můžeme transformace vyzkoušet na jediném příkladu a to poměrně přehledně:

<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ýsledek:

Brush

Dostáváme se ke štětcům. Pomocí nich můžeme kromě obyčejné barvy nastavit ovládacímu prvku pozadí i barevným přechodem, obrázkem nebo vlastním vzorem.

SolidColorBrush

Štětec vyplní plochu jednou barvou:

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

Výsledek:

Vlastnosti

U SolidColorBrush nastavujeme:

• Color – nastavuje barvu pozadí
• Opacity – průhlednost barvy (0 – 1)

   

LinearGradientBrush

Štětec vyplní plochu lineárním barevným přechodem:

<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ýsledek:

Vlastnosti

Ohledně vlastností zde máme:

• StartPoint – nastavuje začátek barevného přechodu (od 0.0 do 1.1).
• EndPoint – nastavuje konec barevného přechodu (od 0.0 do 1.1).
• GradientStop – barva a umístění barevného přechodu. Můžeme nastavit:
  • Color – použitá barva
  • Offset – umístění barvy (0 až 1)
• Opacity – průhlednost barevného přechodu (0 – 1).
• SpreadMethod – nastavuje způsob vyplnění plochy. Metody jsou:
  • Pad – zobrazuje jeden barevný přechod
  • Reflect – zobrazí barevný přechod a na jeho konci jej zopakuje s obráceným pořadím barev
  • Repeat – zobrazí barevný přechod a na jeho konci jej zopakuje se stejným pořadím barev

 

RadialGradientBrush

Tento štětec vyplní plochu paprskovitým barevným přechodem:

<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ýsledek:

Vlastnosti

Ohledně vlastností štětci nastavujeme:

• GradientOrigin – nastavuje střed barevného přechodu podle souřadnic X, Y
• GradientStop – barva a umístění barevného přechodu. Nastavujeme:
  • Color – použitá barva
  • Offset – umístění barvy (0 až 1)
• Opacity – průhlednost barevného přechodu (0 – 1)
• Radius – nastavuje poloměr barevného přechodu (0 – 1)
• SpreadMethod – nastavuje způsob vyplnění plochy. Metody jsou následující:
  • Pad – zobrazuje jeden barevný přechod
  • Reflect – zobrazí barevný přechod a na jeho konci jej zopakuje s obráceným pořadím barev
  • Repeat – zobrazí barevný přechod a na jeho konci jej zopakuje se stejným pořadím barev

ImageBrush

Štetec vyplní plochu ovládacího prvku obrázkem:

<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ýsledek:

Vlastnosti

Opět si uveďme vlastnosti, které můžeme ImageBrush nastavit:

• Opacity – průhlednost obrázku (0 – 1)
• Viewport – velikost zobrazení obrázku (0 – 1)
• TileMode – způsob vyplnění plochy obrázkem. Máme následující možnosti:
  • None – zobrazí pouze 1 obrázek
  • FlipX – vyplní plochu opakujícím se obrázkem a střídavě otáčí obrázek kolem osy X
  • FlipY – vyplní plochu opakujícím se obrázkem a střídavě otáčí obrázek kolem osy Y
  • FlipXY – vyplní plochu opakujícím se obrázkem a střídavě otáčí obrázek kolem osy X a Y
  • Tile – vyplní plochu opakujícím se obrázkem jako dlaždicemi

  

VisualBrush

VisualBrush vyplní plochu vlastním vzorem. Uveďme si pří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ýsledek:

OpacityMask

Na závěr si ještě zmiňme jednu možnost, jak vytvářet zajímavé efekty. Kromě výše uvedených nástrojů je ve WPF k dispozici ještě vlastnost OpacityMask. Je možné ji nastavit např. u barvy Background, Foreground, BorderBrush... a má i stejné možnosti (1 barva, barevný přechod, obrázek). Funguje tak, že zprůhledňuje jednotlivé části obrázku podle barvy daného bodu v masce. Kde je v masce černá barva, je obrázek pod maskou viditelný a kde je bílá je úplně průhledný (neviditelný). Odstíny šedé v masce poté určují částečnou viditelnost dané oblasti obrázku. Níže si zprůhlednění části obrázku předveďme:

V několika dalších lekcích si uděláme takový průlet ovládacími prvky z Toolboxu, čímž zakončíme náš kurz.

V příští lekci, DependencyProperties v C# .NET WPF, si představíme DependencyPro­perties z WPF a co umí navíc oproti klasickým C# vlastnostem v kombinaci s INotifyProper­tyChanged.