Při tvorbě jakýchkoli aplikací narazíte čas od času na problém, že zobrazení určitých komponent či grafického prvku je známo až za běhu aplikace. V praxi tato situace může například nastat, když tvoříte anketu a máte otázku: Kouříte? Jako odpověď máte dva RadioButtony a po zvolení „Ano“ bude chtít zobrazit textové pole s popiskem: Jakou značku cigaret?

Pokud chcete vytvořit v Silverlightu jakoukoli komponentu, máte dvě možnosti. První možností je definování v XAMLu a druhou definování v kódu aplikace (Visual Basic, C#). Pokud se podíváme do knihovny MSDN na jakoukoli komponentu (např. CheckBox ), vždy nalezneme ukázku jak komponentu vytvořit v obou případech.

Jak na to?

Pojďme si na jednoduchém příkladu ukázat, jakou strukturu má zápis komponenty v C#. Vytvoříme si CheckBox, který bychom jinak zapsali v XAMLu následovně:

<CheckBox x:Name="cb"
          Content="Označ mě!"
          FontFamily="Times New Roman"
          FontSize="14"/> 

Kód v C# bude vypadat takto:

CheckBox cb = new CheckBox();
cb.Content = "Označ mě!";
cb.FontFamily = new FontFamily("Times New Roman");
cb.FontSize = 14; 

Struktura zápisu je jednoduchá. Nejprve vytvoříme instanci třídy CheckBox a následně definujeme její atributy. Je nutné dávat pozor na typy atributů, jelikož některé z nich jsou definované pomocí jiného objektu nebo výčtu (enumeration). V ukázce je to vidět například u definice fontu. Dále se s tím setkáte například u definice barvy ( Colors.Orange) nebo u definování stylu písma ( FontStyles.Italic).

Zařazení

Dalším krokem při definování komponent je jejich zařazení. Když tvoříte komponentu v XAMLu a chcete aby byla zařazena v nějaké tabulce, Canvasu nebo StackPanelu, vytvoříte jí prostě uvnitř daného prvku.

Pokud však tvoříte komponenty z logiky musíte nějak říci dané komponentě do jakého „kontejneru“ patří. To uděláme pomocí zápisu:

LayoutRoot.Children.Add(cb); 

Definování cizích (nevlastních) atributů

Stejně tak jako v XAMLu definujeme například zařazení do tabulky pomocí atributů GridRow a GridColumn přímo v těle komponenty, musíme i v C# tyto atributy definovat. Zápis se trochu liší, jelikož atributy GridRow a GridColumn nejsou vlastními atributy komponenty. Definujeme je tedy pomocí metody SetValue() .

XAML:

<CheckBox x:Name="cb"
          Content="Označ mě!"
          FontFamily="Times New Roman"
          FontSize="14"
          Grid.Column="1"
          Grid.Row="1"/> 

C#:

CheckBox cb = new CheckBox();
cb.Content = "Označ mě!";
cb.FontFamily = new FontFamily("Times New Roman");
cb.FontSize = 16;
cb.FontStyle = FontStyles.Italic;
cb.SetValue(Grid.RowProperty, 1);
cb.SetValue(Grid.ColumnProperty, 1); 

Podobně by to vypadalo i v případě Canvasu:

CheckBox cb = new CheckBox();
cb.Content = "Označ mě!";
cb.FontFamily = new FontFamily("Times New Roman");
cb.FontSize = 16;
cb.FontStyle = FontStyles.Italic;
cb.SetValue(Canvas.TopProperty, 10);
cb.SetValue(Canvas.LeftProperty, 10); 

Příklad

Pokud budeme chtít, můžeme si dynamicky vytvořit i celý formulář společně s tabulkou, kterou použijeme pro rozložení formuláře:

//tabulka
Grid gr = new Grid();
gr.Height = 300;
gr.Width = 600;

//definice radku
RowDefinition rd1 = new RowDefinition();
rd1.Height = new GridLength(30);

RowDefinition rd2 = new RowDefinition();
rd2.Height = new GridLength(30);

//prirazeni definice
gr.RowDefinitions.Add(rd1);
gr.RowDefinitions.Add(rd2);

//definice sloupcu
ColumnDefinition cd1 = new ColumnDefinition();
cd1.Width = new GridLength(100);

ColumnDefinition cd2 = new ColumnDefinition();
cd2.Width = new GridLength(500);

//prirazeni definice
gr.ColumnDefinitions.Add(cd1);
gr.ColumnDefinitions.Add(cd2);

//vutvoreni a vlozeni komponent
//Jmeno
TextBlock tb_jmeno = new TextBlock();
tb_jmeno.Text = "Jméno a Příjmení:";
tb_jmeno.HorizontalAlignment = HorizontalAlignment.Right;
tb_jmeno.SetValue(Grid.ColumnProperty, 0);
tb_jmeno.SetValue(Grid.RowProperty, 0);

TextBox tbx_jmeno = new TextBox();
tbx_jmeno.SetValue(Grid.ColumnProperty, 1);
tbx_jmeno.SetValue(Grid.RowProperty, 0);

//Pohlavi
TextBlock tb_pohlavi = new TextBlock();
tb_pohlavi.Text = "Pohlaví:";
tb_pohlavi.HorizontalAlignment = HorizontalAlignment.Right;
tb_pohlavi.SetValue(Grid.ColumnProperty, 0);
tb_pohlavi.SetValue(Grid.RowProperty, 1);

//vytvoreni StackPanelu pro razeni
StackPanel sp = new StackPanel();
sp.Orientation = Orientation.Horizontal;
sp.SetValue(Grid.ColumnProperty, 1);
sp.SetValue(Grid.RowProperty, 1);

RadioButton rb_muz = new RadioButton();
rb_muz.Content = "muž";
rb_muz.GroupName = "pohlavi";
sp.Children.Add(rb_muz);

RadioButton rb_zena = new RadioButton();
rb_zena.Content = "žena";
rb_zena.GroupName = "pohlavi";
sp.Children.Add(rb_zena);


//prirazeni vsech komponent do tabulky
gr.Children.Add(tb_jmeno);
gr.Children.Add(tbx_jmeno);
gr.Children.Add(tb_pohlavi);
gr.Children.Add(sp); 

Ve zdrojovém kódu si můžeme všimnout způsobu tvorby řádků a sloupců v tabulce. Nejprve si vytvoříme tabulku a následně si vytvoříme objekty definice řádků a sloupců, které následně přiřadíme k tabulce.

Události

Ukázali jsme si, jak dynamicky vytvářet komponenty a jak je vkládat do „kontejnerů“. Ale nastanou i případy, kdy po dané vygenerované komponentě budeme chtít, aby něco vykonávala. Pojďme si to ukázat na jednoduchém příkladu, kdy si vytvoříme v XAMLu tlačítko, při jehož stisknutí se vygeneruje další tlačítko, které na stisknutí vygeneruje text.

XAML:

<StackPanel x:Name="LayoutRoot"
            Background="White"
            Orientation="Vertical">

        <Button x:Name="bt_xaml"
                Content="Vygeneruj tlačítko"
                Width="150"
                Height="25"
                Click="bt_xaml_Click"/>

</StackPanel> 

C#:

private void bt_xaml_Click(object sender, RoutedEventArgs e)
{
            //tlacitko pro vygenerovani textu
            Button bt = new Button();
            bt.Content = "Vygeneruj text";
            bt.Width = 150;
            bt.Height = 25;
            bt.Click += new RoutedEventHandler(bt_Click);
            LayoutRoot.Children.Add(bt);
}

void bt_Click(object sender, RoutedEventArgs e)
{
            TextBlock tb = new TextBlock();
            tb.Text = "Toto je vygenerovaný text.";
            tb.Width = 150;
            tb.TextWrapping = TextWrapping.Wrap;
            tb.FontFamily = new FontFamily("Times New Roman");
            tb.Foreground = new SolidColorBrush(Colors.Orange);
            LayoutRoot.Children.Add(tb);
} 

Principem je přiřazení metody k události na komponentě ( bt.Click += new RoutedEventHandler(bt_Click);).

Závěrem

Pokud budete chtít tvořit aplikace v Silverlightu, této problematice se dozajista nevyhnete. Zvláště pokud se pustíte do tvorby her, kde je podmíněné generování komponent zcela běžné.

Faktem je, že tvorba komponent z logiky aplikace v C# nebo Visual Basicu není tak pohodlná, jako když je píšeme v XAMLu. Je tomu tak především ze dvou důvodů:

• musíme pamatovat na to, jaké atributy jsou jakého typu (jestli jsou objekt, výčet či text)
• musíme každou komponentu přiřazovat do „kontejneru“ namísto přímého vnoření jako v XAMLu

Pokračování přístě

V příštím článku se blíže podíváme na práci s médii, konkrétně pak na práci s videem.

Zdroje

• knihovna MSDN
• Silverlight.net – Learn