Dvourozměrné pole - WPF

V úvodu začněme nejprve popisem vytvářeného XAML kódu v první řádce základní mřížky formuláře. Tato řádka bude obsahovat objekty, které slouží k nastavení atributů dvourozměrného pole - matice. Prvním vloženým objektem seskupujícím jednotlivé objekty je GroupBox. Do záhlaví (vlastnost Header) tohoto objektu vložíme text "Nastavení matice".  Do objektu vložíme další mřížku, která nám rozdělí prostor na dva řádky (rozměry se budou přizpůsobovat vloženému obsahu). Do prvního řádku vložíme vložíme zvětšený (FontSize) tučný (FontWeight) vystředěný (HorizontalAlignment) popisek "Matice" (Label), který bude uživatelem vnímám jako nadpis celého formuláře. Pod tento popisek vložíme další mřížku, která nám rozdělí zbývající prostor na čtyři sloupce, do nichž umístíme sekce pro specifikaci rozměru matice, meze intervalu hodnot prvků matice a prvku matice, který je definován konkrétní pozicí, tj. indexem řádku a sloupce - viz Kód 1. V kódu budeme dále doplňovat pod komentáře zbývající části XAML kódu jednotlivých objektů formuláře.

<!-- Nastavení matice -->
<GroupBox Header="Nastavení matice">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Content="Matice" FontSize="18" FontWeight="Bold" HorizontalAlignment="Center" />
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <!-- Rozměry matice -->

            <!-- Hodnoty - meze -->
                    
            <!-- Prvek v matici -->

        </Grid>
    </Grid>
</GroupBox>

Kód 1: GroupBox - nastavení matice (dvourozměrného pole)

Pod komentář Rozměry matice vložíme do prvního sloupce mřížky objekt GroupBox se záhlavím "Rozměry matice". 

Do tohoto objektu vložíme další mřížku se dvěma řádky a dvěma sloupci, jejichž výšky a šířky se budou automaticky přizpůsobovat vloženému obsahu. Do prvního řádku a prvního sloupce umístíme popisek (Label) s textem "Počet řádků".  U tohoto objektu nastavíme vertikální zarovnání na střed (vlastnost VerticalAlignment). Do druhého sloupce ve stejném řádku vložíme vstupní pole (TextBox), ve kterém bude uživatel specifikovat počet řádků matice. U tohoto objektu TextBox nastavíme vnitřní okraje (vlastnost Padding), vnější okraje (vlastnost Margin) na 5 pixelů a šířku (Width) na 100 pixelů.  

Stejně budeme postupovat i v případu druhého řádku (Grid.Row="1"), kde bude specifikován vertikální rozměr matice, tj. do prvního sloupce druhého řádku umístíme popisek (Label) s textem "Počet sloupců" a do druhého sloupce (Grid.Column="1") umístíme vstupní pole (TextBox) pro specifikaci počtu sloupců. Pro oba objekty typu TextBox vygenerujeme obsluhu události při opuštění tohoto objektu (událost LostFocus) pomocí nastavení vlastnosti LostFocus a zvolení položky <New Event Handler> - viz Kód 2.

<!-- Rozměry matice -->
<GroupBox Header="Rozměry matice">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label Content="Počet řádků:" VerticalAlignment="Center"/>
        <TextBox Name="TxtPocetRadku" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                 LostFocus="TxtPocetRadku_LostFocus"/>
        <Label Content="Počet sloupců:" Grid.Row="1" VerticalAlignment="Center"/>
        <TextBox Name="TxtPocetSloupcu" Grid.Row="1" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                 LostFocus="TxtPocetSloupcu_LostFocus"/>
    </Grid>
</GroupBox>

Kód 2: GroupBox - rozměr matice

Pod komentář Hodnoty - meze vložíme do druhého sloupce mřížky znovu objekt GroupBox, nyní však se záhlavím "Hodnoty - meze". Do tohoto objektu vložíme Grid, který rozdělíme na 2 řádky a 2 sloupce. Do prvního řádku prvního sloupce této mřížky umístíme popisek (Label) "Minimum:". Tento popisek je popiskem pro vstupní pole (TextBox), kde uživatel specifikuje dolní mez hodnot prvků matice. Toto vstupní pole umístíme do druhého sloupce prvního řádku této mřížky (Grid.Column). Stejným způsobem vyřešíme zadávání horní meze prvků matice v dalším řádku (Grid.Row), kde objekty typu Label a TextBox umístíme do prvního a druhého sloupce (Grid.Column) následujícího druhého řádku této mřížky. U těchto objektů nastavíme jejich další vlastnosti - viz Kód 3. U obou  objektů typu TextBox vygenerujeme obsluhu události při opuštění tohoto objektu (událost LostFocus) pomocí nastavení vlastnosti LostFocus a zvolení položky <New Event Handler> .

