1. Díl WPF - Základní rozdíly oproti WF

C# .NET WPF 1. Díl WPF - Základní rozdíly oproti WF

Znovu ahoj, doufám, že jste si přečetli předchozí díl o základním vykreslování WPF. Už tam by měl být vidět velký rozdíl mezi WPF a WF.

Budu zde popisovat kontrolky ve WF a elementy ve WPF. Důvod, proč používám kontrolky a elementy si později také vysvětlíme.

Nejdříve se podíváme na designer. Když se podíváme na Toolbox, tak si můžeme všimnout, že zde jsou podobné elementy jako ve WF. Zdání však klame, tyto elementy mají odlišné vlastnosti než kontrolky ve WF. Mezi důležitě vlastnosti bych zařadil třeba dát každému elementu průhlednost. S tím jsem ztratil spoustu času hledání na Googlu a ne vždy to bylo možné, ve WPF to už možné je.

Podobně jako u WF se nám při změně vlastnosti elementu zapíše změna i do kódu, např. pokud máme originální velikost a nezměníme ji, tak se nám do programu nezapíše. Ale jakmile ji změníme, tak se nám zapíše do programu nová velikost. U WPF se nám zapíše do Xaml kódu kontrolky, takže místo

<TextBlock Name="textBlock1" />

budemem mít

<TextBlock Name="textBlock1" Width="250" Height="100" />

Nyní zpátky k projektu. Vždy doporučuji dát základnímu gridu nějáké jméno, v Xaml kódu to vypadá při prázdném projektu asi takto:

<Window x:Class="_1_Ep_WPF_Designer_BasicControls_Adding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid></Grid>
</Window>

Máme zde jeden grid, který se nám vlastně stará o elementy ve formu. Bez tohoto základního gridu by se nedaly do formu přidávat elementy. Doporučuji si ho přizpůsobit pro pozdější použití v kódu tím, že mu dáme jméno, tzn. upravíme si

<Grid></Grid>

na

<Grid Name="basicGrid"></Grid>

Nyní se již podíváme na nějaké elementy ve WPF.

Elementy WPF

TextBlock

TextBlock je vlastně podobný labelu, ale má oproti němu nějaké výhody. Základní vlastnosti jsou vidět na obrázku.

TextBlock

- V záložce Common je pro nás zatím důležitý pouze Text
- V záložce Layout si můžeme upravovat umístění, velikost, vertikální a horizontální zarovnání, minimální velikost, maximální velikost, apod.
- V záložce Brushes si můžeme upravit barvu popředí (barva textu), pozadí (barva za textem)
- V záložce Text si můžeme přizpůsobit styl písma, jako velikost, font, ...
- V záložce Visibility si můžeme upravit průhlednost elementu a jestli bude viditelný nebo nikoli
- K záložce Transform se dostaneme později
- A nakonec je zde záložka Other. Zde si můžeme upravit ostatní vlastnosti elementu. Můžete si je zkusit, ale podrobně se k nim dostaneme později.

Nyní si některé vlastnosti vysvětlíme trochu podrobněji. Je důležité vědět, že elementy ve WPF již nemají vlastnost Location. Pozice se určuje přes vlastnost Margin, kde máme odsazení zleva, shora, zprava, zespodu. Toto odsazení musíme určit podle toho jaké máme vertikální a horizontální zarovnání (vertical alignment, horizontal alignment). Pokud tedy máme element např. vlevo nahoře, tak nám stačí do margin zapsat odsazení zleva a shora. Do ostatních napíšeme 0, protože by se tím stejně nic nezměnilo. Pokud budeme mít element vpravo dole, tak do Marginu budeme muset napsat odsazení zprava a zespodu, shora a zleva můžeme mít 0.

Avšak naše možnosti nebudou omezeny pouze na WPF elementy. Je tu totiž možnost přidat si i kontrolky z WF tím, že si někam do programu přidáme WindowsFormsHost. Tím se nám možnosti rozšíří na všechny WPF elementy a všechny WF kontrolky.

