MenusAndToolBars.xaml

<UserControl x:Class="MaterialDesignDemo.MenusAndToolBars"
             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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
             d:DesignHeight="1080"
             d:DesignWidth="1920"
             mc:Ignorable="d">
  <StackPanel>
    <TextBlock Style="{StaticResource PageTitleTextBlock}" Text="Menus and Toolbars" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Default Menu" />

    <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="menus_1">
      <Menu>
        <MenuItem Header="_File">
          <!--
          You can set the highlighted color with:
          materialDesign:MenuItemAssist.HighlightedBackground="Fuchsia"
          -->
          <MenuItem Header="Save" Icon="{materialDesign:PackIcon Kind=ContentSave}" />

          <MenuItem Header="Save As.." />

          <MenuItem Header="Exit"
                    Icon="{materialDesign:PackIcon Kind=ExitToApp}"
                    InputGestureText="Ctrl+E" />

          <Separator />

          <MenuItem Header="Excellent"
                    IsCheckable="True"
                    IsChecked="True" />

          <MenuItem Header="Rubbish" IsCheckable="True" />

          <MenuItem Header="Dig Deeper" InputGestureText="Ctrl+D">
            <MenuItem Header="Enlightenment?" IsCheckable="True" />
            <MenuItem Header="Disappointment" IsCheckable="True" />
          </MenuItem>

          <MenuItem Header="Look Deeper" InputGestureText="Ctrl+D">
            <MenuItem Header="Plain" />
            <MenuItem Header="Ice Cream" />
          </MenuItem>
        </MenuItem>

        <MenuItem Header="_Edit">
          <MenuItem Command="Cut"
                    Header="_Cut"
                    Icon="{materialDesign:PackIcon Kind=ContentCut}" />

          <MenuItem Command="Copy"
                    Header="_Copy"
                    Icon="{materialDesign:PackIcon Kind=ContentCopy}" />

          <MenuItem Command="Paste"
                    Header="_Paste"
                    Icon="{materialDesign:PackIcon Kind=ContentPaste}" />
        </MenuItem>
      </Menu>
    </smtx:XamlDisplay>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom item margin" />

    <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="menus_1_1">
      <Menu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
        <MenuItem Header="_File">
          <!--
          You can set the highlighted color with:
          materialDesign:MenuItemAssist.HighlightedBackground="Fuchsia"
          -->
          <MenuItem Header="Save" Icon="{materialDesign:PackIcon Kind=ContentSave}" />

          <MenuItem Header="Save As.." />

          <MenuItem Header="Exit"
                    Icon="{materialDesign:PackIcon Kind=ExitToApp}"
                    InputGestureText="Ctrl+E" />

          <Separator />

          <MenuItem Header="Excellent"
                    IsCheckable="True"
                    IsChecked="True" />

          <MenuItem Header="Rubbish" IsCheckable="True" />

          <MenuItem Header="Dig Deeper" InputGestureText="Ctrl+D">
            <MenuItem Header="Enlightenment?" IsCheckable="True" />
            <MenuItem Header="Disappointment" IsCheckable="True" />
          </MenuItem>

          <MenuItem Header="Look Deeper" InputGestureText="Ctrl+D">
            <MenuItem Header="Plain" />
            <MenuItem Header="Ice Cream" />
          </MenuItem>
        </MenuItem>

        <MenuItem Header="_Edit">
          <MenuItem Command="Cut"
                    Header="_Cut"
                    Icon="{materialDesign:PackIcon Kind=ContentCut}" />

          <MenuItem Command="Copy"
                    Header="_Copy"
                    Icon="{materialDesign:PackIcon Kind=ContentCopy}" />

          <MenuItem Command="Paste"
                    Header="_Paste"
                    Icon="{materialDesign:PackIcon Kind=ContentPaste}" />
        </MenuItem>
      </Menu>
    </smtx:XamlDisplay>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom Height" />

    <smtx:XamlDisplay Margin="0,0,0,16"
                      HorizontalAlignment="Left"
                      UniqueKey="customHeightMenu1">
      <Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="25">
        <MenuItem Header="Very">
          <MenuItem Header="Item 1" />
          <MenuItem Header="Item 2" />
          <MenuItem Header="Item 3" />
        </MenuItem>
        <MenuItem Header="Small">
          <MenuItem Header="Item 1" />
          <MenuItem Header="Item 2" />
          <MenuItem Header="Item 3" />
        </MenuItem>
        <MenuItem Header="Menu" />
      </Menu>
    </smtx:XamlDisplay>

    <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="customHeightMenu2">
      <Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="80">
        <MenuItem Header="Very">
          <MenuItem Header="Item 1" />
          <MenuItem Header="Item 2" />
          <MenuItem Header="Item 3" />
        </MenuItem>
        <MenuItem Header="Big">
          <MenuItem Header="Item 1" />
          <MenuItem Header="Item 2" />
          <MenuItem Header="Item 3" />
        </MenuItem>
        <MenuItem Header="Menu" />
      </Menu>
    </smtx:XamlDisplay>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Adaptive Menu" />

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="25" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <smtx:XamlDisplay Grid.Row="0"
                        HorizontalAlignment="Left"
                        UniqueKey="adaptiveMenu">
        <materialDesign:Card>
          <Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:Card}}, Path=ActualHeight}">
            <MenuItem Header="File">
              <MenuItem Header="Item 1" />
              <MenuItem Header="Item 2" />
              <MenuItem Header="Item 3" />
            </MenuItem>
            <MenuItem Header="Edit">
              <MenuItem Header="Item 1" />
              <MenuItem Header="Item 2" />
              <MenuItem Header="Item 3" />
            </MenuItem>
            <MenuItem Header="About" />
          </Menu>
        </materialDesign:Card>
      </smtx:XamlDisplay>
      <GridSplitter Grid.Row="1"
                    Height="5"
                    Margin="0,10"
                    HorizontalAlignment="Stretch" />
      <Grid Grid.Row="2">
        <StackPanel Orientation="Horizontal">
          <materialDesign:PackIcon Margin="0,0,5,0" Kind="Information" />
          <TextBlock>The menu height matches with the parent panel height. Use the splitter to see the adaptive menu in action.</TextBlock>
        </StackPanel>
      </Grid>
    </Grid>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with colored items" />

    <smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="coloredMenu1">
      <Menu>
        <MenuItem Header="Menu">
          <MenuItem Header="Item 1" />
          <MenuItem Header="Item 2" />
          <MenuItem Header="Item 3" />
        </MenuItem>
        <MenuItem Background="{DynamicResource PrimaryHueMidBrush}"
                  Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
                  Header="In Color">
          <MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
                    Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
                    Header="Item 1" />
          <MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
                    Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
                    Header="Item 2" />
          <MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
                    Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
                    Header="Item 3" />
        </MenuItem>
        <MenuItem Foreground="Crimson" Header="(1) Important">
          <MenuItem Foreground="{DynamicResource MaterialDesign.Brush.Foreground}" Header="Item 1" />
          <MenuItem Foreground="Crimson" Header="(1) This is important" />
          <MenuItem Foreground="{DynamicResource MaterialDesign.Brush.Foreground}" Header="Nothing here" />
        </MenuItem>
      </Menu>
    </smtx:XamlDisplay>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Toolbars" />

    <smtx:XamlDisplay Margin="0,0,0,16" UniqueKey="menus_2">
      <ToolBarTray>
        <ToolBar ClipToBounds="False" Style="{StaticResource MaterialDesignToolBar}">
          <Button Click="TwitterButton_OnClick"
                  Content="{materialDesign:PackIcon Kind=Twitter}"
                  ToolTip="Follow me on Twitter" />

          <Button Content="{materialDesign:PackIcon Kind=ContentSave}" ToolTip="Save" />

          <Separator />

          <Button Command="Cut"
                  Content="{materialDesign:PackIcon Kind=ContentCut}"
                  ToolBar.OverflowMode="AsNeeded"
                  ToolTip="Cut" />

          <Button Command="Copy"
                  Content="{materialDesign:PackIcon Kind=ContentCopy}"
                  ToolBar.OverflowMode="AsNeeded"
                  ToolTip="Copy that stuff" />

          <Separator />

          <Button Command="Paste"
                  Content="{materialDesign:PackIcon Kind=ContentPaste}"
                  ToolBar.OverflowMode="AsNeeded"
                  ToolTip="Paste some stuff" />

          <!--
            when badging in a toolbar, make sure the parent ToolBar.ClipToBounds="False", and
            manually apply the button style
          -->
          <materialDesign:Badged Badge="{materialDesign:PackIcon Alert}"
                                 CornerRadius="5"
                                 ToolBar.OverflowMode="AsNeeded">
            <Button Content="{materialDesign:PackIcon Kind=AirplaneTakeoff}"
                    Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                    ToolTip="Badge it up!" />
          </materialDesign:Badged>

          <Separator />

          <ListBox materialDesign:ListBoxAssist.CanUserToggleSelectedItem="True">
            <ListBoxItem ToolTip="This is a lonely toggle with TextBlock instead of icon">
              <TextBlock Text="W" />
            </ListBoxItem>
          </ListBox>

          <Separator />

          <ListBox SelectedIndex="0">
            <ListBox.ToolTip>
              <StackPanel>
                <TextBlock Text="MaterialDesignToolToggleFlatListBox" />
                <TextBlock Text="Exclusive selection" />
                <TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" />
              </StackPanel>
            </ListBox.ToolTip>

            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignLeft}" />
            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignCenter}" />
            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignRight}" />
            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatAlignJustify}" />
          </ListBox>

          <Separator />

          <ListBox SelectionMode="Extended">
            <ListBox.ToolTip>
              <StackPanel>
                <TextBlock Text="MaterialDesignToolToggleListBox" />
                <TextBlock Text="Multiple selection" />
                <TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" />
              </StackPanel>
            </ListBox.ToolTip>

            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatBold}" />
            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatItalic}" />
            <ListBoxItem Content="{materialDesign:PackIcon Kind=FormatUnderline}" />
          </ListBox>

          <Separator />

          <Label VerticalAlignment="Center" Content="Font size:" />

          <ComboBox>
            <ComboBoxItem Content="10" />
            <ComboBoxItem Content="12" IsSelected="True" />
            <ComboBoxItem Content="14" />
            <ComboBoxItem Content="16" />
          </ComboBox>

          <CheckBox Content="Check" />

          <Button Content="{materialDesign:PackIcon Kind=Hotel}"
                  ToolBar.OverflowMode="Always"
                  ToolTip="Take a nap" />

          <RadioButton Content="Radio" GroupName="XXX" />

          <RadioButton Content="Ga Ga" GroupName="XXX" />

          <Separator />

          <RadioButton Content="{materialDesign:PackIcon Kind=Radio}"
                       GroupName="YYY"
                       Style="{StaticResource MaterialDesignToolRadioButton}" />

          <RadioButton Content="{materialDesign:PackIcon Kind=EmoticonPoop}"
                       GroupName="YYY"
                       Style="{StaticResource MaterialDesignToolRadioButton}" />

          <Separator />

          <ToggleButton />
        </ToolBar>
      </ToolBarTray>
    </smtx:XamlDisplay>

    <smtx:XamlDisplay UniqueKey="menus_3">
      <ToolBarTray>
        <ToolBar ClipToBounds="False" Style="{StaticResource MaterialDesignToolBar}">
          <Menu>
            <MenuItem Header="Nested menu">
              <MenuItem Header="Item 1" />
              <MenuItem Header="Item 2" />
            </MenuItem>
          </Menu>

          <Separator />

          <ComboBox Width="80"
                    Margin="8,0"
                    materialDesign:HintAssist.Hint="Food"
                    Style="{StaticResource MaterialDesignFloatingHintComboBox}">
            <ComboBoxItem Content="Fries" IsSelected="True" />

            <ComboBoxItem Content="Waffles" />

            <ComboBoxItem Content="Chocolate" />
          </ComboBox>

          <TextBox Width="80"
                   Margin="8,0"
                   materialDesign:HintAssist.Hint="Drink"
                   Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                   Text="Beer" />
        </ToolBar>
      </ToolBarTray>
    </smtx:XamlDisplay>

    <smtx:XamlDisplay Margin="0,16,0,16" UniqueKey="menus_toolbar_custom_bg">
      <ToolBarTray>
        <ToolBar Background="{DynamicResource MaterialDesign.Brush.Primary}"
                 ClipToBounds="False"
                 Style="{StaticResource MaterialDesignToolBar}">
          <Button Content="{materialDesign:PackIcon Kind=ContentSave}" ToolTip="Save" />
          <Button Content="{materialDesign:PackIcon Kind=ContentCut}" ToolTip="Cut" />
          <Button Content="{materialDesign:PackIcon Kind=ContentCopy}" ToolTip="Copy" />
          <Button Content="{materialDesign:PackIcon Kind=ContentPaste}" ToolTip="Paste" />
          <Button Content="{materialDesign:PackIcon Kind=FormatBold}" ToolBar.OverflowMode="Always" />
          <Button Content="{materialDesign:PackIcon Kind=FormatItalic}" ToolBar.OverflowMode="Always" />
          <Button Content="{materialDesign:PackIcon Kind=FormatUnderline}" ToolBar.OverflowMode="Always" />
        </ToolBar>
      </ToolBarTray>
    </smtx:XamlDisplay>

    <Rectangle Style="{StaticResource PageSectionSeparator}" />
    <TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Context Menus" />

    <WrapPanel>
      <smtx:XamlDisplay Margin="0,0,16,16" UniqueKey="menus_4">
        <TextBox Text="With Default Context Menu" />
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="menus_5"  Margin="0,0,16,16">
        <TextBox Text="With Custom Context Menu">
          <TextBox.ContextMenu>
            <ContextMenu>
              <MenuItem Header="Hello World" />
              <MenuItem Header="Clickety Click">
                <MenuItem Header="Clackety Clack" />
              </MenuItem>
            </ContextMenu>
          </TextBox.ContextMenu>
        </TextBox>
      </smtx:XamlDisplay>

      <smtx:XamlDisplay UniqueKey="menus_6"  Margin="0,0,16,16">
        <TextBox Text="With Custom Item Margin">
          <TextBox.ContextMenu>
            <ContextMenu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
              <MenuItem Header="Hello World" />
              <MenuItem Header="Clickety Click">
                <MenuItem Header="Clackety Clack 1" />
                <MenuItem Header="Clackety Clack 2" />
                <MenuItem Header="Clackety Clack 3" />
              </MenuItem>
            </ContextMenu>
          </TextBox.ContextMenu>
        </TextBox>
      </smtx:XamlDisplay>
    </WrapPanel>
  </StackPanel>
</UserControl>