WPF seriál 16. díl – Items Controls – Menu, StatusBar, ToolBar

Poslední články

WPF seriál 16. díl – Items Controls – Menu, StatusBar, ToolBar

Header – text pro zobrazení (pokud použijeme podtržítko tak bude položka v menu přístupná pomocí klávesové zkratky ALT + písmeno, které je před podtržítkem, např. _File bude dostupné přes klávesovou zkratku ALT + F)
Command – k položce menu lze snadno přiřadit jakýkoliv command (např. ApplicationCommands.Copy)
Icon – ikonka, která je zobrazená na levé straně. Pokud je ovšem nastavena vlastnost IsChecked na true, tak není ikona zobrazena
IsChecked – na levo je zobrazena ikona zatržení. Pokud je true a zároveň je nastavená i ikona, tak není zobrazená
IsCheckable – pokud je nastaveno na true, lze změnit styl chování konkrétní položky menu na checkbox (při prvním kliknutí se zaškrtne a při dalším odškrtne)
IsEnabled – indikátor stavu, zda je položka povolena či zakázána

V následující ukázce si ukážeme, jak lze použít menu. U nastavení ikony se setkáme se zápisem pack://application… , ale toho si zatím nevšímejme, budeme se tomu věnovat později.

XAML

<Window x:Class="ItemsControlsEnd.MenuWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MenuWindow" Height="300" Width="300">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_New..." IsEnabled="False"/>
                <MenuItem Header="_Open..." IsCheckable="True"/>
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Command="ApplicationCommands.Copy">
                    <MenuItem.Icon>
                        <Image Source="pack://application:,,,/Images/copy.ico"/>
                    </MenuItem.Icon>
                </MenuItem>
                <MenuItem Command="ApplicationCommands.Cut"/>
                <MenuItem Command="ApplicationCommands.Paste"/>
            </MenuItem>
        </Menu>
    </DockPanel>
</Window>

Poznámka: Pokud nastavíme Command u objektu MenuItem, automaticky se do vlastnosti Header nastaví název commandu např. při použití ApplicationCommands.Copy bude vlastnost Header nastavená na Copy

Kromě klasického menu budeme hojně využívat i kontextové menu. Kontextové menu se vytváří velice jednoduše.Nejdříve do hlavního elementu např.RichTextBox přidáme element ContextMenu do kterého pak vložíme jednotlivé elementy MenuItem stejně jako do klasického Menu:

XAML

<RichTextBox x:Name="ui_txt">
     <RichTextBox.ContextMenu>
         <ContextMenu>
             <MenuItem Command="ApplicationCommands.Copy">
                 <MenuItem.Icon>
                    <Image Source="pack://application:,,,/Images/copy.ico"/>
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Command="ApplicationCommands.Cut"/>
            <MenuItem Command="ApplicationCommands.Paste"/>
        </ContextMenu>
    </RichTextBox.ContextMenu>
</RichTextBox>

Toolbar

Jedná se o kontejner, který umí hostovat objekty typu button, checkbox, radiobutton, atd. a může nám být velice nápomocný při tvorbě standardního menu. Toolbar můžeme vložit kdekoliv, ale nejčastěji se vkládá do objektu typou ToolbarTray. Než si ukážeme ukázku použití Toolbaru podíváme se na jednu zajímavou vlastnost:

OverflowMode

Always – prvek je vždy zobrazen v „overflow menu“, které je znázorněno malou šipkou v pravém dolním rohu toolbaru
AsNeeded – prvek se přesune do „overflow menu“ pouze v případě, že je to potřeba (Defaultní hodnota)
Never – prvek není nikdy přesunut do „overflow menu“

XAML

<Window x:Class="ItemsControlsEnd.ToolBarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolBarWindow" Height="300" Width="300">
<DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <TextBox Width="100"/>
            <Button ToolBar.OverflowMode="Always">
                <Image Source="pack://application:,,,/Images/copy.ico" Width="16" Height="16"/>
            </Button>
            <Separator/>
            <ToggleButton>
                <Image Source="pack://application:,,,/Images/left.png" Width="16" Height="16"/>
            </ToggleButton>
            <ToggleButton>
                <Image Source="pack://application:,,,/Images/center.png" Width="16" Height="16"/>
            </ToggleButton>
            <ToggleButton ToolBar.OverflowMode="Never">
                <Image Source="pack://application:,,,/Images/right.png" Width="16" Height="16"/>
            </ToggleButton>
        </ToolBar>
        <RichTextBox x:Name="txt"/>
    </DockPanel>