S ostatními elementy se pracuje podobně jako s již vysvětleným TextBlockem. Spousta vlastností je u všech elementů shodná, je zde sice i pár rozdílných, které závisejí na druhu elementu, ale na to se můžete podívat i sami.

Přidání elementu

Nyní si budeme chtít přidat vlastní element ve chvíli, kdy uživatel klikne na tlačítko. Aby se nám nehromadily na jednom místě, tak si je přidáme do wrap panelu, který nám je bude automaticky zarovnávat.

V designeru si přidáme ScrollViewer a upravíme si ho tak, aby byl jako pravá postranní lišta.

Šířku si nastavíme třeba na 175, a výšku si restujeme.

Scrollview v C# .NET WPF

Tím se nám nastaví automatická výška podle nastaveného marginu a vertical alignmentu.

Další vlastnosti rozložení si nastavíme podle dalšího obrázku.

Scrollview v C# .NET WPF

Horizontální zarovnání je zde vpravo a vertikální je nastavené na roztažení, které se nám díky resetované výšce nastaví na celou výšku gridu. Margin si též resetujeme, takže zde nebude ani žádné odsazení od stran.

Teď si do scrollVieweru můžeme přidat wrapPanel, který si z toolboxu přesuneme přímo do scrollVieweru. Bude to vlastně fungovat tak, že díky scrollVieweru se nám při roztažení wrapPanelu až nad meze výšky scrollVieweru zobrazí posuvník. Tím budeme moci scrollovat wrapPanel nahoru a dolů.

WrapPanel si upravíme tak, aby nám zabíral celou vnitřní velikost scrollieweru. Dosáhneme toho tím, že mu resetujeme velikostní vlastnosti:

Ještě si přidáme jedno tlačítko, které nám bude přidávat elementy do wrapPanelu. Na tlačítko si dvakrát klikneme a přesune nás to rovnou do kódu, kde nám i vytvoří metodu pro stisknutí tlačítka. U této metody zůstaneme a napíšeme si zde přidávání elementu, konkrétně si budeme přidávat TextBlock.

TextBlock tb = new TextBlock();

tb.VerticalAlignment = System.Windows.VerticalAlignment.Top;
tb.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;

Text budeme nastavovat podle počtu elementů v panelu, protože v panelu budeme mít jen tyto textBlocky:

tb.Text = String.Format("TextBlock číslo {0}", wrapPanel1.Children.Count.ToString());

A ještě si přidáme tento textBlock do panelu. Zde vidíme hlavní rozdíl v přidávání elementů ve WPF oproti WF. Zatímco ve WF použijeme kód

this.Controls.Add(tb);

Ve WPF již nemáme kontrolky, ale zastupují je UIElements. Tyto elementy se dají přidávat do gridu nebo různých druhů panelů, ale nemůžeme je již přidat do samotného formu. Přímo do formu můžeme přidat pouze jeden element a tím je již zmiňovaný grid, který jsme si přejmenovali na baseGrid.

WPF již tedy nemá Controls, ale Children. Děti se dají přidávat stejně jako ve WF, tedy použijeme kód:

wrapPanel1.Children.Add(tb);

Nyní si můžeme projekt zkompilovat a když budeme klikat na tlačítko, tak se nám budou přidávat TextBlocky. Po chvíli počet TextBlocků přesáhne výšku okna a zafunguje náš ScrollViewer.

Na obrázku se můžete podívat jak by aplikaci měla na konci vypadat (po pár kliknutí na tlačítko)

Doufám, že jste alespoň něco z tutoriálu pochytili. Pokud budete mít s něčím problém, tak se můžete podívat do zdrojových kódů, které přikládám k tutoriálu.


 

Stáhnout

Staženo 302x (57.47 kB)
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ů) :
3.83.83.83.8 3.8


 


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

 

 

Komentáře
Zobrazit starší komentáře (4)

Avatar
martinsakra
Redaktor
Avatar
martinsakra:

mě hlavní rozdíl mezi tím přišel, že WPF se snaží aby všechny jeho části fungovali stejně(WF label.text, picture.picture) ale WPF má například x.Source ... pokud se nepletu. Přijde mi to jako obrovská výhoda,ale jako noční můra pro všechny kdo přechází ;)

