Povrch a objem koule

Vzhledem k tomu, že jsme již pomocí technologie WPF vytvořili základní aplikace,  můžeme se nyní podívat na další vlastnost týkající se formuláře. U formuláře (okna) kontrolka typu Window lze nastavit následující vlastnosti: 

• MinWidth - šířka okna, na kterou lze okno zmenšit
• MinHeight - výška okna, na kterou lze okno zmenšit

Novým prvkem, který použijeme je prvek typu GroupBox, který bude sloužit pro vizuální seskupení ovládacích prvků. U tohoto prvku lze nastavit vlastnost:

• Header - titulek v záhlaví prvku GroupBox

Pro vložení tlačítek za sebe použijeme ve formuláři prvek typu WrapPanel, kde nastavíme horizontální zarovnání tohoto prvku vůči okraji okna na střed - vlastnost HorizontalAlignment. Tím zajistíme, že pokud budeme roztahovat okno na šířku, skupina tlačítek zůstává vystředěná vůči oknu. Výhodou použití XAML je, že při zmenšování šířky okna (definovali jsme jeho minimální šířku) se tlačítka automaticky přesunou podle šířky okna, aniž bychom museli vytvářet složitý kód pro jejich umístění na formuláři při změně velikosti okna. Pokud u již zmenšeného okna na šířku, budeme zmenšovat ještě jeho výšku, některá tlačítka zmizí, proto je vhodné stanovit minimální rozměry okna.

Do dalšího WrapPanel umístíme tlačítko, které ukončí aplikaci. Tento panel bude zarovnán doprava. 

U tlačítek jsme záměrně nedefinovali jejich šířku, tzn. že jejich šířka se přizpůsobí délce vloženého textu (popisku - vlastnost Content).  Pokud chcete vložit do popisku tlačítka vložit novou řádku, můžete vložit do textu např. 
 Možností, jak zařádkovat, je více.

<Window x:Class="PovrchObjemKouleWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PovrchObjemKouleWPF"
        mc:Ignorable="d"
        Title="Povrch a objem koule" Height="250" Width="700" MinWidth="500" MinHeight="200">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
 
        <GroupBox Header="Specifikace" Grid.Row="0" Margin="10,20">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="3*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="4*"/>
                </Grid.ColumnDefinitions>
                <Label Content="Poloměr koule:" Grid.Row="0" Grid.Column="0" Margin="5" />
                <TextBox Name="TxtPolomer" Grid.Row="0" Grid.Column="1" VerticalContentAlignment="Center" Margin="5" TextWrapping="Wrap" Grid.ColumnSpan="2" />
 
                <Label Content="Povrch koule:" Grid.Row="0" Grid.Column="4" Margin="5" />
                <TextBox Name="TxtPovrch" Grid.Row="0" Grid.Column="5" IsReadOnly="True" Background="AliceBlue" Margin="5"/>
 
                <Label Content="Objem koule:" Grid.Row="1" Grid.Column="4" Margin="5" />
                <TextBox Name="TxtObjem" Grid.Row="1" Grid.Column="5" IsReadOnly="True" Background="AliceBlue" Margin="5"/>
            </Grid>
        </GroupBox>
        <StackPanel Grid.Row="2">
            <WrapPanel HorizontalAlignment="Center">
                <Button Name="BtnMetoda" Content="Metoda" Margin="5" />
                <Button Name="BtnMetodaNavrat" Content="Metoda - návrat" Margin="5" />
                <Button Name="BtnMetodaVyraz" Content="Metoda - výraz" Margin="5" />
                <Button Name="BtnMetodaParametry" Content="Metoda - výstupní parametr" Margin="5" />
                <Button Name="BtnMetoda2Navraty" Content="Metoda - 2 návraty" Margin="5" />
                <Button Name="BtnMetodaReference" Content="Metoda - reference" Margin="5" />
            </WrapPanel>
            <WrapPanel HorizontalAlignment="Right" >
                <Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" />
            </WrapPanel>
        </StackPanel>
    </Grid>
</Window>

Kód 1: Základní rozvržení prvků na formuláři

Zaměřme se nyní na prvek TxtPolomer. U tohoto prvku budeme specifikovat dvě události: 

• GotFocus - událost, která nastane při zacílení objektu (přepnutí se na objekt pomocí kurzoru myši, nebo klávesnice)
• LostFocus - událost, která nastane při opuštění objektu 

Obě obsluhy událostí vygenerujeme pomocí položky <New Event Handler> v nabízeném seznamu od IntelliSense (našeptávač Visual Studia). XAML kód prvku TxtPolomer bude vypadat následovně - viz Kód 2.

<TextBox Name="TxtPolomer" Grid.Row="0" Grid.Column="1" VerticalContentAlignment="Center" Margin="5" TextWrapping="Wrap" Grid.ColumnSpan="2" GotFocus="TxtPolomer_GotFocus" LostFocus="TxtPolomer_LostFocus"/>

Kód 2: Definice obsluhy událostí GotFocus a LostFocus u prvku TxtPolomer

Dále musíme vygenerovat obsluhu události Click u všech tlačítek ve třetím řádku Grid na formuláři - viz Kód 3. Po specifikaci události u tlačítka je rychlejší postup pro vygenerování obsluhy, mačkat klávesu Tab. 

<Button Name="BtnMetoda" Content="Metoda" Margin="5" Click="BtnMetoda_Click"/>
<Button Name="BtnMetodaNavrat" Content="Metoda - návrat" Margin="5" Click="BtnMetodaNavrat_Click"/>
<Button Name="BtnMetodaVyraz" Content="Metoda - výraz" Margin="5" Click="BtnMetodaVyraz_Click" />
<Button Name="BtnMetodaParametry" Content="Metoda - výstupní parametr" Margin="5" Click="BtnMetodaParametry_Click"/>
<Button Name="BtnMetoda2Navraty" Content="Metoda - 2 návraty" Margin="5" Click="BtnMetoda2Navraty_Click"/>
<Button Name="BtnMetodaReference" Content="Metoda - reference" Margin="5" Click="BtnMetodaReference_Click"/>

Kód 3: Generování obsluhy události Click u tlačítek BtnMetoda, BtnMetodaNavrat, BtnMetodaVyraz, BtnMetodaParametry

Stejným postup vygenerujeme obsluhu události pro tlačítko BtnKonec - viz Kód 4.

<Button Name="BtnKonec" Content="Konec" Margin="5" Width="80" Click="BtnKonec_Click"/>