3. Díl WPF - Pozadí elementů

C# .NET WPF 3. Díl WPF - Pozadí elementů

V tomto díle si ukážeme pozadí. Na vykreslení pozadí se používají štětce, těch jsou čtyři druhy:

  • solid color brush
  • linear gradient brush
  • radial gradient brush
  • image brush

Název štětců možná napovídá jak budou vykreslovat. To si teď probereme a také jejich použití v xaml, i v kódu. Začneme tím nejjednodušším a přesto nejpoužívanějším štětcem solid color brush.

Solid color brush

Použití tohoto štětce má více způsobů než u ostatních. Konkrétně se dá navíc použít i přímo ve vlastnostech elementu pomocí vlastnosti background

<Grid Background="#AABBCCDD" />
<Grid Background="Blue" />

Vysvětlíme si první řádek:

  • písmena AA nám určují alpha (opacity) vlastnost barvy
  • písmena BB, CC, DD nám určují R G B barvy

Druhý řádek používá již předpřipravenou barvu, všechny použitelné barvy naleznete ZDE.

Pak tu ještě máme možnost vytvořit pozadí druhým způsobem a to tak, že ho vložíme do gridu jako by bylo element, který tomu gridu náleží.

<Grid>
    <Grid.Background>
        <!-- pozadí -->
    </Grid.Background>
</Grid>

nyní nahradíme naším štětcem, v tomto případě jednobarevným. Bude vypadat asi takto

<SolidColorBrush Color="#FF00FF" />

Ještě můžeme do štětce doplnit další vlastnosti jako třeba průhlednost barvy, nebo transformaci.

Další možností vytvoření solid color brushe je přes C# kód. V kódu si jednoduše vytvoříme nový štětec a ten pak určíme jako pozadí našeho elementu

SolidColorBrush brush = new SolidColorBrush(Color.Blue);
basicGrid.Background = brush;

Linear Gradient Brush

U tohoto štětce, pokud ho nechcete používat metodou pokus - omyl, musíte pochopit význam jeho vlastností. Jako první si probereme XAML kód tohoto štětce

<LinearGradientBrush StartPoint="0,0" EndPoint="1,0" >
    <GradientStop Color="#0F0" Offset="1" />
    <GradientStop Color="#00F" Offset="0" />
</LinearGradientBrush>

Nyní si vysvětlíme vlastnosti. Štětec by měl mít vždy určenou počáteční a konečnou pozici (StartPoint, EndPoint). Tato pozice se ovšem neudává v pixelech, nýbrž v procentech velikosti strany.

Zde si můžete všimnout že pozice se udává sice v procentech, ale pořád je ve formátu X,Y. Dále zde máme GradientStop, ty slouží k umísťování barev do štětce, pokud budeme chtít aby štětec přecházel z jedné barvy do druhé, použijeme dvě stopky, pokud budeme ještě chtít mezibarvu, přidáme další stopku. Pozice těchto barev nám určuje Offset, pokud tedy například budeme chtít aby naše mezibarva nebyla uprostřed, ale hned vedle jiné barvy, změníme ji offset. Offset nám tedy udává kde se barva bude nacházet, opět máme hodnotu od 0 do 1, ale zde už nemáme souřadnice X,Y ale jen jedno číslo, to proto že směr barvy nám určuje StartPoint a EndPoint, Offset je vlastně jenom procentuální vzdálenost mezi těmito body.

(snad jste to pochopili alespoň z obrázku)

Další možností použití lineárního štětce je přes C# kód. Zde už to ovšem nebudu vysvětlovat, jenom vám ukáži jak to bude vypadat. Vlastnosti se zde určují stejné jako v XAML.

LinearGradientBrush linearBrush = new LinearGradientBrush();

GradientStopCollection linearStops = new GradientStopCollection();

GradientStop redStop = new GradientStop(Colors.Red, 1);
GradientStop blueStop = new GradientStop(Colors.Blue, 0);

linearStops.Add(redStop);
linearStops.Add(blueStop);

