Jak na základní rozložení ve WPF stejně jako ve Windows Forms

⚠️ Pozor: obrázky z tohoto příspěvku se ztratily při výpadku v roce 2016. Chybějící obrázky nahradí automaticky vtipným placeholderem plugin Broken Image Placeholder.

Vždycky jak jsem začínal aplikaci ve Windows Forms(WF), tak jsem tam prvně vložil prvky v následujícím sledu:

ToolBar – rozbalovací vnořovací nabídka, která obvykle obsahuje nejvíc funkcí programu
ToolStrip – tlačítka v řadě za sebou, které se nejčastěji využívají
StatusStrip – informace o stavu aplikace

Toto bylo ve WF primitivní. Prostě jste je jen přidali kliknutím v ToolBoxu, pak klikali na ně a přidali do nich tolik položek, kolik jste jen potřebovali, ke kterým jste pak napsali odpovídající handlery. Ve WPF je celé toto složitější.
Největší podobnost s ToolBar má prvek zvaný Menu. Deklaruje se asi nějak takto:

XML

<!--V dokumentaci pisou ze IsMainMenu znamena zda ma Menu prijimat aktivacni notifikace. Nevim co to ma znamenat-->
<!--Do Menu nemusite davat ani Grid.Row a Grid.Column pokud je v Gridu - nastavi se samo na 0,0-->
<Menu IsMainMenu="False" Name="mainMenu">
    <!--Libovolne vnorovane polozky MenuItem - ty primo v Menu budou horizontalne dany, zbytek pod nimi vertikalne-->
</Menu>

Druhý z prvků, které zmiňuji výše a který má svůj analogický prvek ve WPF je ToolStrip s jeho analogii v WPF ToolBarTray. Je trošičku těžší než Menu, ale i tak to není žádná hrůza a možná se mi to jen zdá:

XML

<ToolBarTray>
    <!--Band je vertikalni poradi, BandIndex horizontalni-->
    <ToolBar Band="0" BandIndex="0">
        <!--Zde lze pak umistovat jednotlive komponenty-->
    </ToolBar>
</ToolBarTray>

A třetí je StatusBar. Ten je opět jednoduchý jak facka:

XML

<StatusBar>
    <!--Doporucuje se pouzivat v StatusBaru Grid, protoze mu muzete nastavit sloupce na * nebo Auto-->
    <Grid></Grid>
    <!--Zde budou jednotlive prvky StatusBaru-->
</StatusBar>

Celý zdrojový kód naleznete zde:

XML

