Jak na zakladni rozlozeni ve WPF stejne jako ve Windows Forms

Vzdycky jak jsem zacinal aplikaci ve Windows Forms(WF), tak jsem tam prvne vlozil prvky v nasledujicim sledu:

ToolBar – rozbalovaci vnorovaci nabidka, ktera obvykle obsahuje nejvic funkci programu
ToolStrip – tlacitka v rade za sebou, ktere se nejcasteji vyuzivaji
StatusStrip – informace o stavu aplikace

Toto bylo ve WF primitivni. Proste jste je jen pridali kliknutim v ToolBoxu, pak klikali na ne a pridali do nich tolik polozek, kolik jste jen potrebovali, ke kterym jste pak napsali odpovidajici handlery. Ve WPF je cele toto slozitejsi.
Nejvetsi podobnost s ToolBar ma prvek zvany Menu. Deklaruje se asi nejak takto:

<!--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>

</Menu>

Druhy z prvku, ktere zminuji vyse a ktery ma svuj analogicky prvek ve WPF je ToolStrip s jeho analogii v WPF ToolBarTray. Je trosicku tezsi nez Menu, ale i tak to neni zadna hruza a mozna se mi to jen zda:

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

</ToolBar>

</ToolBarTray>

A treti je StatusBar. Ten je opet jednoduchy jak facka:

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

</StatusBar>

Cely zdrojovy kod naleznete zde:

<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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<Window.Resources>

</Style>

</Window.Resources>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</MenuItem>

</MenuItem>

</MenuItem>

</Menu>

</ToolBar>

<Image.Source>

</Image.Source>

</Image>

</ToolBar>

<Button>Paint </Button>

<Button>Editor </Button>

<Button>Paste </Button>

<Button>Replace </Button>

</ToolBar>

</ToolBarTray>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Style="{StaticResource StatusBarTextBlock}">Polozka 1 </TextBlock>

</StackPanel>

</StackPanel>

<!--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>

</DockPanel>

</Grid>

</StatusBar>

</Grid>

</Window>

A vysledek pak bude vypadat nejak takto:

Leave a Reply Cancel reply