<!-- Hodnoty - meze -->
<GroupBox Header="Hodnoty - meze" Grid.Column="1">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label Content="Minimum:" VerticalAlignment="Center"/>
        <TextBox Name="TxtMinHodnota" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                 LostFocus="TxtMinHodnota_LostFocus"/>
        <Label Content="Maximum:" Grid.Row="1" VerticalAlignment="Center"/>
        <TextBox Name="TxtMaxHodnota" Grid.Row="1" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                 LostFocus="TxtMaxHodnota_LostFocus"/>
    </Grid>
</GroupBox>

Kód 3: GroupBox - hodnoty mezí intervalu přípustných hodnot prvků matice

Další sloupec mřížky v první řádku formuláře necháme volný. Tento prostor bude vyplňovat zbývající místo při roztáhnutí, nebo zmenšení formuláře. 

Do posledního sloupce mřížky, tj. pod komentář Prvek v matice umístíme GroupBox pro plnění matice po jednotlivých prvcích. V tomto GroupBox opět využijeme rozdělení prostoru na 2 řádky a 4 sloupce pomocí další vložené mřížky (Grid).  

Do prvního řádku a prvního sloupce této mřížky umístíme popisek (Label) s textem "Index řádku:". Do dalšího sloupce ve stejném řádku umístíme vstupní pole (TextBox) pro specifikaci indexu řádku, kde se bude prvek v matici nacházet. Šířka tohoto TextBox a i všech dalších objektů typu TextBox, umístěných v této sekci, bude nastavena na fixní hodnotou 100 pixelů (vlastnost Width) a vnitřní okraje (vlastnost Padding) a vnější okraje (vlastnost Margin) budou nastaveny na 5 pixelů.

Do dalšího řádku (Grid.Row = "1") prvního sloupce (Grid.Column="0") vložíme popisek (Label) s textem "Index sloupce:". Do dalšího sloupce ve stejném řádku umístíme vstupní pole (TextBox) pro specifikaci indexu sloupce prvku matice.

Do prvního řádku řádku třetího sloupce této mřížky umístíme popisek (Label) s textem "Hodnota:". Do dalšího sloupce ve stejném řádku umístíme vstupní pole (TextBox) o fixní délce pro specifikaci hodnoty prvku na pozici reprezentovanou pomocí indexů, které uživatel zadal ve druhém sloupci mřížky. Pro všechny objekty typu TextBox vygenerujeme obsluhu události při opuštění tohoto objektu (událost LostFocus) pomocí nastavení vlastnosti LostFocus a zvolení položky <New Event Handler> - viz Kód 4. 

<!-- Prvek v matici -->
<GroupBox Header="Prvek v matici" Grid.Column="3">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label Content="Index řádku:" Grid.Row="0" Grid.Column="0"/>
        <TextBox Name="TxtPrvekIndexRadku" Grid.Row="0" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                    LostFocus="TxtPrvekIndexRadku_LostFocus"/>
        <Label Content="Index sloupce:" Grid.Row = "1" Grid.Column="0"/>
        <TextBox Name="TxtPrvekIndexSloupce" Grid.Row="1" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                    LostFocus="TxtPrvekIndexSloupce_LostFocus"/>
        <Label Content="Hodnota:" Grid.Row="0" Grid.Column="2"/>
        <TextBox Name="TxtHodnota" Grid.Row="0" Grid.Column="3" Width="100" Margin="5" Padding="5" 
                    LostFocus="TxtHodnota_LostFocus"/>
    </Grid>
</GroupBox>

Kód 4: GroupBox - prvek v matici

Formulář

Navržené rozložení prvků v prvním řádku základní mřížky na formuláři v této části etapy, je vidět na následujícím obrázku - viz Obrázek 1.

Obrázek 1: Rozpracovaný formulář WPF aplikace - první řádek základní mřížky

Objekty na formuláři:

Formulář v prvním řádku základní mřížky formuláře obsahuje následující objekty (kontrolky):

• Grid (5x)
• GroupBox (4x)
• Label (8x)
• TextBox: TxtPocetRadku, TxtPocetSloupcu, TxtMinHodnota, TxtMaxHodnota, TxtPrvekIndexRadku, TxtPrvekIndexSloupce, TxtHodnota

které jsou umístěny následujícím způsobem - viz Obrázek 2.

Obrázek 2: VS - okno Document Outline - seznam objektů - první řádek základní mřížky