<Window x:Class="BasicAppLayout.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">
    <Window.Resources>
        <Style TargetType="TextBlock" x:Key="StatusBarTextBlock">
            <Setter Property="TextWrapping" Value="NoWrap" />
            <Setter Property="TextTrimming" Value="CharacterEllipsis" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <!--Optimalni vyska pro Menu je 20-->
            <RowDefinition Height="20"></RowDefinition>
            <!--Optimalni vyska pro ToolBarTray je 27-->
            <RowDefinition Height="27"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="25"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Menu IsMainMenu="True" Name="mainMenu">
            <MenuItem Header="1">
                <MenuItem Header="1-1" Name="miOneOne" Click="miOneOne_Click"></MenuItem>
                <MenuItem Name="outerMenu2" Header="1-2">
                    <!--MenuItem lze libovolne vnorovat do jineho MenuItem-->
                    <MenuItem Header="1-2-1" Name="miOneTwoOne" Click="miOneTwoOne_Click"></MenuItem>
                </MenuItem>
                <MenuItem Header="1-3" Name="miOneThree" Click="miOneThree_Click"></MenuItem>
            </MenuItem>
            <MenuItem Header="2">
                <MenuItem Header="2-1" Name="miTwoOne" Click="miTwoOne_Click"></MenuItem>
            </MenuItem>
        </Menu>
        <ToolBarTray Background="AntiqueWhite" Grid.Column="0" Grid.Row="1">
            <!--Tento ToolBar bude druhy, protoze ma BandIndex="1"-->
            <!--Band je vertikalni poradi, BandIndex horizontalni-->
            <ToolBar Band="0" BandIndex="1">
                <Button>New</Button>
                <Button>Open</Button>
                <Button>Exit</Button>
            </ToolBar>
            <!--Tento ToolBar bude pred prvnim, protoze ma BandIndex="0"-->
            <ToolBar BandIndex="0" Band="0">
                <Image Width="25" Height="25">
                    <Image.Source>
                        <!--Obrazek Undo.png mam v Rootu projektu bez dalsiho nastavovani-->
                        <BitmapImage UriSource="Undo.png"></BitmapImage>
                    </Image.Source>
                </Image>
                <!--Alternativne pokud byste tam chteli mit i text, tak muzete takto, ale upozornuji - ve vychozim stavu to neni moc pekne. Navic cele toto(Image+TextBlock) musite vlozit do StackPanel a pote do Button-->
                <!-- <TextBlock Text="Undo">
            </TextBlock>
            -->
            <Button>Redo</Button>
        </ToolBar>
        <!--Nasleduji ToolBar nepujde videt, protoze radek ma vysku jen 27-->
        <ToolBar Band="1" BandIndex="0">
            <Button>Paint</Button>
            <Button>Editor</Button>
            <Separator></Separator>
            <Button>Cut</Button>
            <Button>Copy</Button>
            <Button>Paste</Button>
            <Separator></Separator>
            <Button>Find</Button>
            <Button>Replace</Button>
        </ToolBar>
    </ToolBarTray>
    <Grid Grid.Row="2" Grid.Column="0" Background="Red"></Grid>
    <WebBrowser Name="wb" Grid.Row="3" Grid.Column="0"></WebBrowser>
    <StatusBar Gri="" d.Row="4" Grid.Column="0" Name="statusBar1">
        <Grid>
            <Grid.ColumnDefinitions>
                <!--Pro polozku 1, diky Auto si vzdycky vezme jen tolik mista kolik potrebuje-->
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <!--Pro progress bar-->
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <!--Pro status-->
                <ColumnDefinition Width="*"></ColumnDefinition>
                <!--Pro chybu-->
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!-- Polozka 1 -->
            <StackPanel Orientation="Horizontal" Grid.Column="0">
                <TextBlock Style="{StaticResource StatusBarTextBlock}">Polozka 1</TextBlock>
            </StackPanel>
            <!-- Progress bar -->
            <StackPanel Orientation="Horizontal" Grid.Column="1">
                <Separator></Separator>
                <ProgressBar IsIndeterminate="False" Padding="5, 0, 0, 0" Width="200" Value="50"></ProgressBar>
            </StackPanel>
            <!-- Polozka pro status -->
            <!--Text v teto polozce (a v polozce pod) muze byt dlouhy, a potrebuje byt orezan kdyby byl prilis dlouhy - na zobrazenem
               konci se zobrazi dve tecky. Dve tecky(Elipsis) jsou nastaveny vlastnosti TextTrimming na CharacterElipsis pro styl StatusBarTextBlock
               Kdybyste nastavili velikost sloupecku na Auto misto *, sloupec by mel povolene rust donekonecna a nebyl by zkracen pro ukor 4. TextBlocku
               -->
            <DockPanel LastChildFill="True" Grid.Column="2">
                <Separator DockPanel.Dock="Left"></Separator>
                <TextBlock Style="{StaticResource StatusBarTextBlock}" ToolTip="Toto je velmi dlouhy text a urcite bude zkracen" Text="Toto je velmi dlouhy text a urcite bude zkracen"></TextBlock>
            </DockPanel>
            <!-- Polozka pro chybu -->
            <DockPanel LastChildFill="True" Grid.Column="3">
                <Separator DockPanel.Dock="Left"></Separator>
                <Image DockPanel.Dock="Left" Margin="2,0" Source="error.gif" Width="16"></Image>
                <TextBlock Style="{StaticResource StatusBarTextBlock}" ToolTip="Vyskytnuvsi se chyba se zobrazi zde v tomto TextBlocku" Text="Vyskytnuvsi se chyba se zobrazi zde v tomto TextBlocku"></TextBlock>
            </DockPanel>
        </Grid>
    </StatusBar>
</Grid>
</Window>

A výsledek pak bude vypadat nějak takto:

Leave a Reply Cancel reply