3. Diel WPF - Pozadie elementov

V tomto diele si ukážeme pozadie. Na vykreslenie pozadí sa používajú štetce, tých sú štyri druhy:

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

Názov štetcov možno napovedá ako budú vykresľovať. To si teraz preberieme a tiež ich použitia v XAML, aj v kóde. Začneme tým najjednoduchším a napriek tomu najpoužívanejším štetcom solid color brush.

Solid color brush

Použitie tohto štetca má viac spôsobov ako u ostatných. Konkrétne sa dá navyše použiť aj priamo vo vlastnostiach elementu pomocou vlastnosti background

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

Vysvetlíme si prvý riadok:

• písmená AA nám určujú alpha (opacity) vlastnosť farby
• písmená BB, CC, DD nám určujú RGB farby

Druhý riadok používa už predpripravené farbu, všetky použiteľné farby nájdete TU.

Potom tu ešte máme možnosť vytvoriť pozadie druhým spôsobom a to tak, že ho vložíme do gridu ako by bolo element, ktorý tomu gridu patrí.

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

teraz nahradíme naším štetcom, v tomto prípade jednofarebným. Bude vyzerať asi takto

<SolidColorBrush Color="#FF00FF" />

Ešte môžeme do štetca doplniť ďalšie vlastnosti ako napríklad priehľadnosť farby, alebo transformáciu.

Ďalšou možnosťou vytvorenia solid color Brush je cez C# kód. V kóde si jednoducho vytvoríme nový štetec a ten potom určíme ako pozadie nášho elementu

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

Linear Gradient Brush

Pri tomto štetce, ak ho nechcete používať metódou pokus - omyl, musíte pochopiť význam jeho vlastností. Ako prvý si preberieme XAML kód tohto štetca

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

Teraz si vysvetlíme vlastnosti. Štetec by mal mať vždy určenú počiatočnú a konečnú pozíciu (StartPoint, Endpoint). Táto pozícia sa však neudáva v pixeloch, ale v percentách veľkosti strany.

Tu si môžete všimnúť že pozícia sa udáva síce v percentách, ale stále je vo formáte X, Y. Ďalej tu máme GradientStop, tie slúžia na umiestňovaní farieb do štetca, ak budeme chcieť aby štetec prechádzal z jednej farby do druhej, použijeme dve stopky, ak budeme ešte chcieť medzifarba, pridáme ďalšie stopku. Pozícia týchto farieb nám určuje Offset, ak teda napríklad budeme chcieť aby naše medzifarba nebola uprostred, ale hneď vedľa inej farby, zmeníme ju offset. Offset nám teda udáva kde sa farba bude nachádzať, opäť máme hodnotu od 0 do 1, ale tu už nemáme súradnice X, Y ale len jedno číslo, to preto že smer farby nám určuje StartPoint a Endpoint, offset je vlastne len percentuálny vzdialenosť medzi týmito body.

(Snáď ste to pochopili aspoň z obrázku)

Ďalšou možnosťou použitia lineárneho štetce je cez C# kód. Tu už to však nebudem vysvetľovať, jenom vám ukážem ako to bude vyzerať. Vlastnosti sa tu určujú rovnaké ako 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 štetec je takmer totožný s lineárnym štetcom, tu sa nám však nevykresľuje v rovine, ale v elipsách. Štetec má však oproti lineárnym niektoré vlastnosti navyše alebo iné, ale môžeme použiť rovnaké GradientStops ako u Lineárneho. Ukážeme si jeho použitie v XAML:

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

To je ten najjednoduchší spôsob. Ďalej by sme si mohli do tagu RadialGradientBrush pridať vlastnosti ako napríklad stred elipsy (GradientOrigin), rádiusy, alebo transformáciu elíps v určitom smere (Center). To už si ale môžete vyskúšať sami. Ešte si ukážeme použitie radiálneho štetce v C# kóde.

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

Rozhodne najzaujímavejšie štetec. Tento štetec vykresľuje totiž obrázok. Obrázok si môžeme určiť pomocou kódu, mať ho v zložke s programom alebo zabudovaný v programe pomocou súboru Resources. V XAML si obrázok priradíme pomocou vlastnosti ImageSource v položke Properties, kde si vyberieme priamo súbor.

Ukážka XAML kódu ImageBrushe

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

Keď však chceme nahrať obrázok v C# kóde, máme dve možnosti.
Prvá je použitie priamo cesty k súboru

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;

Tu je použitý obrázok priamo v priečinku s programom. Druhá možnosť je načítanie pomocou streamu z Resources súboru.

K tomu budeme potrebovať metódu:

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;
    }
}

Tu už je použitie úplne jednoduché, stačí zavolať kód:

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

Tu je obrázok aplikácie používajúce vyššie uvedené štetca:

To by bolo odo mňa ku štetcom všetko. Ak budete mať otázku tam mi môžete napísať PM, alebo sa spýtajte v poznámkach. Zdrojové kódy priložené.