linearBrush.StartPoint = new Point(0, 0);
linearBrush.EndPoint = new Point(1, 0);

linearBrush.GradientStops = linearStops;

LinearBrushCode.Background = linearBrush;

Radial Gradient Brush

Tento štětec je téměř totožný s lineárním štětcem, zde se nám ovšem nevykresluje v rovině, ale v elipsách. Štětec má ovšem oproti lineárním některé vlastnosti navíc nebo jiné, ale můžeme použít stejné GradientStops jako u Lineárního. Ukážeme si jeho použití v XAML:

<RadialGradientBrush>
    <GradientStop Color="#F00" Offset="1" />
    <GradientStop Color="#0F0" Offset="0" />
</RadialGradientBrush>

To je ten nejjednodušší způsob. Dále bychom si mohli do tagu RadialGradientBrush přidat vlastnosti jako třeba střed elipsy (GradientOrigin), rádiusy, nebo transformaci elips v určitém směru (Center). To už si ale můžete vyzkoušet sami. Ještě si ukážeme použití radiálního štětce v C# kódu.

RadialGradientBrush radialBrush = new RadialGradientBrush();

GradientStopCollection radialStops = new GradientStopCollection();


GradientStop redStop = new GradientStop(Colors.Red, 1);
GradientStop blueStop = new GradientStop(Colors.Blue, 0);


radialStops.Add(redStop);
radialStops.Add(blueStop);

radialBrush.GradientStops = radialStops;

RadialBrushCode.Background = radialBrush;

Image Brush

Rozhodně nejzajímavější štětec. Tento štětec vykresluje totiž obrázek. Obrázek si můžeme určit pomocí kódu, mít ho ve složce s programem nebo zabudovaný v programu pomocí souboru Resources. V XAML si obrázek přiřadíme pomocí vlastnosti ImageSource v položce Properties, kde si vybereme přímo soubor.

Ukázka XAML kódu ImageBrushe

<ImageBrush Stretch="Fill" ImageSource="Images/Chrysanthemum.jpg" />

Když ovšem chceme nahrát obrázek v C# kódu, máme dvě možnosti.
První je použití přímo cesty k souboru

BitmapImage image = new BitmapImage(
    new Uri(System.IO.Path.Combine(
        Environment.CurrentDirectory, "Glow_wallpaper.jpeg")));

ImageBrush imageBrush = new ImageBrush(image) { Stretch = Stretch.Fill };

ImageBrushCode.Background = imageBrush;

Zde je použitý obrázek přímo ve složce s programem. Druhá možnost je načtení pomocí streamu z Resources souboru.

K tomu budeme potřebovat metodu:

public static BitmapImage LoadBitmap(Systém.Drawing.Bitmap input)
{
    using(MemoryStream memory = new MemoryStream())
    {
        input.Save(memory, ImageFormat.Png);
        memory.Position = 0;
        BitmapImage bitmapImage = new BitmapImage();
        bitmapImage.BeginInit();
        bitmapImage.StreamSource = memory;
        bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
        bitmapImage.EndInit();

        return bitmapImage;
    }
}

Zde už je použití naprosto jednoduché, stačí zavolat kód:

imageBrush.ImageSource = LoadBitmap(global::<Jmeno projektu>.Resources.<Jmeno obrazku>);

Zde je obrázek aplikace používající výše uvedené štětce:

Štětce v C# .NET WPF

To by bylo ode mě ke štětcům vše. Pokud budete mít dotaz tam mi můžete napsat PM, nebo se zeptejte v komentáři. Zdrojové kódy přiloženy.


 

Stáhnout

Staženo 259x (3.5 MB)
Aplikace je včetně zdrojových kódů v jazyce C#

 

  Aktivity (1)

Článek pro vás napsal Theodor Johnson
Avatar
Autor má většinou na svědomí projekty v jazyce C#.

Jak se ti líbí článek?
Celkem (5 hlasů) :
55555


 


Miniatura
Předchozí článek
2. Díl WPF - Příběhy
Miniatura
Všechny články v sekci
Okenní aplikace v C# .NET WPF

 

 

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í!