顶部导航

# 顶部导航菜单

axaml文件：

<StackPanel>
    <atom:NavMenu>
        <atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
        <atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}"
                          IsEnabled="False" />
        <atom:NavMenuItem Header="Navigation Three - Submenu"
                          Icon="{atom:IconProvider Kind=SettingOutlined}">
            <atom:NavMenuItem Header="Item 1">
                <atom:NavMenuItem Header="Option 1" />
                <atom:NavMenuItem Header="Option 2" />
            </atom:NavMenuItem>

            <atom:NavMenuItem Header="Item 2">
                <atom:NavMenuItem Header="Option 3" />
                <atom:NavMenuItem Header="Option 4" />
            </atom:NavMenuItem>
        </atom:NavMenuItem>
        <atom:NavMenuItem Header="Navigation Four" />
    </atom:NavMenu>
    <atom:Separator />
    <atom:NavMenu IsDarkStyle="True">
        <atom:NavMenuItem Header="Navigation One" Icon="{atom:IconProvider Kind=MailOutlined}" />
        <atom:NavMenuItem Header="Navigation Two" Icon="{atom:IconProvider Kind=AppstoreOutlined}"
                          IsEnabled="False" />
        <atom:NavMenuItem Header="Navigation Three - Submenu"
                          Icon="{atom:IconProvider Kind=SettingOutlined}">
            <atom:NavMenuItem Header="Item 1">
                <atom:NavMenuItem Header="Option 1" />
                <atom:NavMenuItem Header="Option 2" />
            </atom:NavMenuItem>

            <atom:NavMenuItem Header="Item 2">
                <atom:NavMenuItem Header="Option 3" />
                <atom:NavMenuItem Header="Option 4" />
            </atom:NavMenuItem>
        </atom:NavMenuItem>
        <atom:NavMenuItem Header="Navigation Four" />
    </atom:NavMenu>
</StackPanel>

axaml文件：

<gallerycontrols:ShowCaseItem.Styles>
    <Style Selector="Border#ItemSourcesContextMenuContainer">
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="6" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Margin" Value="10" />
    </Style>
</gallerycontrols:ShowCaseItem.Styles>
<Border Name="ItemSourcesContextMenuContainer">
    <Border.ContextMenu>
        <atom:ContextMenu ItemsSource="{Binding MenuItems}"
                          x:DataType="viewModels:MenuViewModel">
            <atom:ContextMenu.ItemTemplate>
                <TreeDataTemplate ItemsSource="{Binding Children}">
                    <atom:TextBlock Text="{Binding Header}" />
                </TreeDataTemplate>
            </atom:ContextMenu.ItemTemplate>
        </atom:ContextMenu>
    </Border.ContextMenu>
    <atom:TextBlock Text="Right Click to show Context Menu" />
</Border>

axaml文件：

<gallerycontrols:ShowCaseItem.Styles>
    <Style Selector="Border.ContextFlyoutContainer">
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="6" />
        <Setter Property="Padding" Value="10" />
        <Setter Property="Margin" Value="10" />
    </Style>
</gallerycontrols:ShowCaseItem.Styles>

<StackPanel>
    <atom:Separator Title="Normal"/>
    <Border Classes="ContextFlyoutContainer">
        <Border.ContextFlyout>
            <atom:MenuFlyout IsMotionEnabled="True">
                <atom:MenuItem Header="Cut" InputGesture="Ctrl+X"
                               Icon="{atom:IconProvider Kind=ScissorOutlined}" />
                <atom:MenuItem Header="Copy" InputGesture="Ctrl+C" Icon="{atom:IconProvider Kind=CopyOutlined}" />
                <atom:MenuItem Header="Delete" InputGesture="Ctrl+D"
                               Icon="{atom:IconProvider Kind=DeleteOutlined}" />
                <atom:MenuItem Header="Paste">
                    <atom:MenuItem Header="Paste" InputGesture="Ctrl+P"
                                   Icon="{atom:IconProvider Kind=FileDoneOutlined}" />
                    <atom:MenuItem Header="Paste from History" InputGesture="Ctrl+Shift+V" />
                </atom:MenuItem>
            </atom:MenuFlyout>
        </Border.ContextFlyout> 
        <atom:TextBlock Text="Right Click to show Context Flyout" />
    </Border>
    
    <atom:Separator Title="Generated by template"/>
    <Border Classes="ContextFlyoutContainer">
        <Border.ContextFlyout>
            <atom:MenuFlyout IsMotionEnabled="True" 
                             ItemsSource="{Binding MenuFlyoutItems}"
                             x:DataType="viewModels:MenuViewModel">
                <atom:MenuFlyout.ItemTemplate>
                    <TreeDataTemplate ItemsSource="{Binding Children}">
                        <atom:TextBlock Text="{Binding Header}" />
                    </TreeDataTemplate>
                </atom:MenuFlyout.ItemTemplate>
            </atom:MenuFlyout>
        </Border.ContextFlyout>
        <atom:TextBlock Text="Right Click to show Context Flyout" />
    </Border>