ITnetwork Flashka zdarma C# týden
Akce! Pouze tento týden sleva až 80 % na kurzy C# .NET. Lze kombinovat s akcí 50 % bodů navíc na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Lekce 26 - WPF - 2D efekty

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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:

2D efekt rozmazání v C# .NET WPF

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:

2D efekt DropShadow v C# .NET WPF

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 (0360 stupňů)
  • Opacity – průhlednost stínu (01)
  • 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 (0360 stupňů)
  • RenderTransformOrigin – nastavuje souřadnice otáčení prvku (levý horní roh, střed, pravý dolní roh)
  • RotateTransform – provádí rotaci prvku (0360 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:

Efekty transformace v C# .NET WPF

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:

Štětec SolidColorBrush v C# .NET WPF

Vlastnosti

U SolidColorBrush nastavujeme:

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

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:

Štětec LinearGradientBrush v C# .NET WPF

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 (01)
  • Opacity – průhlednost barevného přechodu (01).
  • 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:

Štětec RadialGradientBrush v C# .NET WPF

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 (01)
  • Opacity – průhlednost barevného přechodu (01)
  • Radius – nastavuje poloměr barevného přechodu (01)
  • 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:

Štětec ImageBrush v C# .NET WPF

Vlastnosti

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

  • Opacity – průhlednost obrázku (01)
  • Viewport – velikost zobrazení obrázku (01)
  • 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:

Štětec VisualBrush v C# .NET WPF

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 na dvou maskách:

OpacityMask v C# .NET WPF

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, WPF - Základní ovládací prvky WPF, to budou Button, CheckBox a RadioButton.


 

Stáhnout

Staženo 13x (8.76 MB)

 

 

Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!