</Window>

Jakmile spustíme aplikaci, tak při zmenšení šířky okna uvidíme, že pravá ikonka right.png zůstane pořád vidět (OverflowMenu.Never), ale ostatní se vloží do „overflow menu“ pokud bude velikost okna menší než velikost toolbaru. Dále můžeme vidět jak funguje vlastnost OverflowMode.Always, protože hned po startu aplikace je ikonka pro kopírování zobrazena v „overflow menu“.

ToolbarTray

Jedná se o kontejner do kterého lze vkládat objekty typu Toolbar. Pojďme se podívat na některé vlastnosti:

Toolbars – kolekce, která obsahuje jednotlivé Toolbary
IsLocked – je-li true, nelze toolbary přemisťovat, v opačném případě si můžeme toolbary přemisťovat
Orientation – lze nastavit orientaci na horizontální nebo vertikální

Ukázka pomocí kódu

public class ToolbarTrayWindow : Window
{
    public ToolbarTrayWindow()
    {
        StackPanel stackPanel = new StackPanel();
        Content = stackPanel;

        // vytvorim objekt toolbartray
        ToolBarTray toolBarTray = new ToolBarTray();
        // nastavim orientaci
        toolBarTray.Orientation = Orientation.Horizontal;
        // pokud je IsLocked true, nelze premistovat jedntlive toolbary
        toolBarTray.IsLocked = false;
        // vytvorim si toolbar a vlozim ho do kolekce Toolbars
        toolBarTray.ToolBars.Add(CreateToolbar());
        toolBarTray.ToolBars.Add(CreateToolbar());
        // nakonec vlozim ToolbarTray do stack panelu
        stackPanel.Children.Add(toolBarTray);
    }

    public static ToolBar CreateToolbar()
    {
        ToolBar toolBar = new ToolBar();
        // vlozim textbox
        TextBox txt = new TextBox();
        txt.Width = 100;
        toolBar.Items.Add(txt);

        // vlozim tlacitko
        Button btnCopy = new Button();
        Image img = new Image();
        img.Source = new BitmapImage(new Uri("pack://application:,,,/Images/copy.ico"));
        img.Width = 16;
        img.Height = 16;
        btnCopy.Content = img;
        btnCopy.SetValue(ToolBar.OverflowModeProperty, OverflowMode.Always);
        toolBar.Items.Add(btnCopy);

        // oddelovac
        Separator spr = new Separator();
        toolBar.Items.Add(spr);

        // a dalsi 3 tlacitka
        string[] str = { "left", "center", "right" };
        for ( int i = 0; i < 3; i++ )
        {
            ToggleButton btn = new ToggleButton();
            // jako obsah tlacitka nastavim konkretni ikonku
            Image image = new Image();
            image.Source = new BitmapImage(new Uri(string.Format("pack://application:,,,/Images/{0}.png", str[i])));
            image.Width = 16;
            image.Height = 16;
            btn.Content = image;
            if ( i == 2 )
                btn.SetValue(ToolBar.OverflowModeProperty, OverflowMode.Never);
            // vlozim do toolbaru
            toolBar.Items.Add(btn);
        }
        return toolBar;
    }
}

StatusBar

StatusBar je velice podobný ToolBaru, akorát se většinou používá spíše pro zobrazování nějakých informací, např. u wordu se jedná o spodní řádek, na kterém jsou informace typu, stránka 1 z 1, slova: 433, čeština, atd.

XAML

<Window x:Class="ItemsControlsEnd.StatusBarWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StatusBarWindow" Height="300" Width="300">
    <DockPanel>
        <StatusBar DockPanel.Dock="Bottom">
            <Label>Stranka 1 z 1</Label>
            <Separator/>
            <Label>Slova: 400</Label>
        </StatusBar>
        <RichTextBox x:Name="txt"/>
    </DockPanel>
</Window>