⚠️ 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:
