Jednorozměrné pole - WPF

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ů jednorozměrného pole - vektoru. Prvním vloženým objektem seskupujícím jednotlivé objekty je GroupBox. Do záhlaví (vlastnost Header) tohoto objektu vložíme text "Nastavení vektoru".  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 "Vektor" (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 vektoru, meze intervalu hodnot prvků vektoru a prvku vektoru, který je definován svým indexem - 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í vektoru -->
<GroupBox Header="Nastavení vektoru">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Label Content="Vektor" 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ěr vektoru -->
                  
                <!-- Hodnoty - meze -->
                    
                <!-- Prvek ve vektoru -->
                    
        </Grid>
    </Grid>
</GroupBox>

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

Pod komentář Rozměr vektoru vložíme do prvního sloupce mřížky objekt GroupBox se záhlavím "Rozměr vektoru". Do tohoto objektu vložíme WrapPanel pro umístění objektů vedle sebe. Těmito objekty budou popisek (Label) a vstupní pole (TextBox) pro zadání rozměru vektoru, tj. počtu prvků vektoru. U objektu typu Label nastavíme vertikální zarovnání na střed (vlastnost VerticalAlignment). U objektu TextBox nastavíme vnitřní okraje (vlastnost Padding), vnější okraje (vlastnost Margin) a šířku (Width) na 100 pixelů. Pro objekt 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ěr vektoru -->
<GroupBox Header="Rozměr vektoru">
    <WrapPanel>
        <Label Content="Počet prvků:" VerticalAlignment="Center"/>
        <TextBox Name="TxtPocetPrvku" Grid.Column="1" Width="100" Margin="5" Padding="5" 
                 LostFocus="TxtPocetPrvku_LostFocus"/>
    </WrapPanel>
</GroupBox>

Kód 2: GroupBox - rozměr vektoru

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ů vektoru. 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ů vektoru 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ů vektoru

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 ve vektoru,  umístíme GroupBox pro plnění vektoru po jednotlivých prvcích. V tomto GroupBox opět využijeme rozdělení prostoru na 2 řádky a 2 sloupce pomocí další vložené mřížky (Grid). Do prvního řádku a prvního sloupce mřížky umístíme popisek (Label) s textem "Index:". Do dalšího sloupce ve stejném řádku umístíme vstupní pole (TextBox) pro specifikaci indexu prvku, jehož šířka bude nastavena fixní hodnotou (Width). Pro objekt 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> .

Do dalšího řádku první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 s indexem, který uživatel zadal v horním řádku této mřížky - viz Kód 4. 

<!-- Prvek ve vektoru -->
<GroupBox Header="Prvek ve vektoru" Grid.Column="3">
    <Grid  Margin="5">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label Content="Index:" Grid.Column="0"/>
        <TextBox Name="TxtPrvekIndex" Grid.Column="1" Width="100" LostFocus="TxtPrvekIndex_LostFocus"/>
        <Label Content="Hodnota:" Grid.Row="1" Grid.Column="0"/>
        <TextBox Name="TxtHodnota" Grid.Row="1" Grid.Column="1" Width="100" LostFocus="TxtHodnota_LostFocus"/>
    </Grid>
</GroupBox>

Kód 4: GroupBox - prvek ve vektoru

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 (4x)
• GroupBox (4x)
• Label (6x)
• WrapPanel 
• TextBox: TxtPocetPrvku, TxtMinHodnota, TxtMaxHodnota, TxtPrvekIndex, 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