Odpovědět 31.7.2013 18:04
Democracy is two wolves and a lamb voting on what to have for lunch. Liberty is a well-armed lamb contesting the vote.
Avatar
Theodor Johnson
Redaktor
Avatar
Odpovídá na martinsakra
Theodor Johnson:

Když jsem přecházel na WPF tak to pro mě bylo také dost složité, ale časem když jsem si na to zvykl tak je to spíše výhoda, sice občas musím použít google, ale daleko méně než když jsem dělal WF. Používám na to speciální objekt který si už rozumí se spoustou věcí, stačí ho importovat do každého projektu a zkrátím si čas na googlu o min. 90%.

Odpovědět 31.7.2013 19:11
Přecházím na "Cross-Platform Development"
Avatar
Petr Nymsa
Redaktor
Avatar
Odpovídá na Theodor Johnson
Petr Nymsa:

Mě zase obrovská výhoda XAML přijdou Styly a DataBinding. Nevím jak u WF je Binding řešený ale u XAML (WPF,Windows 8) to je hodně mocný nástroj :)

Odpovědět 31.7.2013 21:46
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Theodor Johnson
Redaktor
Avatar
Odpovídá na Petr Nymsa
Theodor Johnson:

Stačí to umět, vědět to dřív tak jsem s WF vůbec neztrácel čas :)

Odpovědět 31.7.2013 21:56
Přecházím na "Cross-Platform Development"
Avatar
jkostur
Člen
Avatar
jkostur:

Zdravim mozno je to trosku off topic ale mam jednu otazocku. Potreboval by som aby si aplikacia pri spusteni nacitala Xaml subor, ktory sa vsak mohol oproti minulemu stavu zmenit. Dajme tomu ze nejake dynamicke nacitanie Xaml pri spusteni. Bodol by nejaky priklad. Google sice poradil nejake priklady ale nefungovali mi. Dik

 
Odpovědět 9.9.2013 18:26
Avatar
Theodor Johnson
Redaktor
Avatar
Odpovídá na jkostur
Theodor Johnson:

Tak s tím ti nedokážu poradit, nikdy mě něco takového nenapadlo. Jedině že by jsi využil http://msdn.microsoft.com/…rovider.aspx , ale je to dost složité pro normálního smrtelníka

Odpovědět 9.9.2013 18:35
Přecházím na "Cross-Platform Development"
Avatar
jkostur
Člen
Avatar
jkostur:

Okej skusim svoju prozbu preformulovat. Potrebujem aplikaciu ktorej layout sa bude dat menit nejakym vlastym editorom. Je nejaky napad ako to spravit? mna napadlo editovat Xaml a nacitat ho pri spusteni.

 
Odpovědět 9.9.2013 18:54
Avatar
Theodor Johnson
Redaktor
Avatar
Theodor Johnson:

Nebo si načítat proměnné, třeba při spuštění se velikost a pozice textBoxu načte třeba ze souboru, teoreticky by šlo udělat i ten xaml přes xml, ale dalo by dost práce nadefinovat všechny elementy, jako že když jméno řádku v xmlku bude TextBox tak to přidá nový textBox a dá mu to vlastnosti podle vlastností řádku v xmlku

Editováno 9.9.2013 19:23
Odpovědět 9.9.2013 19:22
Přecházím na "Cross-Platform Development"
Avatar
vrsek.daniel
Člen
Avatar
vrsek.daniel:

keď ste tu tak vášnivo rozoberali to prechádzanie z WF na WPF oplatí sa mi aj pozerať WF ? :D

 
Odpovědět 26.1.2014 16:10
Avatar
Theodor Johnson
Redaktor
Avatar
Odpovídá na vrsek.daniel
Theodor Johnson:

Myslím že to už nemá cenu, akorát by ti v tom nastal zmatek

Odpovědět 26.1.2014 19:03
Přecházím na "Cross-Platform Development"
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.

Zobrazeno 10 zpráv z 14. Zobrazit vše