aistudio-wpf-diagram/Fluent.Ribbon/Fluent.Ribbon.Showcase/TestContent.xaml

<UserControl x:Class="FluentTest.TestContent"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:Fluent="urn:fluent-ribbon"
             xmlns:TemplateSelectors="clr-namespace:FluentTest.TemplateSelectors"
             xmlns:Helpers="clr-namespace:FluentTest.Helpers"
             xmlns:System="clr-namespace:System;assembly=System.Runtime"
             xmlns:viewModels="clr-namespace:FluentTest.ViewModels"
             xmlns:formsInterop="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
             xmlns:forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
             xmlns:converters="clr-namespace:FluentTest.Converters"
             xmlns:controlzEx="urn:controlzex"
             xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="800"
             x:Name="TestContentControl"
             d:DataContext="{d:DesignInstance viewModels:MainViewModel, IsDesignTimeCreatable=True}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/VectorIcons.xaml" />
            </ResourceDictionary.MergedDictionaries>
            
            <BooleanToVisibilityConverter x:Key="boolToVisibilityConverter" />
            <converters:UniqueGroupNameConverter x:Key="UniqueGroupNameConverter" />

            <Canvas x:Key="AppbarUndoIcon"
                    Width="76"
                    Height="76"
                    Background="Transparent"
                    Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                <Path Width="38.3892"
                      Height="39.458"
                      Canvas.Left="19"
                      Canvas.Top="21.474"
                      Stretch="Fill"
                      Fill="{DynamicResource BlackBrush}"
                      Data="F1 M 52.7514,25.076C 53.4111,25.7534 54.0258,26.4933 54.5953,27.296C 55.1649,28.0987 55.6564,28.9607 56.0698,29.8821C 56.4832,30.8035 56.8065,31.7766 57.0396,32.8014C 57.2727,33.8262 57.3892,34.8883 57.3892,35.9878C 57.3892,37.0566 57.276,38.1517 57.0495,39.2733C 56.823,40.3948 56.4491,41.5394 55.928,42.7071C 55.4068,43.8748 54.713,45.07 53.8465,46.2927C 52.9801,47.5154 51.9069,48.7601 50.6271,50.0267C 50.2137,50.4358 49.7431,50.902 49.2153,51.4253C 48.6875,51.9487 48.1278,52.5029 47.5363,53.0878C 46.9447,53.6728 46.34,54.2742 45.722,54.8922C 45.1041,55.5101 44.4983,56.1072 43.9045,56.6833C 42.5323,58.0424 41.1029,59.4586 39.6163,60.9319L 35.3545,56.6239C 36.8235,55.1638 38.2441,53.7542 39.6163,52.3951C 40.1969,51.819 40.7994,51.2252 41.424,50.6139C 42.0485,50.0025 42.6565,49.4011 43.2481,48.8095C 43.8396,48.218 44.3993,47.6605 44.9271,47.1371C 45.4549,46.6138 45.9255,46.1476 46.3389,45.7385C 48.0146,44.0584 49.2758,42.3904 50.1224,40.7345C 50.969,39.0786 51.3924,37.4678 51.3924,35.9021C 51.3924,34.719 51.1516,33.5777 50.67,32.4781C 50.1884,31.3786 49.4528,30.3406 48.4632,29.3642C 48.2169,29.1179 47.9112,28.8848 47.5462,28.6649C 47.1811,28.445 46.7688,28.2526 46.3092,28.0877C 45.8496,27.9227 45.3482,27.7886 44.805,27.6852C 44.2619,27.5819 43.6868,27.5302 43.0799,27.5302C 42.4641,27.5302 41.8198,27.5929 41.1469,27.7182C 40.474,27.8436 39.7933,28.0503 39.105,28.3384C 38.4167,28.6264 37.7218,29.0036 37.0203,29.4698C 36.3188,29.936 35.6316,30.5056 34.9587,31.1785L 30.466,35.6976L 37.4986,42.75L 19,42.75L 19,24.5417L 25.9931,31.4094L 30.5056,26.8705C 31.5083,25.7446 32.5463,24.8275 33.6194,24.1194C 34.6926,23.4113 35.7646,22.8616 36.8356,22.4701C 37.9065,22.0787 38.972,21.8148 40.0319,21.6785C 41.0919,21.5421 42.1079,21.474 43.0799,21.474C 44.087,21.474 45.0579,21.563 45.9925,21.7411C 46.9271,21.9193 47.8068,22.17 48.6314,22.4932C 49.4561,22.8165 50.2148,23.198 50.9075,23.6378C 51.6002,24.0777 52.2148,24.5571 52.7514,25.076 Z " />
            </Canvas>

            <ObjectDataProvider MethodName="GetValues"
                                ObjectType="{x:Type ResizeMode}"
                                x:Key="ResizeModeEnumValues">
                <ObjectDataProvider.MethodParameters>
                    <x:Type TypeName="ResizeMode" />
                </ObjectDataProvider.MethodParameters>
            </ObjectDataProvider>

            <ObjectDataProvider MethodName="GetValues"
                                ObjectType="{x:Type FlowDirection}"
                                x:Key="FlowDirectionEnumValues">
                <ObjectDataProvider.MethodParameters>
                    <x:Type TypeName="FlowDirection" />
                </ObjectDataProvider.MethodParameters>
            </ObjectDataProvider>

            <Style TargetType="Label">
                <Setter Property="Foreground"
                        Value="{DynamicResource BlackBrush}" />
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

    <Grid>
        <Grid.Resources>
            <Style x:Key="GalleryItemStyleWithCustomContextMenu"
                   TargetType="{x:Type Fluent:GalleryItem}">
                <Setter Property="ContextMenu">
                    <Setter.Value>
                        <Fluent:ContextMenu>
                            <Fluent:MenuItem Header="Custom ContextMenu" />
                        </Fluent:ContextMenu>
                    </Setter.Value>
                </Setter>
            </Style>

            <DataTemplate x:Key="middleDataItemTemplate"
                          DataType="{x:Type viewModels:GallerySampleDataItemViewModel}">
                <Border>
                    <StackPanel Orientation="Horizontal"
                                HorizontalAlignment="Left">
                        <Image Source="{Binding Icon}"
                               Stretch="UniformToFill" />
                        <TextBlock Text="{Binding Path=Text, Mode=OneWay}"
                                   FontSize="10"
                                   VerticalAlignment="Center" />
                    </StackPanel>
                </Border>
            </DataTemplate>
            
            <DataTemplate x:Key="GallerySampleDataItemCommandTemplate"
                          DataType="{x:Type viewModels:GallerySampleDataItemViewModel}">
                <Fluent:Button Header="{Binding Text}"
                               LargeIcon="{Binding IconLarge}"
                               Command="{Binding Command}"
                               CommandParameter="{Binding}" />
            </DataTemplate>

            <DataTemplate x:Key="largeDataItemTemplate"
                          DataType="{x:Type viewModels:GallerySampleDataItemViewModel}">
                <Border ToolTip="{Binding Text}">
                    <Image Source="{Binding IconLarge}" />
                </Border>
            </DataTemplate>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Fluent:Ribbon x:Name="ribbon"
                       AutomaticStateManagement="True">
            <Fluent:Ribbon.ContextualGroups>
                <Fluent:RibbonContextualTabGroup x:Name="tabGroup1"
                                                 BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.AccentBaseColorBrush}"
                                                 Background="{DynamicResource Fluent.Ribbon.Brushes.AccentBaseColorBrush}"
                                                 Foreground="{DynamicResource BlackBrush}"
                                                 TabItemSelectedForeground="{DynamicResource Fluent.Ribbon.Brushes.RibbonTabItem.Foreground}"
                                                 TabItemMouseOverForeground="Red"
                                                 TabItemSelectedMouseOverForeground="OrangeRed"
                                                 Header="FIRST"
                                                 Visibility="{Binding AreContextGroupsVisible, Converter={StaticResource boolToVisibilityConverter}}" />

                <Fluent:RibbonContextualTabGroup x:Name="tabGroup2"
                                                 BorderBrush="#FF9D00"
                                                 Background="#FF9D00"
                                                 Foreground="#C45300"
                                                 Header="SECOND"
                                                 Visibility="{Binding AreContextGroupsVisible, Converter={StaticResource boolToVisibilityConverter}}" />

                <Fluent:RibbonContextualTabGroup x:Name="invisibleTabGroup"
                                                 BorderBrush="Green"
                                                 Background="Red"
                                                 Header="MUST BE HIDDEN"
                                                 Visibility="Visible" />
            </Fluent:Ribbon.ContextualGroups>

            <Fluent:Ribbon.StartScreen>
                <Fluent:StartScreen x:Name="startScreen">
                    <Fluent:StartScreenTabControl>
                        <Fluent:StartScreenTabControl.LeftContent>
                            <StackPanel Orientation="Vertical">
                                <Label Content="Fluent.Ribbon"
                                       FontSize="48"
                                       Foreground="{DynamicResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
                            </StackPanel>
                        </Fluent:StartScreenTabControl.LeftContent>

                        <Fluent:StartScreenTabControl.RightContent>
                            <StackPanel Orientation="Vertical">
                                <TextBlock VerticalAlignment="Center"
                                           HorizontalAlignment="Center">You can close the start screen by either clicking the button below or by pressing ESC</TextBlock>
                                <Fluent:Button HorizontalAlignment="Center"
                                               LargeIcon="{iconPacks:Material Kind=ExitToApp}"
                                               IsDefinitive="True">Close start screen</Fluent:Button>
                            </StackPanel>
                        </Fluent:StartScreenTabControl.RightContent>
                    </Fluent:StartScreenTabControl>
                </Fluent:StartScreen>
            </Fluent:Ribbon.StartScreen>

            <Fluent:Ribbon.Menu>
                <Grid>
                    <!--Backstage items can be keytipped-->
                    <Fluent:Backstage x:Name="Backstage"
                                      Visibility="Collapsed">
                        
                        <!--<Fluent:Backstage.Style>
                            <Style TargetType="Fluent:Backstage">
                                <Style.Triggers>
                                    <Trigger Property="Fluent:Backstage.IsOpen"
                                             Value="True">
                                        <Setter Property="Fluent:Backstage.CanChangeIsOpen"
                                                Value="False" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </Fluent:Backstage.Style>-->
                        <Fluent:BackstageTabControl>
                            <Fluent:Button Header="Save"
                                           Icon="{iconPacks:Material Kind=ContentSave}"
                                           KeyTip="S" />
                            <Fluent:Button Header="Save As"
                                           Icon="{iconPacks:Material Kind=ContentSaveAll}"
                                           KeyTip="A"
                                           CanAddToQuickAccessToolBar="False"
                                           IsDefinitive="False"
                                           Click="HandleSaveAsClick" />
                            <Fluent:BackstageTabItem Header="Invisible"
                                                     Visibility="Collapsed" />
                            <Fluent:BackstageTabItem Header="Disabled"
                                                     IsEnabled="False" />
                            <Fluent:BackstageTabItem Header="Introduction"
                                                     Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                                     KeyTip="T">
                                <StackPanel Orientation="Vertical">
                                    <TextBlock>This is a BackstageTabItem with some sample content.</TextBlock>

                                    <WrapPanel HorizontalAlignment="Stretch">
                                        <Fluent:Button Header="Button with bound command"
                                                       Width="120"
                                                       Command="{Binding TestCommand}" />
                                    
                                        <Fluent:Button Header="Button"
                                                       IsDefinitive="False"
                                                       Click="HandleShowMetroMessage"
                                                       Icon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                                       LargeIcon="{DynamicResource Fluent.Ribbon.Images.Paste}" />
                                    
                                        <Fluent:ToggleButton Header="Toggle"
                                                             Icon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                                             LargeIcon="{DynamicResource Fluent.Ribbon.Images.Paste}" />
                                    
                                        <Fluent:DropDownButton Header="DropDownButton"
                                                               Icon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                                               LargeIcon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                                               ItemsSource="{Binding Source={x:Static controlzEx:ThemeManager.Current}, Path=Themes}"
                                                               DisplayMemberPath="Name" />

                                        <Fluent:ComboBox Header="ComboBox" 
                                                         SelectedIndex="0">
                                            <TextBlock Text="1" />
                                            <TextBlock Text="2" />
                                            <TextBlock Text="3" />
                                            <TextBlock Text="4" />
                                            <TextBlock Text="5" />
                                        </Fluent:ComboBox>
                                    
                                        <Fluent:Spinner Value="1"
                                                        Format="0"
                                                        InputWidth="50"
                                                        Header="Spinner"
                                                        ValueChanged="OnSpinnerValueChanged" />
                                    </WrapPanel>
                                    
                                    <TextBlock TextWrapping="Wrap">
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi elit, efficitur a sapien sit amet, euismod tempus quam. Aenean porta nisl id erat eleifend, vehicula convallis orci posuere. Maecenas id eleifend magna. Aenean quis nunc id odio tristique scelerisque et eu felis. Donec vestibulum augue sit amet dignissim feugiat. Pellentesque dignissim maximus lacinia. Maecenas dictum velit ut dui tempor imperdiet.

Maecenas mi tortor, hendrerit consequat augue eget, rhoncus efficitur nunc. Cras in risus eu mi efficitur posuere et sit amet turpis. Sed sit amet auctor felis. Sed ultricies dui urna, in venenatis dui volutpat in. Curabitur congue congue scelerisque. Proin a tortor eu massa suscipit tristique vel ac sem. Praesent in laoreet quam. Pellentesque vel lacus mi.

Quisque rhoncus augue sed nisl iaculis dapibus. Fusce in congue enim, ac hendrerit nunc. Sed cursus, massa eget dignissim commodo, neque leo convallis quam, vel pharetra eros felis in tortor. Aenean finibus lobortis auctor. Vestibulum nulla sem, venenatis non mollis ac, mattis vel neque. Etiam ultricies faucibus vulputate. Vivamus finibus tellus at tempor mattis. Vestibulum ligula odio, iaculis id dolor condimentum, pellentesque semper mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam non faucibus mauris, non congue ex.

Curabitur mollis ex orci, sed auctor augue convallis sit amet. Sed in sodales quam, ac tincidunt eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque euismod velit urna, sed aliquam diam ultrices id. Nulla facilisi. Vestibulum consequat nec odio vel pellentesque. Vestibulum lacinia tellus vestibulum nibh pharetra auctor.

Pellentesque nec dolor sed lacus tristique rutrum sed vitae urna. Sed eu pharetra ipsum, sed pretium dolor. Praesent rhoncus facilisis felis, non imperdiet nunc efficitur id. Proin dignissim rutrum nibh eget finibus. Etiam eu ullamcorper enim. Pellentesque consectetur sapien nec tristique aliquet. Proin interdum nibh ac urna consequat, id facilisis dui pulvinar. In hendrerit nisi id ex egestas molestie. Praesent nec malesuada nisl, non vestibulum sem. Mauris vitae erat sodales, sodales ligula sit amet, fermentum arcu. Suspendisse aliquet urna quis tellus tincidunt, non posuere metus commodo. Integer ac consectetur massa. Donec nibh ligula, fermentum et erat ac, pretium gravida massa.
                                    </TextBlock>
                                </StackPanel>
                            </Fluent:BackstageTabItem>

                            <Fluent:SeparatorTabItem Header="Separator" />

                            <Fluent:BackstageTabItem Header="Recent"
                                                     KeyTip="R"
                                                     Icon="{iconPacks:Material Kind=History}">
                                <TabControl Margin="20,5,20,5"
                                            Style="{DynamicResource InnerBackstageTabControlStyle}">
                                    <Fluent:SeparatorTabItem Header="Test1" />
                                    <TabItem Header="1" />
                                    <TabItem Header="2" />
                                    <TabItem Header="3" />
                                    <Fluent:SeparatorTabItem Header="Test2" />
                                    <TabItem Header="4" />
                                </TabControl>
                            </Fluent:BackstageTabItem>

                            <Fluent:SeparatorTabItem />

                            <Fluent:BackstageTabItem Header="Extra wide content"
                                                     KeyTip="W"
                                                     DataContext="{Binding ColorViewModel}"
                                                     Content="The template used to display this is extremely wide. Width = 6000">
                                <Fluent:BackstageTabItem.Icon>
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding HighlightColor}" />
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Fluent:BackstageTabItem.Icon>
                                <Fluent:BackstageTabItem.ContentTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <TextBox Text="{Binding Mode=OneWay}"
                                                     Width="6000" />
                                        </Grid>
                                    </DataTemplate>
                                </Fluent:BackstageTabItem.ContentTemplate>
                            </Fluent:BackstageTabItem>

                            <Fluent:Button Header="Exit"
                                           Icon="{iconPacks:Material Kind=ExitToApp}"
                                           KeyTip="X"
                                           Command="{Binding ExitCommand}" />
                        </Fluent:BackstageTabControl>
                    </Fluent:Backstage>

                    <Fluent:ApplicationMenu x:Name="ApplicationMenu"
                                            Visibility="Collapsed">
                        <Fluent:ApplicationMenu.RightPaneContent>
                            <StackPanel HorizontalAlignment="Stretch"
                                        VerticalAlignment="Stretch"
                                        Orientation="Vertical">

                                <Border HorizontalAlignment="Stretch"
                                        BorderBrush="#64647F"
                                        BorderThickness="0,0,0,0">

                                    <TextBlock Text="Recent files"
                                               Background="#F6F7F8"
                                               TextAlignment="Left"
                                               Padding="12,4,4,4"
                                               Foreground="#64647F"
                                               FontWeight="SemiBold"
                                               FontSize="12" />
                                </Border>

                                <StackPanel HorizontalAlignment="Stretch"
                                            Height="2">

                                    <Border Height="1"
                                            BorderThickness="1"
                                            HorizontalAlignment="Stretch"
                                            BorderBrush="#DCDDDE" />

                                    <Border Height="1"
                                            BorderThickness="1"
                                            HorizontalAlignment="Stretch"
                                            BorderBrush="#FEFEFF" />

                                </StackPanel>

                                <ItemsControl ItemsSource="{Binding GalleryViewModel.Items}">
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Fluent:MenuItem Header="{Binding Text}"
                                                             ToolTip="{Binding Text}"
                                                             Description="{Binding Group}"
                                                             IsDefinitive="True"
                                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BlueLarge.png" />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </StackPanel>
                        </Fluent:ApplicationMenu.RightPaneContent>

                        <Fluent:MenuItem Header="New"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png">
                            <Fluent:MenuItem Header="Text document"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png" />

                            <Fluent:MenuItem Header="Spreadsheet"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png" />
                        </Fluent:MenuItem>

                        <Fluent:MenuItem Header="Save As"
                                         IsSplited="True"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BlueLarge.png">
                            <Fluent:MenuItem Header="Standard format"
                                             Description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                             ToolTip="Save something in standard format"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BlueLarge.png" />

                            <Fluent:MenuItem Header="Export"
                                             ToolTip="Export something"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BlueLarge.png" />
                        </Fluent:MenuItem>

                        <Fluent:MenuItem Header="Open"
                                         Description="CTRL + O"
                                         ToolTip="Open object"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png" />

                        <Separator />

                        <Fluent:MenuItem Header="Exit"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                         KeyTip="X"
                                         Command="{Binding ExitCommand}" />
                    </Fluent:ApplicationMenu>
                </Grid>
            </Fluent:Ribbon.Menu>

            <Fluent:Ribbon.ToolBarItems>
                <Fluent:Button Size="Small"
                               Icon="{DynamicResource Fluent.Ribbon.Images.Help}"
                               Click="OnHelpClick">
                    <Fluent:Button.ToolTip>
                        <Fluent:ScreenTip Title="Insert Chart"
                                          Text="Insert a chart to illustarate and compare data. &#xa;&#xa;Bar, Pie, Line, Area and Surface are same of the available types."
                                          Image="pack://application:,,,/Fluent.Ribbon.Showcase;component\Images/SampleImageForScreenTip.png"
                                          HelpTopic="https://github.com/fluentribbon/Fluent.Ribbon"
                                          DisableReason="Disable reason reason."
                                          Width="190"
                                          IsRibbonAligned="True" />
                    </Fluent:Button.ToolTip>
                </Fluent:Button>

                <Fluent:DropDownButton Size="Small" Visibility="Collapsed">
                    <Button Click="Hyperlink_OnClick">Open dialog</Button>
                </Fluent:DropDownButton>
            </Fluent:Ribbon.ToolBarItems>

            <Fluent:Ribbon.QuickAccessItems>
                <!--Quick Access toolbar items automatically have ScreenTips of the target -->
                <!--KeyTips in Quick Access Toolbar names automatically-->

                <!--Use Content or Target Property to set QAT item-->
                <Fluent:QuickAccessMenuItem IsChecked="true">
                    <Fluent:Button Header="Pink"
                                   Command="{Binding TestCommand}"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Pink.png" />
                </Fluent:QuickAccessMenuItem>
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=pasteButton}"
                                            IsChecked="True" />
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=cutButton}"
                                            IsChecked="True" />
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=copyButton}" />
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=dropDownGreen}"
                                            IsChecked="True" />
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem Target="{Binding ElementName=gallerySampleInRibbonGallery}"
                                            IsChecked="True" />
                <!-- todo: netcore => was using x:Reference before -->
                <Fluent:QuickAccessMenuItem IsChecked="True"
                                            Target="{Binding ElementName=UndoButton}" />
            </Fluent:Ribbon.QuickAccessItems>

            <Fluent:RibbonTabItem Header="Toolbars"
                                  KeyTip="TO"
                                  ReduceOrder="Group2, Group2, Group2, Font, Font, Font, Font,B,A,A,A,(A),(A),(A),Clipboard,Font,B,B,(A),C,(A),(A)">
                <Fluent:RibbonGroupBox Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                       KeyTip="C"
                                       x:Name="Clipboard"
                                       Header="Clipboard"
                                       IsLauncherVisible="True"
                                       LauncherClick="OnLauncherButtonClick"
                                       LauncherKeys="ZB">
                    <Fluent:SplitButton x:Name="pasteButton"
                                        KeyTip="V"
                                        Header="Paste"
                                        Icon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                        LargeIcon="{DynamicResource Fluent.Ribbon.Images.Paste}"
                                        SizeDefinition="Large"
                                        Command="ApplicationCommands.Paste"
                                        FocusManager.IsFocusScope="True">
                        <Fluent:SplitButton.ToolTip>
                            <Fluent:ScreenTip Title="Paste (Ctrl+V)"
                                              Text="Paste the contents of the Clipboard."
                                              DisableReason="Enable it do use this function"
                                              Width="190" />
                        </Fluent:SplitButton.ToolTip>
                        <Fluent:Gallery ScrollViewer.VerticalScrollBarVisibility="Hidden"
                                        Orientation="Horizontal"
                                        GroupBy="Tag"
                                        Selectable="False"
                                        ItemWidth="32"
                                        ItemHeight="32">
                            <Fluent:GalleryItem Command="Paste">
                                <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PasteImage.png"
                                       Width="24"
                                       Height="24"
                                       Fluent:KeyTip.Keys="K"
                                       Tag="Paste Options:" />
                            </Fluent:GalleryItem>
                            <Fluent:GalleryItem Command="Paste">
                                <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PasteText.png"
                                       Width="24"
                                       Height="24"
                                       Fluent:KeyTip.Keys="M"
                                       Tag="Paste Options:" />
                            </Fluent:GalleryItem>
                            <Fluent:GalleryItem Command="Paste">
                                <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PasteTextOnly.png"
                                       Width="24"
                                       Height="24"
                                       Fluent:KeyTip.Keys="T"
                                       Tag="Paste Options:" />
                            </Fluent:GalleryItem>
                            <Fluent:GalleryItem Command="Paste">
                                <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PasteFormating.png"
                                       Width="24"
                                       Height="24"
                                       Fluent:KeyTip.Keys="L"
                                       Tag="Paste Options:" />
                            </Fluent:GalleryItem>
                            <Fluent:GalleryItem Command="Paste">
                                <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PasteSourceFormating.png"
                                       Width="24"
                                       Height="24"
                                       Fluent:KeyTip.Keys="E"
                                       Tag="Paste Options:" />
                            </Fluent:GalleryItem>
                        </Fluent:Gallery>
                        <Fluent:MenuItem Header="Paste Special..."
                                         KeyTip="S">
                            <Fluent:MenuItem.ToolTip>
                                <Fluent:ScreenTip Title="Paste Special"
                                                  Text="This ScreenTip is attached to menu item" />
                            </Fluent:MenuItem.ToolTip>
                        </Fluent:MenuItem>
                        <Separator />
                        <Fluent:MenuItem Header="Set Default Paste..."
                                         KeyTip="A"
                                         IsSplited="True"
                                         Command="Paste">
                            <Fluent:MenuItem Header="1"
                                             Click="OnMenuItemClick" />
                            <Fluent:MenuItem Header="2"
                                             Command="Paste" />
                        </Fluent:MenuItem>
                        <Fluent:MenuItem Header="Paste now"
                                         Command="Paste" />
                    </Fluent:SplitButton>
                    <Fluent:Button x:Name="cutButton"
                                   KeyTip="X"
                                   Header="Cut"
                                   Icon="{DynamicResource Fluent.Ribbon.Images.Cut}"
                                   SizeDefinition="Middle,Small"
                                   Command="Cut"
                                   FocusManager.IsFocusScope="True">
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip Title="Cut (Ctrl+X)"
                                              Text="Cut the contents to the Clipboard."
                                              DisableReason="Cut is currently not available."
                                              Width="190" />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>
                    <Fluent:Button x:Name="copyButton"
                                   KeyTip="C"
                                   Header="Copy"
                                   Icon="{DynamicResource Fluent.Ribbon.Images.Copy}"
                                   Command="Copy"
                                   FocusManager.IsFocusScope="True">
                        <Fluent:Button.SizeDefinition>
                            <Fluent:RibbonControlSizeDefinition Large="Middle"
                                                                Middle="Small" />
                        </Fluent:Button.SizeDefinition>
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip Title="Insert Chart"
                                              DisableReason="Disable reason reason." />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>
                    <Fluent:Button KeyTip="FP"
                                   Header="Format Painter"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/FormatPainter.png"
                                   SizeDefinition="Middle,Small"
                                   Click="OnFormatPainterClick" />
                    <Fluent:DropDownButton Name="buttonWatermark"
                                           KeyTip="W"
                                           Header="DropDownButton"
                                           Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Red.png"
                                           LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           IsEnabled="True"
                                           VerticalAlignment="Top">
                        <Fluent:Gallery SelectedFilter="{Binding ElementName=galleryFilterAll3}"
                                        GroupBy="Tag"
                                        IsGrouped="True"
                                        x:Name="WatermarkGallery"
                                        MinItemsInRow="1"
                                        MaxItemsInRow="3"
                                        Orientation="Horizontal"
                                        ItemWidth="100"
                                        ItemHeight="100">
                            <Fluent:Gallery.Filters>
                                <Fluent:GalleryGroupFilter Title="All"
                                                           Groups="Confidential,Disclaimers,Urgent"
                                                           x:Name="galleryFilterAll3" />
                                <Fluent:GalleryGroupFilter Title="Confidential"
                                                           Groups="Confidential" />
                                <Fluent:GalleryGroupFilter Title="Disclaimers"
                                                           Groups="Disclaimers" />
                                <Fluent:GalleryGroupFilter Title="Urgent"
                                                           Groups="Urgent" />
                            </Fluent:Gallery.Filters>

                            <!-- Confidential group items -->
                            <Border Tag="Confidential"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="CONFIDENTIAL 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="CONFIDENTIAL 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PinkLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="DO NOT COPY 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Confidential"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="DO NOT COPY 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>

                            <!-- Disclaimers group items -->
                            <Border Tag="Disclaimers"
                                    x:Name="Disclaimers"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="DRAFT 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/OrangeLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="DRAFT 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BlueLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="SAMPLE 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Disclaimers"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="SAMPLE 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>

                            <!-- Disclaimers group items -->
                            <Border Tag="Urgent"
                                    x:Name="Urgent"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="ASAP 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="ASAP 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="URGENT 1"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                            <Border Tag="Urgent"
                                    BorderThickness="4"
                                    BorderBrush="Transparent">
                                <StackPanel>
                                    <Image VerticalAlignment="Top"
                                           Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                           Stretch="None" />
                                    <TextBlock Text="URGENT 2"
                                               VerticalAlignment="Bottom"
                                               HorizontalAlignment="Center" />
                                </StackPanel>
                            </Border>
                        </Fluent:Gallery>

                        <!-- Menu Items **** NOTICE THIS IS OUTSIDE OF THE GALLERY **** -->
                        <Fluent:MenuItem Header="Remove Watermark"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                         Size="Middle"
                                         IsEnabled="True" />
                    </Fluent:DropDownButton>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox KeyTip="F"
                                       x:Name="Font"
                                       Header="Font"
                                       IsLauncherVisible="True"
                                       LauncherClick="OnLauncherButtonClick"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/FontColor.png"
                                       LauncherIcon="/Images/FontColor.png"
                                       LauncherKeys="NF">
                    <Fluent:RibbonToolBar>
                        <!--ToolBar Layout Definitions-->
                        <Fluent:RibbonToolBar.LayoutDefinitions>
                            <Fluent:RibbonToolBarLayoutDefinition Size="Large">
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontName"
                                                                           Width="75" />
                                    <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontSize"
                                                                           Width="45" />
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonGrowFont" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonShrinkFont" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonChangeCase" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonClearFormatting" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonBold" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonItalic" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonUnderline" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonStrikethrough" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonSubscript" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonSuperscript" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonTextEffects" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonTextHighlightColor" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonFontColor" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                </Fluent:RibbonToolBarRow>
                            </Fluent:RibbonToolBarLayoutDefinition>

                            <Fluent:RibbonToolBarLayoutDefinition Size="Middle">
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontName"
                                                                           Width="125" />
                                    <Fluent:RibbonToolBarControlDefinition Target="comboBoxFontSize"
                                                                           Width="50" />
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonBold" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonItalic" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonUnderline" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonStrikethrough" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonSubscript" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonSuperscript" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonClearFormatting" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonTextEffects" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonTextHighlightColor" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonFontColor" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonChangeCase" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                    <Fluent:RibbonToolBarControlGroupDefinition>
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonGrowFont" />
                                        <Fluent:RibbonToolBarControlDefinition Target="buttonShrinkFont" />
                                    </Fluent:RibbonToolBarControlGroupDefinition>
                                </Fluent:RibbonToolBarRow>
                            </Fluent:RibbonToolBarLayoutDefinition>
                        </Fluent:RibbonToolBar.LayoutDefinitions>

                        <!--ToolBar Controls-->

                        <Fluent:ComboBox x:Name="comboBoxFontName"
                                         MinWidth="40"
                                         Height="22"
                                         BorderBrush="Gainsboro"
                                         DisplayMemberPath="Text"
                                         IsTextSearchEnabled="True"
                                         ResizeMode="Vertical"
                                         KeyTip="FF"
                                         SizeDefinition="Small"
                                         ScrollViewer.CanContentScroll="False"
                                         SelectedIndex="0">
                            <Fluent:ComboBox.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Fluent:GalleryPanel GroupBy="Tag"
                                                         ItemContainerGenerator="{Binding ItemContainerGenerator, RelativeSource={RelativeSource FindAncestor, AncestorType=ComboBox}}" />
                                </ItemsPanelTemplate>
                            </Fluent:ComboBox.ItemsPanel>
                            <TextBlock Text="Arial"
                                       HorizontalAlignment="Stretch"
                                       Tag="Theme Fonts" />
                            <TextBlock Text="Tahoma"
                                       Tag="Theme Fonts" />
                            <TextBlock Text="Tahoma"
                                       Tag="Recent Used Fonts" />
                            <TextBlock Text="Arial"
                                       Tag="AllFonts" />
                            <TextBlock Text="Segoe UI"
                                       Tag="AllFonts"
                                       x:Name="segoeFont" />
                            <TextBlock Text="Tahoma"
                                       Tag="AllFonts" />
                            <TextBlock Text="Webdings"
                                       Tag="AllFonts" />
                            <TextBlock Text="Winding"
                                       Tag="AllFonts" />
                        </Fluent:ComboBox>
                        <Fluent:ComboBox x:Name="comboBoxFontSize"
                                         Width="49"
                                         HorizontalAlignment="Left"
                                         Height="22"
                                         SelectedIndex="1"
                                         BorderBrush="Gainsboro"
                                         Text="12"
                                         DisplayMemberPath="Text"
                                         IsEditable="False"
                                         SizeDefinition="Small"
                                         ResizeMode="Vertical"
                                         KeyTip="FS">
                            <TextBlock Text="7" />
                            <TextBlock Text="8" />
                            <TextBlock Text="9" />
                            <TextBlock Text="10" />
                            <TextBlock Text="11" />
                            <TextBlock Text="12" />
                            <TextBlock Text="14" />
                            <TextBlock Text="16" />
                            <TextBlock Text="18" />
                            <TextBlock Text="20" />
                            <TextBlock Text="22" />
                            <TextBlock Text="24" />
                            <TextBlock Text="28" />
                            <TextBlock Text="32" />
                            <TextBlock Text="36" />
                            <TextBlock Text="48" />
                            <TextBlock Text="72" />
                        </Fluent:ComboBox>
                        <Fluent:Button KeyTip="GF"
                                       x:Name="buttonGrowFont"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />
                        <Fluent:Button x:Name="buttonShrinkFont"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ShrinkFont.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />
                        <Fluent:DropDownButton x:Name="buttonChangeCase"
                                               Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ChangeCase.png"
                                               HorizontalAlignment="Left"
                                               SizeDefinition="Small" />
                        <Fluent:Button x:Name="buttonClearFormatting"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ClearFormatting.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />
                        <Fluent:ToggleButton KeyTip="B"
                                             x:Name="buttonBold"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Bold.png"
                                             HorizontalAlignment="Left"
                                             SizeDefinition="Small" />
                        <Fluent:ToggleButton x:Name="buttonItalic"
                                             KeyTip="I"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Italic.png"
                                             HorizontalAlignment="Left"
                                             SizeDefinition="Small" />
                        <Fluent:DropDownButton x:Name="buttonUnderline"
                                               Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Underline.png"
                                               HorizontalAlignment="Left"
                                               SizeDefinition="Small" />
                        <Fluent:Button x:Name="buttonStrikethrough"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Strikethrough.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />
                        <Fluent:Button x:Name="buttonSubscript"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Subscript.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />
                        <Fluent:Button x:Name="buttonSuperscript"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Superscript.png"
                                       HorizontalAlignment="Left"
                                       SizeDefinition="Small" />

                        <!-- It's possible to create custom icon to present selected color -->
                        <Fluent:DropDownButton x:Name="buttonTextEffects"
                                               HorizontalAlignment="Left"
                                               SizeDefinition="Small">
                            <Fluent:DropDownButton.Icon>
                                <Grid>
                                    <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/TextEffects.png"
                                           Width="16"
                                           Height="16" />
                                    <Rectangle VerticalAlignment="Bottom"
                                               Height="2"
                                               Width="16"
                                               HorizontalAlignment="Center">
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding ColorViewModel.StandardColor}" />
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Fluent:DropDownButton.Icon>
                            <Fluent:ColorGallery Mode="StandardColors"
                                                 SelectedColor="{Binding ColorViewModel.StandardColor, Mode=TwoWay}" />
                            <Fluent:MenuItem Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Pink.png"
                                             Header="Custom MenuItem" />
                        </Fluent:DropDownButton>

                        <!-- The following code shows highlight colors mode for color gallery -->
                        <Fluent:DropDownButton x:Name="buttonTextHighlightColor"
                                               HorizontalAlignment="Left"
                                               SizeDefinition="Small">
                            <Fluent:DropDownButton.Icon>
                                <Grid>
                                    <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/TextHighlightColor.png"
                                           Width="16"
                                           Height="16" />
                                    <Rectangle VerticalAlignment="Bottom"
                                               Height="4"
                                               Width="16"
                                               HorizontalAlignment="Center">
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding ColorViewModel.HighlightColor}" />
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Fluent:DropDownButton.Icon>
                            <Fluent:ColorGallery Mode="HighlightColors"
                                                 SelectedColor="{Binding ColorViewModel.HighlightColor, Mode=TwoWay}"
                                                 IsAutomaticColorButtonVisible="False" />
                        </Fluent:DropDownButton>

                        <!-- The following code shows theme colors mode for color gallery -->
                        <Fluent:DropDownButton x:Name="buttonFontColor"
                                               HorizontalAlignment="Left"
                                               SizeDefinition="Small"
                                               MaxDropDownHeight="500">
                            <Fluent:DropDownButton.ToolTip>
                                <Fluent:ScreenTip Text="Test-ScreenTip to test wrong ToolTip appearence when Popup is open" />
                            </Fluent:DropDownButton.ToolTip>
                            <Fluent:DropDownButton.Icon>
                                <Grid>
                                    <Image Source="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/FontColor.png"
                                           Width="16"
                                           Height="16"
                                           SnapsToDevicePixels="True" />
                                    <Rectangle VerticalAlignment="Bottom"
                                               Height="4"
                                               Width="16"
                                               HorizontalAlignment="Center">
                                        <Rectangle.Fill>
                                            <SolidColorBrush Color="{Binding ColorViewModel.ThemeColor}" />
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Fluent:DropDownButton.Icon>
                            <Fluent:ColorGallery ThemeColorsSource="{Binding ColorViewModel.ThemeColors}"
                                                 SelectedColor="{Binding ColorViewModel.ThemeColor, Mode=TwoWay}"
                                                 Mode="ThemeColors"
                                                 StandardColorGridRows="3"
                                                 Columns="10"
                                                 ThemeColorGridRows="5"
                                                 IsNoColorButtonVisible="True" />
                        </Fluent:DropDownButton>
                    </Fluent:RibbonToolBar>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Group"
                                       Name="Group">
                    <Fluent:RibbonToolBar>
                        <!--ToolBar Layout Definitions-->
                        <Fluent:RibbonToolBar.LayoutDefinitions>

                            <!--Large Size of the RibbonToolBar-->
                            <Fluent:RibbonToolBarLayoutDefinition Size="Large">
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="spinner"
                                                                           Width="127" />
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGreen" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGray" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonYellow" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonBrown"
                                                                           Size="Middle" />
                                </Fluent:RibbonToolBarRow>
                            </Fluent:RibbonToolBarLayoutDefinition>

                            <!--Large Size of the RibbonToolBar-->
                            <Fluent:RibbonToolBarLayoutDefinition Size="Middle">
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="spinner"
                                                                           Width="90" />
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGreen" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGray" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonYellow" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonBrown" />
                                </Fluent:RibbonToolBarRow>
                            </Fluent:RibbonToolBarLayoutDefinition>

                            <!--Middle Size of the RibbonToolBar-->
                            <Fluent:RibbonToolBarLayoutDefinition Size="Small">
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="spinner"
                                                                           Width="45" />
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGreen" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonGray" />
                                </Fluent:RibbonToolBarRow>
                                <Fluent:RibbonToolBarRow>
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonYellow" />
                                    <Fluent:RibbonToolBarControlDefinition Target="buttonBrown" />
                                </Fluent:RibbonToolBarRow>
                            </Fluent:RibbonToolBarLayoutDefinition>

                        </Fluent:RibbonToolBar.LayoutDefinitions>

                        <!--ToolBar Controls-->
                        <Fluent:Spinner x:Name="spinner" />
                        <Fluent:Button x:Name="buttonGreen"
                                       Header="Green"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Green.png"
                                       LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png" />
                        <Fluent:Button x:Name="buttonGray"
                                       Header="Gray"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                       LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png" />
                        <Fluent:Button x:Name="buttonYellow"
                                       Header="Yellow"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                       LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png" />
                        <Fluent:Button x:Name="buttonBrown"
                                       Header="Brown"
                                       Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Brown.png"
                                       LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png" />
                    </Fluent:RibbonToolBar>

                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                       KeyTip="ZXB"
                                       x:Name="B"
                                       Header="Spinners"
                                       IsLauncherVisible="True"
                                       LauncherClick="OnLauncherButtonClick">
                    <Fluent:Spinner KeyTip="KA"
                                    Value="{Binding BoundSpinnerValue}"
                                    InputWidth="75"
                                    Format="0 px"
                                    Header="Left:"
                                    Icon="{DynamicResource Fluent.Ribbon.Images.Warning}"
                                    IsEnabled="False" />
                    <Fluent:Spinner KeyTip="KB"
                                    Value="{Binding BoundSpinnerValue}"
                                    InputWidth="75"
                                    Format="0 px"
                                    Header="Right:"
                                    Icon="{DynamicResource Fluent.Ribbon.Images.Warning}"
                                    SelectAllTextOnFocus="True" />
                    <Fluent:Spinner KeyTip="KC"
                                    InputWidth="75"
                                    Format="0 px"
                                    Header="Top:"
                                    Icon="{DynamicResource Fluent.Ribbon.Images.Warning}" />
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
            
            <Fluent:RibbonTabItem Header="Insert"
                                  KeyTip="I"
                                  IsSeparatorVisible="true"
                                  ReduceOrder="groupLL, groupLL, groupLL, (groupLL),(groupLL),(groupLL),(groupLL),(groupLL)">
                <Fluent:RibbonGroupBox KeyTip="FG"
                                       Header="{Binding Path=Zoom, StringFormat='{}{0} Zoom'}"
                                       IsLauncherVisible="False"
                                       x:Name="groupLL">
                    <Fluent:ComboBox IsEditable="False"
                                     InputWidth="120"
                                     Header="Fonts"
                                     ItemsSource="{Binding FontsViewModel.FontsData}"
                                     KeyTip="FD">
                        <Fluent:ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}"
                                           FontFamily="{Binding}" />
                            </DataTemplate>
                        </Fluent:ComboBox.ItemTemplate>
                    </Fluent:ComboBox>

                    <Fluent:ComboBox IsEditable="False"
                                     InputWidth="120"
                                     Header="Fonts"
                                     ItemsSource="{Binding FontsViewModel.FontsData}">
                        <Fluent:ComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel />
                            </ItemsPanelTemplate>
                        </Fluent:ComboBox.ItemsPanel>
                        <Fluent:ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}"
                                           FontFamily="{Binding}" />
                            </DataTemplate>
                        </Fluent:ComboBox.ItemTemplate>
                    </Fluent:ComboBox>

                    <Fluent:Button Header="Add item to fonts"
                                   Click="HandleAddItemToFontsClick" />

                    <Fluent:ComboBox Header="KeyboardNavigation"
                                     IsReadOnly="True"
                                     KeyTip="KET"
                                     SelectedIndex="0">
                        <Fluent:ComboBox.Menu>
                            <Fluent:RibbonMenu>
                                <Fluent:MenuItem Header="Test" />
                                <Separator />
                                <Fluent:MenuItem Header="Test" />
                            </Fluent:RibbonMenu>
                        </Fluent:ComboBox.Menu>
                        <System:String>Show All</System:String>
                        <System:String>Read-only</System:String>
                        <System:String>Writeable</System:String>
                    </Fluent:ComboBox>
                    
                    <Fluent:ComboBox Header="KeyboardNavigation" 
                                     IsEditable="False"
                                     IsReadOnly="True"
                                     KeyTip="KEF"
                                     SelectedIndex="0">
                        <Fluent:ComboBox.Menu>
                            <Fluent:RibbonMenu>
                                <Fluent:MenuItem Header="Test" />
                                <Separator />
                                <Fluent:MenuItem Header="Test" />
                            </Fluent:RibbonMenu>
                        </Fluent:ComboBox.Menu>
                        <System:String>One</System:String>
                        <System:String>Two</System:String>
                        <System:String>Three</System:String>
                    </Fluent:ComboBox>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Gallery">
                    <Fluent:InRibbonGallery x:Name="InRibbonGallery"
                                            Icon="{DynamicResource Fluent.Ribbon.Images.Warning}"
                                            Header="Split"
                                            KeyTip="S"
                                            GroupBy="Tag"
                                            ResizeMode="Both"
                                            MaxItemsInRow="2"
                                            MinItemsInRow="2"
                                            ItemWidth="40"
                                            ItemHeight="55"
                                            Width="100"
                                            MinItemsInDropDownRow="5">
                        <Fluent:InRibbonGallery.Filters>
                            <Fluent:GalleryGroupFilter Title="All"
                                                       Groups="Group1,Group2" />
                            <Fluent:GalleryGroupFilter Title="Group1"
                                                       Groups="Group1" />
                            <Fluent:GalleryGroupFilter Title="Group2"
                                                       Groups="Group2" />
                        </Fluent:InRibbonGallery.Filters>

                        <TextBlock Tag="Group1">1</TextBlock>
                        <TextBlock Tag="Group1">2</TextBlock>
                        <TextBlock Tag="Group1">3</TextBlock>
                        <TextBlock Tag="Group1">4</TextBlock>
                        <TextBlock Tag="Group1">5</TextBlock>
                        <TextBlock Tag="Group1">6</TextBlock>
                        <TextBlock Tag="Group2">1 (G 2)</TextBlock>
                        <TextBlock Tag="Group2">2 (G 2)</TextBlock>
                        <TextBlock Tag="Group2">3 (G 2)</TextBlock>
                    </Fluent:InRibbonGallery>

                    <Fluent:InRibbonGallery Header="Many items"
                                            MinItemsInDropDownRow="5"
                                            MaxItemsInDropDownRow="5"
                                            IsCollapsed="True"
                                            ItemHeight="100"
                                            ItemWidth="100"
                                            ResizeMode="Both">
                        <Fluent:GalleryItem>AAAA - First</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>BBBB</Fluent:GalleryItem>
                        <Fluent:GalleryItem>BBBB</Fluent:GalleryItem>
                        <Fluent:GalleryItem>BBBB</Fluent:GalleryItem>
                        <Fluent:GalleryItem>BBBB</Fluent:GalleryItem>
                        <Fluent:GalleryItem>BBBB</Fluent:GalleryItem>
                        <Fluent:GalleryItem>CCCC</Fluent:GalleryItem>
                        <Fluent:GalleryItem>CCCC</Fluent:GalleryItem>
                        <Fluent:GalleryItem>CCCC</Fluent:GalleryItem>
                        <Fluent:GalleryItem>CCCC</Fluent:GalleryItem>
                        <Fluent:GalleryItem>CCCC</Fluent:GalleryItem>
                        <Fluent:GalleryItem>DDDD</Fluent:GalleryItem>
                        <Fluent:GalleryItem>DDDD</Fluent:GalleryItem>
                        <Fluent:GalleryItem>DDDD</Fluent:GalleryItem>
                        <Fluent:GalleryItem>DDDD</Fluent:GalleryItem>
                        <Fluent:GalleryItem>DDDD</Fluent:GalleryItem>
                        <Fluent:GalleryItem>EEEE</Fluent:GalleryItem>
                        <Fluent:GalleryItem>EEEE</Fluent:GalleryItem>
                        <Fluent:GalleryItem>EEEE</Fluent:GalleryItem>
                        <Fluent:GalleryItem>EEEE</Fluent:GalleryItem>
                        <Fluent:GalleryItem>EEEE</Fluent:GalleryItem>
                        <Fluent:GalleryItem>FFFF</Fluent:GalleryItem>
                        <Fluent:GalleryItem>FFFF</Fluent:GalleryItem>
                        <Fluent:GalleryItem>FFFF</Fluent:GalleryItem>
                        <Fluent:GalleryItem>FFFF</Fluent:GalleryItem>
                        <Fluent:GalleryItem>FFFF</Fluent:GalleryItem>
                        <Fluent:GalleryItem>GGGG</Fluent:GalleryItem>
                        <Fluent:GalleryItem>GGGG</Fluent:GalleryItem>
                        <Fluent:GalleryItem>GGGG</Fluent:GalleryItem>
                        <Fluent:GalleryItem>GGGG</Fluent:GalleryItem>
                        <Fluent:GalleryItem>GGGG</Fluent:GalleryItem>
                        <Fluent:GalleryItem>HHHH</Fluent:GalleryItem>
                        <Fluent:GalleryItem>HHHH</Fluent:GalleryItem>
                        <Fluent:GalleryItem>HHHH</Fluent:GalleryItem>
                        <Fluent:GalleryItem>HHHH</Fluent:GalleryItem>
                        <Fluent:GalleryItem>HHHH</Fluent:GalleryItem>
                        <Fluent:GalleryItem>IIII</Fluent:GalleryItem>
                        <Fluent:GalleryItem>IIII</Fluent:GalleryItem>
                        <Fluent:GalleryItem>IIII</Fluent:GalleryItem>
                        <Fluent:GalleryItem>IIII</Fluent:GalleryItem>
                        <Fluent:GalleryItem>IIII</Fluent:GalleryItem>
                        <Fluent:GalleryItem>JJJJ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>JJJJ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>JJJJ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>JJJJ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>JJJJ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>KKKK</Fluent:GalleryItem>
                        <Fluent:GalleryItem>KKKK</Fluent:GalleryItem>
                        <Fluent:GalleryItem>KKKK</Fluent:GalleryItem>
                        <Fluent:GalleryItem>KKKK</Fluent:GalleryItem>
                        <Fluent:GalleryItem>KKKK</Fluent:GalleryItem>
                        <Fluent:GalleryItem>LLLL</Fluent:GalleryItem>
                        <Fluent:GalleryItem>LLLL</Fluent:GalleryItem>
                        <Fluent:GalleryItem>LLLL</Fluent:GalleryItem>
                        <Fluent:GalleryItem>LLLL</Fluent:GalleryItem>
                        <Fluent:GalleryItem>LLLL</Fluent:GalleryItem>
                        <Fluent:GalleryItem>MMMM</Fluent:GalleryItem>
                        <Fluent:GalleryItem>MMMM</Fluent:GalleryItem>
                        <Fluent:GalleryItem>MMMM</Fluent:GalleryItem>
                        <Fluent:GalleryItem>MMMM</Fluent:GalleryItem>
                        <Fluent:GalleryItem>MMMM</Fluent:GalleryItem>
                        <Fluent:GalleryItem>NNNN</Fluent:GalleryItem>
                        <Fluent:GalleryItem>NNNN</Fluent:GalleryItem>
                        <Fluent:GalleryItem>NNNN</Fluent:GalleryItem>
                        <Fluent:GalleryItem>NNNN</Fluent:GalleryItem>
                        <Fluent:GalleryItem>NNNN</Fluent:GalleryItem>
                        <Fluent:GalleryItem>OOOO</Fluent:GalleryItem>
                        <Fluent:GalleryItem>OOOO</Fluent:GalleryItem>
                        <Fluent:GalleryItem>OOOO</Fluent:GalleryItem>
                        <Fluent:GalleryItem>OOOO</Fluent:GalleryItem>
                        <Fluent:GalleryItem>OOOO</Fluent:GalleryItem>
                        <Fluent:GalleryItem>PPPP</Fluent:GalleryItem>
                        <Fluent:GalleryItem>PPPP</Fluent:GalleryItem>
                        <Fluent:GalleryItem>PPPP</Fluent:GalleryItem>
                        <Fluent:GalleryItem>PPPP</Fluent:GalleryItem>
                        <Fluent:GalleryItem>PPPP</Fluent:GalleryItem>
                        <Fluent:GalleryItem>QQQQ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>QQQQ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>QQQQ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>QQQQ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>QQQQ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>AAAA</Fluent:GalleryItem>
                        <Fluent:GalleryItem>YYYY</Fluent:GalleryItem>
                        <Fluent:GalleryItem>YYYY</Fluent:GalleryItem>
                        <Fluent:GalleryItem>YYYY</Fluent:GalleryItem>
                        <Fluent:GalleryItem>YYYY</Fluent:GalleryItem>
                        <Fluent:GalleryItem>YYYY</Fluent:GalleryItem>
                        <Fluent:GalleryItem>ZZZZ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>ZZZZ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>ZZZZ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>ZZZZ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>ZZZZ</Fluent:GalleryItem>
                        <Fluent:GalleryItem>Last</Fluent:GalleryItem>
                    </Fluent:InRibbonGallery>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Buttons">
                    <Fluent:Button Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Header="Enlarge"
                                   Size="Middle"
                                   Click="OnEnlargeClick" />
                    <Fluent:Button Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ShrinkFont.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ShrinkFont.png"
                                   Header="Reduce"
                                   Size="Middle"
                                   Click="OnReduceClick" />

                    <Fluent:Button Header="Button with rectangle as icon">
                        <Fluent:Button.Icon>
                            <Rectangle Fill="Green"
                                       Height="16"
                                       Width="16" />
                        </Fluent:Button.Icon>
                        <Fluent:Button.LargeIcon>
                            <Rectangle Fill="Blue"
                                       Height="32"
                                       Width="32" />
                        </Fluent:Button.LargeIcon>
                    </Fluent:Button>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Test">
                    <StackPanel Orientation="Horizontal">
                        <Fluent:SplitButton x:Name="UndoButton"
                                            KeyTip="Ctrl+Z"
                                            Header="Undo"
                                            Icon="{DynamicResource AppbarUndoIcon}"
                                            SizeDefinition="Middle,Small"
                                            Command="ApplicationCommands.Undo"
                                            FocusManager.IsFocusScope="True"
                                            CanAddButtonToQuickAccessToolBar="True"
                                            ClosePopupOnMouseDown="True">
                            <Fluent:MenuItem Description="Test" Header="My header">
                                <Fluent:MenuItem.Icon>
                                    <Rectangle Fill="Green"
                                               Height="24"
                                               Width="24" />
                                </Fluent:MenuItem.Icon>
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Undo something">
                                <Fluent:MenuItem.Icon>
                                    <Rectangle Fill="Green"
                                               Height="16"
                                               Width="16" />
                                </Fluent:MenuItem.Icon>
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Undo another thing" />
                        </Fluent:SplitButton>
                    </StackPanel>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="Tests"
                                  KeyTip="TESTS">
                <Fluent:RibbonGroupBox Header="LongLongGroup"
                                       IsLauncherVisible="False"
                                       IsSeparatorVisible="False">
                    <Fluent:CheckBox>Text 1</Fluent:CheckBox>
                    <Fluent:CheckBox>Text 2</Fluent:CheckBox>
                    <Fluent:CheckBox>Text 3</Fluent:CheckBox>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Split buttons">
                    <ToggleButton x:Name="ToggleButton">Open</ToggleButton>
                    <Popup IsOpen="{Binding ElementName=ToggleButton, Path=IsChecked}"
                           PlacementTarget="{Binding ElementName=ToggleButton}">
                        <Menu>
                            <MenuItem Header="1">
                                <MenuItem.ContextMenu>
                                    <ContextMenu>
                                        <MenuItem Header="1" />
                                    </ContextMenu>
                                </MenuItem.ContextMenu>
                                <MenuItem Header="1">
                                    <MenuItem.ContextMenu>
                                        <ContextMenu>
                                            <MenuItem Header="1" />
                                        </ContextMenu>
                                    </MenuItem.ContextMenu>
                                    <MenuItem Header="1">
                                        <MenuItem.ContextMenu>
                                            <ContextMenu>
                                                <MenuItem Header="1" />
                                            </ContextMenu>
                                        </MenuItem.ContextMenu>
                                    </MenuItem>
                                    <MenuItem Header="2">
                                        <MenuItem.ContextMenu>
                                            <ContextMenu>
                                                <MenuItem Header="1" />
                                            </ContextMenu>
                                        </MenuItem.ContextMenu>
                                    </MenuItem>
                                </MenuItem>
                                <MenuItem Header="2">
                                    <MenuItem.ContextMenu>
                                        <ContextMenu>
                                            <MenuItem Header="1" />
                                        </ContextMenu>
                                    </MenuItem.ContextMenu>
                                </MenuItem>
                            </MenuItem>
                            <MenuItem Header="2">
                                <MenuItem.ContextMenu>
                                    <ContextMenu>
                                        <MenuItem Header="1" />
                                    </ContextMenu>
                                </MenuItem.ContextMenu>
                            </MenuItem>
                        </Menu>
                    </Popup>

                    <Fluent:DropDownButton Header="Bound items gggg"
                                        ResizeMode="Both"
                                        Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Box.png"
                                        LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Box.png"
                                        ItemsSource="{Binding StringItems}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}">
                                    <TextBlock.ContextMenu>
                                        <ContextMenu>
                                            <MenuItem Header="Delete" />
                                        </ContextMenu>
                                    </TextBlock.ContextMenu>
                                </TextBlock>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </Fluent:DropDownButton>

                    <Fluent:DropDownButton Header="Dropdown (auto close on click) g"
                                           ResizeMode="Both"
                                           Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Icons/App.ico"
                                           LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Icons/App.ico"
                                           ClosePopupOnMouseDownDelay="250">
                        <Fluent:MenuItem Header="ClosePopupOnMouseDown"
                                         IsCheckable="True"
                                         IsChecked="{Binding RelativeSource={RelativeSource AncestorType=Fluent:DropDownButton}, Path=ClosePopupOnMouseDown, Mode=TwoWay}"/>
                        <Fluent:MenuItem Header="Item 1">
                            <Fluent:MenuItem.ContextMenu>
                                <ContextMenu>
                                    <MenuItem Header="Context for Item 1" />
                                </ContextMenu>
                            </Fluent:MenuItem.ContextMenu>
                            <Fluent:MenuItem Header="Item 1">
                                <Fluent:MenuItem.ContextMenu>
                                    <ContextMenu>
                                        <MenuItem Header="Context for sub Item 1" />
                                    </ContextMenu>
                                </Fluent:MenuItem.ContextMenu>
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Item 2">
                                <Fluent:MenuItem.ContextMenu>
                                    <ContextMenu>
                                        <MenuItem Header="Context for sub Item 2" />
                                    </ContextMenu>
                                </Fluent:MenuItem.ContextMenu>
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Item 3" />
                        </Fluent:MenuItem>
                        <Fluent:MenuItem Header="Item 2">
                            <Fluent:MenuItem.ContextMenu>
                                <ContextMenu>
                                    <MenuItem Header="Context for Item 2" />
                                </ContextMenu>
                            </Fluent:MenuItem.ContextMenu>
                            <Fluent:MenuItem Header="Item 1" />
                            <Fluent:MenuItem Header="Item 2" />
                            <Fluent:MenuItem Header="Item 3" />
                        </Fluent:MenuItem>
                        <Fluent:MenuItem Header="Item 3">
                            <Fluent:MenuItem Header="Item 1">
                                <Fluent:MenuItem Header="Item 1" />
                                <Fluent:MenuItem Header="Item 2" />
                                <Fluent:MenuItem Header="Item 3" />
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Item 2">
                                <Fluent:MenuItem Header="Item 1">
                                    <Fluent:MenuItem Header="Item 1" />
                                    <Fluent:MenuItem Header="Item 2" />
                                    <Fluent:MenuItem Header="Item 3" />
                                </Fluent:MenuItem>
                                <Fluent:MenuItem Header="Item 2">
                                    <Fluent:MenuItem Header="Item 1" />
                                    <Fluent:MenuItem Header="Item 2" />
                                    <Fluent:MenuItem Header="Item 3" />
                                </Fluent:MenuItem>
                                <Fluent:MenuItem Header="Item 3" />
                            </Fluent:MenuItem>
                            <Fluent:MenuItem Header="Item 3" />
                        </Fluent:MenuItem>
                        <Fluent:MenuItem Header="Item 4" />
                        <Fluent:MenuItem Header="Item 5" />
                        <Fluent:MenuItem Header="Item 6" />
                        <Fluent:MenuItem Header="Item 7" />
                        <Fluent:MenuItem Header="Item 8" />
                        <Fluent:MenuItem Header="Item 9" />
                        <Fluent:MenuItem Header="Item 10" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 11" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 12" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 13" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 14" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 15" IsCheckable="True" IsChecked="True" />
                        <Fluent:MenuItem Header="Item 16" />
                        <Fluent:MenuItem Header="Item 17" />
                        <Fluent:MenuItem Header="Item 18" />
                        <Fluent:MenuItem Header="Item 19" />
                        <Fluent:MenuItem Header="Item 20" />
                        <Fluent:MenuItem Header="Item 21" />
                        <Fluent:MenuItem Header="Item 22" />
                        <Fluent:MenuItem Header="Item 23" />
                        <Fluent:MenuItem Header="Item 24" />
                        <Fluent:MenuItem Header="Item 25" />
                    </Fluent:DropDownButton>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Vector images">
                    <Fluent:SplitButton Header="Large"
                                        SizeDefinition="Large"
                                        KeyTip="L"
                                        LargeIcon="{StaticResource VectorImageSample}" />

                    <Fluent:SplitButton Header="Middle"
                                        SizeDefinition="Middle"
                                        KeyTip="M"
                                        Icon="{StaticResource VectorImageSample}" />

                    <Fluent:SplitButton Header="Small"
                                        SizeDefinition="Small"
                                        KeyTip="S"
                                        Icon="{StaticResource VectorImageSample}" />

                    <Fluent:SplitButton Header="Large"
                                        SizeDefinition="Large"
                                        IsButtonEnabled="False"
                                        LargeIcon="{StaticResource VectorImageSample}" />

                    <Fluent:SplitButton Header="Middle"
                                        SizeDefinition="Middle"
                                        IsButtonEnabled="False"
                                        Icon="{StaticResource VectorImageSample}" />

                    <Fluent:SplitButton Header="Small"
                                        SizeDefinition="Small"
                                        IsButtonEnabled="False"
                                        Icon="{StaticResource VectorImageSample}" />

                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Grouped SplitButton">
                    <Fluent:SplitButton Header="Split 1"
                                        IsCheckable="True"
                                        IsChecked="True"
                                        Icon="{iconPacks:Material Kind=Cog}"
                                        LargeIcon="{iconPacks:Material Kind=Cog}"
                                        GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Group2}">
                        <Fluent:MenuItem Header="First (with icon)" 
                                         IsCheckable="True"
                                         IsChecked="True"
                                         Icon="Images/Pink.png"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=MenuItemGroup1}" />
                        <Fluent:MenuItem Header="Second" 
                                         IsCheckable="True"
                                         IsChecked="True"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=MenuItemGroup1}" />
                        <Fluent:MenuItem Header="Third" 
                                         IsCheckable="True"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=MenuItemGroup1}" />
                    </Fluent:SplitButton>
                    <Fluent:SplitButton Header="Split 2"
                                        IsCheckable="True"
                                        GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter},ConverterParameter=Group2}" />
                    <Fluent:SplitButton Header="Split 3"
                                        IsCheckable="True"
                                        GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter},ConverterParameter=Group2}" />
                </Fluent:RibbonGroupBox>
               
                <Fluent:RibbonGroupBox Header="Grouped ToggleButton">
                    <Fluent:ToggleButton Header="Toggle 1"
                                         KeyTip="T1"
                                         Icon="{iconPacks:Material Kind=Cog}"
                                         LargeIcon="{iconPacks:Material Kind=Cog}"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Group3}" />
                    <Fluent:ToggleButton Header="Toggle 2"
                                         KeyTip="T2"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter},ConverterParameter=Group3}" />
                    <Fluent:ToggleButton Header="Toggle 3"
                                         KeyTip="T3"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter},ConverterParameter=Group3}"
                                         IsChecked="{Binding Path=IsCheckedToggleButton3}" />

                    <Fluent:DropDownButton Header="ToggleButton width test">
                        <Grid ShowGridLines="True">
                            <Grid.Resources>
                                <Style TargetType="{x:Type Fluent:ToggleButton}">
                                    <Setter Property="GroupName"
                                            Value="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=MonthsGroup}" />
                                    <Setter Property="Width"
                                            Value="100" />
                                </Style>
                            </Grid.Resources>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Fluent:ToggleButton Grid.Column="0">January</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="1">February</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="2">March</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="3">April</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="4">May</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="5">June</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="6">July</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="7">August</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="8">September</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="9">October</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="10">November</Fluent:ToggleButton>
                            <Fluent:ToggleButton Grid.Column="11">December</Fluent:ToggleButton>
                        </Grid>
                    </Fluent:DropDownButton>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox>
                    <Fluent:ToggleButton x:Name="ShowDetailButton"
                                         Header="Detail" />
                    <Fluent:ToggleButton x:Name="ShowMoreButton"
                                         Header="More" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="SharedSizeScope"
                                       Grid.IsSharedSizeScope="True">
                    <Fluent:ComboBox Header="Many items"
                                     InputWidth="120"
                                     ResizeMode="Both"
                                     ItemsSource="{Binding Path=ManyItems}">
                        <Fluent:ComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel />
                            </ItemsPanelTemplate>
                        </Fluent:ComboBox.ItemsPanel>
                    </Fluent:ComboBox>

                    <Fluent:TextBox Header="My short header" />
                    <Fluent:Spinner Header="My long long header" />

                    <Fluent:ComboBox Header="Excluded from size sharing" Fluent:RibbonGroupBoxWrapPanel.ExcludeFromSharedSize="True" />
                    <Fluent:Spinner Header="My short header" />
                    <Fluent:ComboBox Header="My long long header" />

                    <Separator Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}" />

                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120"
                                     Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}">
                        <Fluent:ComboBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel />
                            </ItemsPanelTemplate>
                        </Fluent:ComboBox.ItemsPanel>
                        <ComboBoxItem>Test</ComboBoxItem>
                    </Fluent:ComboBox>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox>
                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120" />
                    <Separator />

                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120"
                                     Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Visibility="{Binding IsChecked, ElementName=ShowMoreButton, Converter={StaticResource boolToVisibilityConverter}}">
                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120" />

                    <Separator Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}" />

                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120"
                                     Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Visibility="{Binding IsChecked, ElementName=ShowMoreButton, Converter={StaticResource boolToVisibilityConverter}}">
                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120" />
                    <Separator />

                    <Fluent:ComboBox Header="Test"
                                     InputWidth="120"
                                     Visibility="{Binding IsChecked, ElementName=ShowDetailButton, Converter={StaticResource boolToVisibilityConverter}}" />
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <!--To define reducing of InRibbonGalleries
              you must use special syntax (see below). 
              Each time when group name in brackets is received 
              it will reduce all InRibbonGalleries in this group by one item-->
            <Fluent:RibbonTabItem Header="Galleries"
                                  KeyTip="GA"
                                  ReduceOrder="(FirstGalleryGroup),(FirstGalleryGroup),(FirstGalleryGroup),(FirstGalleryGroup),(FirstGalleryGroup),(SecondGalleryGroup),(SecondGalleryGroup),(SecondGalleryGroup),(SecondGalleryGroup),(A),(A),(A),(A),(A),(A),(A),(A),(A),(A)">
                <Fluent:RibbonGroupBox Header="Without Grouping"
                                       Name="FirstGalleryGroup">

                    <!--You can use Gallery in ContextMenu. 
                  Below we insert Gallery in DropDownButton's context menu
                  We set ItemsSource and ItemTemplate.-->
                    <Fluent:DropDownButton Name="dropDownGreen"
                                           Header="DropDownButton"
                                           Icon="Images\Green.png"
                                           LargeIcon="Images\GreenLarge.png">
                        <Fluent:Gallery ItemsSource="{Binding DataItems}"
                                        ItemContainerStyle="{DynamicResource GalleryItemStyleWithCustomContextMenu}"
                                        ItemTemplate="{DynamicResource middleDataItemTemplate}"
                                        MaxItemsInRow="3" />
                        <Fluent:MenuItem Icon="Images\Pink.png"
                                         Header="Pink" />
                    </Fluent:DropDownButton>

                    <Fluent:Button Header="Refresh (Galleries)"
                                   Icon="Images\Green.png"
                                   LargeIcon="Images\GreenLarge.png"
                                   Command="{Binding GalleryViewModel.RefreshCommand}" />

                    <!--Though, you may set children of the Gallery explicitly -->
                    <Fluent:DropDownButton Header="Pink"
                                           Icon="Images\Pink.png"
                                           LargeIcon="Images\PinkLarge.png">
                        <Fluent:Gallery>
                            <Image Source="Images\RedLarge.png"
                                   Stretch="None" />
                            <Image Source="Images\GreenLarge.png"
                                   Stretch="None" />
                            <Image Source="Images\BlueLarge.png"
                                   Stretch="None" />
                        </Fluent:Gallery>
                    </Fluent:DropDownButton>

                    <!--InRibbonGallery-->
                    <Fluent:InRibbonGallery MinItemsInRow="3"
                                            MaxItemsInRow="5"
                                            MaxItemsInDropDownRow="2"
                                            Icon="Images\Gray.png"
                                            Header="InRibbonGallery"
                                            ItemWidth="40"
                                            ItemHeight="56"
                                            ItemsSource="{Binding DataItems}"
                                            ItemTemplate="{DynamicResource largeDataItemTemplate}"
                                            ResizeMode="Both"
                                            Selectable="False">
                        <!--You can also add items to context menu-->
                        <Fluent:InRibbonGallery.Menu>
                            <Fluent:RibbonMenu>
                                <Fluent:MenuItem Header="Menu Item 1" />
                                <Fluent:MenuItem Header="Menu Item 2" />
                            </Fluent:RibbonMenu>
                        </Fluent:InRibbonGallery.Menu>
                    </Fluent:InRibbonGallery>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="With Grouping"
                                       Name="SecondGalleryGroup">

                    <!--To group items in Gallery (or InRibbonGallery) you can use GroupBy for simplified grouping method or use traditional method as in System.Windows.Controls.ListBox -->
                    <Fluent:InRibbonGallery Name="gallerySampleInRibbonGallery"
                                            MinItemsInRow="1"
                                            MaxItemsInRow="5"
                                            Icon="Images\Gray.png"
                                            Header="Grouped"
                                            ItemWidth="52"
                                            ItemHeight="18"
                                            ItemsSource="{Binding DataItems}"
                                            ItemTemplate="{DynamicResource middleDataItemTemplate}"
                                            GroupBy="Group"
                                            ResizeMode="Both">
                        <Fluent:InRibbonGallery.Filters>
                            <Fluent:GalleryGroupFilter Title="All"
                                                       Groups="Group A,Group B"
                                                       x:Name="galleryFilterAll" />
                            <Fluent:GalleryGroupFilter Title="Group A"
                                                       Groups="Group A" />
                            <Fluent:GalleryGroupFilter Title="Group B"
                                                       Groups="Group B" />
                        </Fluent:InRibbonGallery.Filters>
                    </Fluent:InRibbonGallery>

                    <!--To group items in Gallery (or InRibbonGallery) you can use GroupedByAdvanced as an advanced grouping method -->
                    <Fluent:InRibbonGallery MinItemsInRow="1"
                                            MaxItemsInRow="5"
                                            Icon="Images\Gray.png"
                                            Header="GroupedByAdvanced"
                                            ItemWidth="52"
                                            ItemHeight="18"
                                            ItemsSource="{Binding DataItems}"
                                            ItemTemplate="{DynamicResource middleDataItemTemplate}"
                                            GroupByAdvanced="{Binding GroupByAdvancedSample}"
                                            ResizeMode="Both">
                    </Fluent:InRibbonGallery>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                       x:Name="A"
                                       KeyTip="A"
                                       Header="Galleries"
                                       IsLauncherVisible="True"
                                       LauncherKeys="GAL"
                                       LauncherClick="OnLauncherButtonClick">
                    <Fluent:InRibbonGallery Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                            LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GalleryLarge.png"
                                            Header="In-Ribbon Gallery"
                                            KeyTip="JS"
                                            ItemsSource="{Binding GalleryViewModel.Items}"
                                            SelectedFilter="{Binding ElementName=GalleryFilterAll}"
                                            ResizeMode="Both"
                                            MinItemsInRow="2"
                                            MaxItemsInRow="10"
                                            IsCollapsed="False"
                                            SizeDefinition="Large"
                                            Orientation="Horizontal"
                                            ItemHeight="56"
                                            GroupBy="Group"
                                            CanCollapseToButton="True"
                                            MinItemsInDropDownRow="4"
                                            MaxItemsInDropDownRow="5">
                        <Fluent:InRibbonGallery.Filters>
                            <Fluent:GalleryGroupFilter Title="All"
                                                       Groups="Group 1,Group 2"
                                                       x:Name="GalleryFilterAll" />
                            <Fluent:GalleryGroupFilter Title="Group 1 L"
                                                       Groups="Group 1" />
                            <Fluent:GalleryGroupFilter Title="Group 2 L"
                                                       Groups="Group 2" />
                        </Fluent:InRibbonGallery.Filters>
                        <Fluent:InRibbonGallery.ItemContainerStyle>
                            <Style TargetType="{x:Type Fluent:GalleryItem}">
                                <Setter Property="PreviewCommand"
                                        Value="{Binding DataContext.PreviewCommand, RelativeSource={RelativeSource AncestorType={x:Type Fluent:InRibbonGallery}}}" />
                                <Setter Property="CancelPreviewCommand"
                                        Value="{Binding DataContext.CancelPreviewCommand, RelativeSource={RelativeSource AncestorType={x:Type Fluent:InRibbonGallery}}}" />
                            </Style>
                        </Fluent:InRibbonGallery.ItemContainerStyle>
                        <Fluent:InRibbonGallery.ItemTemplate>
                            <DataTemplate DataType="{x:Type viewModels:GalleryItemViewModel}">
                                <Border BorderThickness="1"
                                        BorderBrush="Aqua">
                                    <TextBlock HorizontalAlignment="Center"
                                               VerticalAlignment="Center"
                                               Text="{Binding Text}" />
                                </Border>
                            </DataTemplate>
                        </Fluent:InRibbonGallery.ItemTemplate>
                    </Fluent:InRibbonGallery>

                    <Fluent:SplitButton Icon="{DynamicResource Fluent.Ribbon.Images.DefaultPlaceholder}"
                                        LargeIcon="/Images/GalleryLarge.png"
                                        Header="Split"
                                        KeyTip="S"
                                        Click="OnSplitClick"
                                        ResizeMode="Both"
                                        SizeDefinition="Large"
                                        MaxDropDownHeight="1000"
                                        DropDownHeight="300">
                        <Fluent:Gallery MinHeight="60"
                                        MinItemsInRow="2"
                                        MaxItemsInRow="6"
                                        ItemWidth="128"
                                        ItemHeight="128">
                            <Border Tag="Group1"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">1</TextBlock>
                            </Border>
                            <Border Tag="Group1"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">2</TextBlock>
                            </Border>
                            <Border Tag="Group1"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">3</TextBlock>
                            </Border>
                            <Border Tag="Group2"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">4</TextBlock>
                            </Border>
                            <Border Tag="Group2"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">5</TextBlock>
                            </Border>
                            <Border Tag="Group2"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">6</TextBlock>
                            </Border>
                            <Border Tag="Group2"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">7</TextBlock>
                            </Border>
                            <Border Tag="Group3"
                                    BorderThickness="1"
                                    BorderBrush="Aqua">
                                <TextBlock HorizontalAlignment="Center"
                                           VerticalAlignment="Center">8</TextBlock>
                            </Border>
                        </Fluent:Gallery>

                        <Fluent:MenuItem Header="Item5"
                                         KeyTip="R">
                            <Fluent:MenuItem Header="Itemq"
                                             KeyTip="A" />
                            <Fluent:MenuItem Header="Itemw"
                                             KeyTip="B" />
                            <Fluent:MenuItem Header="Item5"
                                             KeyTip="R"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/ChangeCase.png">
                                <Fluent:MenuItem Header="Itemq"
                                                 KeyTip="A"
                                                 MaxDropDownHeight="350">
                                    <Fluent:Gallery MinHeight="60"
                                                    MinItemsInRow="3"
                                                    MaxItemsInRow="6"
                                                    ItemWidth="28"
                                                    ItemHeight="28">
                                        <Border Tag="Group1"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">1</TextBlock>
                                        </Border>
                                        <Border Tag="Group1"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">2</TextBlock>
                                        </Border>
                                        <Border Tag="Group1"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">3</TextBlock>
                                        </Border>
                                        <Border Tag="Group2"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">4</TextBlock>
                                        </Border>
                                        <Border Tag="Group2"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">5</TextBlock>
                                        </Border>
                                        <Border Tag="Group2"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">6</TextBlock>
                                        </Border>
                                        <Border Tag="Group2"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">7</TextBlock>
                                        </Border>
                                        <Border Tag="Group3"
                                                BorderThickness="1"
                                                BorderBrush="Aqua">
                                            <TextBlock HorizontalAlignment="Center"
                                                       VerticalAlignment="Center">8</TextBlock>
                                        </Border>
                                    </Fluent:Gallery>
                                </Fluent:MenuItem>
                                <Fluent:MenuItem Header="Itemw"
                                                 KeyTip="B" />
                                <Fluent:MenuItem Header="Item5"
                                                 KeyTip="R">
                                    <Fluent:MenuItem Header="Itemq"
                                                     KeyTip="A"
                                                     IsCheckable="True"
                                                     GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=ABC}" />
                                    <Fluent:MenuItem Header="Itemw"
                                                     KeyTip="B"
                                                     IsCheckable="True"
                                                     GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=ABC}" />
                                    <Fluent:MenuItem Header="Iteme"
                                                     KeyTip="C"
                                                     IsCheckable="True"
                                                     GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=ABC}"
                                                     IsChecked="True" />
                                </Fluent:MenuItem>
                            </Fluent:MenuItem>
                        </Fluent:MenuItem>
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                        <Fluent:MenuItem Header="Item" />
                    </Fluent:SplitButton>
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="Vertical">
                    <Fluent:InRibbonGallery Orientation="Vertical" 
                                            MaxItemsInDropDownRow="2"
                                            Icon="Images\Gray.png"
                                            Header="InRibbonGallery"
                                            ItemWidth="40"
                                            ItemHeight="56"
                                            ItemsSource="{Binding DataItems}"
                                            ItemTemplate="{DynamicResource largeDataItemTemplate}"
                                            ResizeMode="Both"
                                            Selectable="False">
                        <!--You can also add items to context menu-->
                        <Fluent:InRibbonGallery.Menu>
                            <Fluent:RibbonMenu>
                                <Fluent:MenuItem Header="Menu Item 1" />
                                <Fluent:MenuItem Header="Menu Item 2" />
                            </Fluent:RibbonMenu>
                        </Fluent:InRibbonGallery.Menu>
                    </Fluent:InRibbonGallery>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="Resizing &amp; Screentips"
                                  KeyTip="RS"
                                  ReduceOrder="Default,Default,Default,Large,Large,Large,Other,Other,Other">

                <!--All group can be in four state: Large->Middle->Small->Collapsed
                    By default group in Large state. When group changes its state it 
                    changes size of all its controls.
      
                    RibbonTabItem has ReduceOrder property. 
                    This property defines order of group to reduce.
                    You can enumerate group names from the last to first to reduce.
          
                    All ribbon contols (Buttons, DropDownButtons, Spinners and so on) 
                    have SizeDefinition property. You can define which size will be used 
                    when group will be in particular state. 
          
                    For example, if you set SizeDefinition = "Middle, Middle, Small"
                    That means:
          
                    Large State of the group -> Middle size of the control
                    Middle State of the group -> Middle size of the control
                    Small State of the group -> Small size of the control
                    -->

                <!--By default ReduceOrder="Large, Middle, Small"-->
                <Fluent:RibbonGroupBox Name="Default"
                                       Header="Default Behaviour">
                    <!--To use ScreenTip you have to create it and set to ToolTip property-->
                    <Fluent:Button Header="Green"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Green.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png">
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip Title="Green"
                                              HelpTopic="Help for Green ScreenTip"
                                              Image="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png"
                                              Text="This ScreenTip is ribbon aligned. &#x0a;It has the image and handles F1." />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>
                    <!--ScreenTip is able to be shown on disabled controls-->
                    <Fluent:Button Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   IsEnabled="False">
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip Title="Brown"
                                              Width="250"
                                              Image="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png"
                                              Text="This control is disabled and has fixed width 250px"
                                              HelpTopic="Help for Brown ScreenTip"
                                              DisableReason="This control is disabled to show 'disable reason' section" />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>
                    <!--Set IsRibbonAligned property to false to suppress aligment to ribbon bottom-->
                    <Fluent:Button Header="Yellow"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png">
                        <Fluent:Button.ToolTip>
                            <Fluent:ScreenTip Title="Gray"
                                              IsRibbonAligned="False"
                                              Text="This ScreenTip is NOT aligned to ribbon bottom" />
                        </Fluent:Button.ToolTip>
                    </Fluent:Button>
                    <!--You can use usual ToolTip-->
                    <Fluent:Button Header="Brown"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Brown.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png"
                                   ToolTip="Regular Tooltip" />
                </Fluent:RibbonGroupBox>

                <!--You can set short form (for ex, "Middle" is equal "Middle,Middle,Middle")-->
                <Fluent:RibbonGroupBox Name="Large"
                                       Header="Large Only">
                    <Fluent:Button SizeDefinition="Large"
                                   Header="Green"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Green.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png" />
                    <Fluent:Button SizeDefinition="Large"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png" />
                    <Fluent:Button SizeDefinition="Large"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png" />
                    <Fluent:Button SizeDefinition="Large"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Brown.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Name="Other"
                                       Header="Other">
                    <Fluent:Button SizeDefinition="Large, Large, Large"
                                   Header="Green"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Green.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png" />
                    <Fluent:Button SizeDefinition="Large, Large, Small"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png" />
                    <Fluent:Button SizeDefinition="Middle, Small, Small"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png" />
                    <Fluent:Button SizeDefinition="Middle, Small, Small"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Brown.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png" />
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="KeyTips"
                                  KeyTip="K"
                                  Group="{Binding ElementName=tabGroup1, Mode=OneWay}"
                                  BorderBrush="{DynamicResource Fluent.Ribbon.Brushes.AccentBaseColorBrush}">
                <Fluent:RibbonGroupBox Header="LongLongGroup"
                                       IsLauncherVisible="False">
                    <Fluent:DropDownButton Fluent:KeyTip.Keys="C"
                                           Header="Test3"
                                           Size="Middle">
                        <Fluent:Button Header="Test4"
                                       Size="Middle"
                                       Fluent:KeyTip.Keys="A"/>
                        <Fluent:Button Header="Test5"
                                       Size="Middle"
                                       Fluent:KeyTip.Keys="B"/>
                    </Fluent:DropDownButton>
                    <Fluent:RadioButton Header="Test-Radio 1"
                                        GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Test-Radio}"
                                        IsChecked="True" />
                    <Fluent:RadioButton Header="Test-Radio 2"
                                        GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Test-Radio}"
                                        IsChecked="False" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox Header="KeyTips on templated items">
                    <Fluent:RibbonGroupBox.Resources>
                        <TemplateSelectors:DynamicTemplateSelector x:Key="DynamicTemplateSelector" />
                        <System:Int32 x:Key="TemplateTestContent">0</System:Int32>
                    </Fluent:RibbonGroupBox.Resources>
                    <ContentPresenter ContentTemplateSelector="{StaticResource DynamicTemplateSelector}"
                                      Content="{StaticResource TemplateTestContent}">
                        <TemplateSelectors:DynamicTemplateSelector.TemplatesCollection>
                            <Helpers:TemplateCollection>
                                <DataTemplate DataType="{x:Type System:Int32}">
                                    <Fluent:Button Header="Template test"
                                                   KeyTip="B" />
                                </DataTemplate>
                            </Helpers:TemplateCollection>
                        </TemplateSelectors:DynamicTemplateSelector.TemplatesCollection>
                    </ContentPresenter>
                </Fluent:RibbonGroupBox>

                <!--It is enough to set attached property Fluent:KeyTip.Keys and
                    the ribbon will move and show the keytips automatically.
                    It is possible to set keytips to menu and/or submenu items.
                    Also you need to set keytip for groups to open it while it is collapsed state -->
                <Fluent:RibbonGroupBox Fluent:KeyTip.Keys="ZC"
                                       Header="Normal KeyTips"
                                       Name="ZC">
                    <Fluent:SplitButton Fluent:KeyTip.Keys="R"
                                        Header="Red"
                                        Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Red.png"
                                        LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/RedLarge.png"
                                        SizeDefinition="Large">
                        <Fluent:MenuItem Fluent:KeyTip.Keys="P"
                                         Header="Pink"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Pink.png" />
                        <Fluent:MenuItem Fluent:KeyTip.Keys="R"
                                         Header="Red"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Red.png">
                            <Fluent:MenuItem Fluent:KeyTip.Keys="O"
                                             Header="Orange"
                                             Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Orange.png" />
                        </Fluent:MenuItem>
                    </Fluent:SplitButton>
                    <Fluent:Button Fluent:KeyTip.Keys="G"
                                   Header="Grey"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   SizeDefinition="Large" />
                    <Fluent:Button Fluent:KeyTip.Keys="O"
                                   Header="Orange"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Orange.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/OrangeLarge.png"
                                   SizeDefinition="Large" />
                    <Fluent:Button Fluent:KeyTip.Keys="P"
                                   Header="Pink"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Pink.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/PinkLarge.png"
                                   SizeDefinition="Large" />
                    <Fluent:Button Fluent:KeyTip.Keys="Y"
                                   Header="Yellow"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png"
                                   SizeDefinition="Large" />
                    <Fluent:Button Fluent:KeyTip.Keys="B"
                                   Header="Brown"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Brown.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/BrownLarge.png"
                                   SizeDefinition="Large" />
                    <Fluent:Button Fluent:KeyTip.Keys="X1"
                                   Header="Gray"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   SizeDefinition="Middle" />
                    <Fluent:Button Fluent:KeyTip.Keys="X2"
                                   Header="Gray"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   SizeDefinition="Middle" />
                    <Fluent:Button Fluent:KeyTip.Keys="X3"
                                   Header="Gray"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   SizeDefinition="Middle" />

                    <Fluent:SplitButton Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                        Header="Always middle"
                                        Fluent:KeyTip.Keys="X4">
                        <Fluent:SplitButton.SizeDefinition>
                            <Fluent:RibbonControlSizeDefinition Large="Middle"
                                                                Middle="Middle" />
                        </Fluent:SplitButton.SizeDefinition>

                        <Fluent:MenuItem Header="Menu 1"
                                         IsChecked="True"
                                         IsCheckable="True" />

                        <Fluent:MenuItem Header="Menu 2"
                                         IsCheckable="True" />

                    </Fluent:SplitButton>

                    <Fluent:SplitButton Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                        Header="Always small"
                                        Fluent:KeyTip.Keys="X4">
                        <Fluent:SplitButton.SizeDefinition>
                            <Fluent:RibbonControlSizeDefinition Large="Small"
                                                                Middle="Small" />
                        </Fluent:SplitButton.SizeDefinition>

                        <Fluent:MenuItem Header="Menu 1" />
                        <Fluent:MenuItem Header="Menu 2" />

                    </Fluent:SplitButton>
                </Fluent:RibbonGroupBox>

                <!--Additionally you have properties to arrange key tips as you wish.
                    In this case you have to set Fluent:KeyTip.AutoPlacement to false
                    You can use 
                        Fluent:KeyTip.HorizontalAlignment
                        Fluent:KeyTip.VerticalAlignment
                        Fluent:KeyTip.Margin -->
                <Fluent:RibbonGroupBox Header="Custom KeyTip placement">
                    <Fluent:Button Header="Center"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Green.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GreenLarge.png"
                                   Fluent:KeyTip.AutoPlacement="False"
                                   Fluent:KeyTip.HorizontalAlignment="Center"
                                   Fluent:KeyTip.VerticalAlignment="Center"
                                   Fluent:KeyTip.Keys="C" />
                    <Fluent:Button Header="Left"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Gray.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrayLarge.png"
                                   Fluent:KeyTip.AutoPlacement="False"
                                   Fluent:KeyTip.HorizontalAlignment="Left"
                                   Fluent:KeyTip.VerticalAlignment="Center"
                                   Fluent:KeyTip.Keys="L" />
                    <Fluent:Button Header="Top"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png"
                                   Fluent:KeyTip.AutoPlacement="False"
                                   Fluent:KeyTip.HorizontalAlignment="Center"
                                   Fluent:KeyTip.VerticalAlignment="Top"
                                   Fluent:KeyTip.Keys="T" />
                    <Fluent:Button Header="Left, Top, Margin"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Yellow.png"
                                   LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/YellowLarge.png"
                                   Fluent:KeyTip.AutoPlacement="False"
                                   Fluent:KeyTip.HorizontalAlignment="Left"
                                   Fluent:KeyTip.VerticalAlignment="Top"
                                   Fluent:KeyTip.Margin="40,0,0,0"
                                   Fluent:KeyTip.Keys="LTM" />                    
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="Binding"
                                  KeyTip="B"
                                  Group="{Binding ElementName=tabGroup2, Mode=OneWay}">
                <Fluent:RibbonGroupBox Header="Bound ItemsSource"
                                       ItemsSource="{Binding DataItems}"
                                       ItemTemplate="{DynamicResource GallerySampleDataItemCommandTemplate}" />
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="LAYOUT"
                                  KeyTip="L"
                                  ActiveTabBackground="#FF9D00"
                                  Group="{Binding ElementName=tabGroup2, Mode=OneWay}">
                <Fluent:RibbonGroupBox Header="LongLongGroup"
                                       IsLauncherVisible="False">
                    <DatePicker />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox x:Name="xxx"
                                       Header="LongLongGroup"
                                       IsLauncherVisible="True"
                                       LauncherCommand="Paste"
                                       LauncherClick="OnLauncherButtonClick">
                    <Fluent:Button Header="Button"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Command="ApplicationCommands.Paste" />
                    <Fluent:Button Header="Button"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Command="ApplicationCommands.Paste" />
                    <Separator />
                    <Fluent:Button Header="Button"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Command="ApplicationCommands.Paste" />
                    <Fluent:Button Header="Button"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Command="ApplicationCommands.Paste" />
                    <Separator />
                    <Fluent:Button Header="Button"
                                   Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                   Command="ApplicationCommands.Paste" />
                </Fluent:RibbonGroupBox>

                <Fluent:RibbonGroupBox>
                    <Fluent:ToggleButton Header="Pause"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png"
                                         SizeDefinition="Middle"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Group1}" />
                    <Fluent:ToggleButton Header="Button long text ggggggg gggg"
                                         LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Test32.png"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Test16.png"
                                         SizeDefinition="Middle"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Group1}" />
                    <Separator />
                    <Fluent:ToggleButton Header="Button long text ggggggg gggg"
                                         LargeIcon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Test32.png"
                                         Icon="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/Test16.png"
                                         GroupName="{Binding Converter={StaticResource UniqueGroupNameConverter}, ConverterParameter=Group1}" />
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>

            <Fluent:RibbonTabItem Header="MUST BE HIDDEN"
                                  KeyTip="M"
                                  Group="{Binding ElementName=invisibleTabGroup, Mode=OneWay}"
                                  Visibility="Collapsed">
                <Fluent:RibbonGroupBox Header="MUST BE HIDDEN"
                                       IsLauncherVisible="False"
                                       Visibility="Collapsed" />
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>

        <TabControl Grid.Row="1"
                    BorderThickness="0"
                    Background="Transparent">
            <TabControl.Resources>
                <Style x:Key="{x:Type Fluent:Button}"
                       TargetType="{x:Type Fluent:Button}">
                    <Setter Property="BorderBrush"
                            Value="{DynamicResource Fluent.Ribbon.Brushes.AccentColorBrush80}" />
                    <Setter Property="BorderThickness"
                            Value="1" />
                </Style>
                
                <Style x:Key="TabItemFocusVisual">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="3,3,3,1"
                                           StrokeThickness="1"
                                           Stroke="Black"
                                           StrokeDashArray="1 2"
                                           SnapsToDevicePixels="true"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                
                <SolidColorBrush x:Key="TabControlNormalBorderBrush"
                                 Color="#8C8E94"/>
                
                <SolidColorBrush x:Key="TabItemHotBackground"
                                 Color="{DynamicResource Fluent.Ribbon.Colors.AccentColor60}"/>
                <SolidColorBrush x:Key="TabItemSelectedBackground"
                                 Color="{DynamicResource Gray7}"/>
                <SolidColorBrush x:Key="TabItemDisabledBackground"
                                 Color="{DynamicResource Gray9}"/>
                <SolidColorBrush x:Key="TabItemHotBorderBrush"
                                 Color="{DynamicResource Fluent.Ribbon.Colors.AccentColor80}"/>
                <SolidColorBrush x:Key="TabItemDisabledBorderBrush"
                                 Color="{DynamicResource Gray10}"/>

                <Style x:Key="{x:Type TabItem}"
                       TargetType="{x:Type TabItem}">
                    <Setter Property="FocusVisualStyle"
                            Value="{StaticResource TabItemFocusVisual}"/>
                    <Setter Property="Padding"
                            Value="6,1,6,1"/>
                    <Setter Property="BorderBrush"
                            Value="{StaticResource TabControlNormalBorderBrush}"/>
                    <Setter Property="Background"
                            Value="{DynamicResource WhiteBrush}" />
                    <Setter Property="Foreground"
                            Value="{DynamicResource BlackBrush}" />
                    <Setter Property="HorizontalContentAlignment"
                            Value="Stretch"/>
                    <Setter Property="VerticalContentAlignment"
                            Value="Stretch"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Grid SnapsToDevicePixels="true">
                                    <Border Name="Bd"
                                            Padding="{TemplateBinding Padding}"
                                            BorderBrush="{TemplateBinding BorderBrush}"
                                            Background="{TemplateBinding Background}"
                                            BorderThickness="1,1,1,0">
                                        <ContentPresenter Name="Content"
                                                          ContentSource="Header"
                                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                          HorizontalAlignment="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                                          VerticalAlignment="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
                                                          RecognizesAccessKey="True"/>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver"
                                             Value="true">
                                        <Setter TargetName="Bd"
                                                Property="Background"
                                                Value="{StaticResource TabItemHotBackground}"/>
                                    </Trigger>
                                    <Trigger Property="IsSelected"
                                             Value="true">
                                        <Setter Property="Panel.ZIndex"
                                                Value="1"/>
                                        <Setter TargetName="Bd"
                                                Property="Background"
                                                Value="{StaticResource TabItemSelectedBackground}"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected"
                                                       Value="false"/>
                                            <Condition Property="IsMouseOver"
                                                       Value="true"/>
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="Bd"
                                                Property="BorderBrush"
                                                Value="{StaticResource TabItemHotBorderBrush}"/>
                                    </MultiTrigger>
                                    <Trigger Property="TabStripPlacement"
                                             Value="Bottom">
                                        <Setter TargetName="Bd"
                                                Property="BorderThickness"
                                                Value="1,0,1,1"/>
                                    </Trigger>
                                    <Trigger Property="TabStripPlacement"
                                             Value="Left">
                                        <Setter TargetName="Bd"
                                                Property="BorderThickness"
                                                Value="1,1,0,1"/>
                                    </Trigger>
                                    <Trigger Property="TabStripPlacement"
                                             Value="Right">
                                        <Setter TargetName="Bd"
                                                Property="BorderThickness"
                                                Value="0,1,1,1"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected"
                                                       Value="true"/>
                                            <Condition Property="TabStripPlacement"
                                                       Value="Top"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Margin"
                                                Value="-2,-2,-2,-1"/>
                                        <Setter TargetName="Content"
                                                Property="Margin"
                                                Value="0,0,0,1"/>
                                    </MultiTrigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected"
                                                       Value="true"/>
                                            <Condition Property="TabStripPlacement"
                                                       Value="Bottom"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Margin"
                                                Value="-2,-1,-2,-2"/>
                                        <Setter TargetName="Content"
                                                Property="Margin"
                                                Value="0,1,0,0"/>
                                    </MultiTrigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected"
                                                       Value="true"/>
                                            <Condition Property="TabStripPlacement"
                                                       Value="Left"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Margin"
                                                Value="-2,-2,-1,-2"/>
                                        <Setter TargetName="Content"
                                                Property="Margin"
                                                Value="0,0,1,0"/>
                                    </MultiTrigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected"
                                                       Value="true"/>
                                            <Condition Property="TabStripPlacement"
                                                       Value="Right"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Margin"
                                                Value="-1,-2,-2,-2"/>
                                        <Setter TargetName="Content"
                                                Property="Margin"
                                                Value="1,0,0,0"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled"
                                             Value="false">
                                        <Setter TargetName="Bd"
                                                Property="Background"
                                                Value="{StaticResource TabItemDisabledBackground}"/>
                                        <Setter TargetName="Bd"
                                                Property="BorderBrush"
                                                Value="{StaticResource TabItemDisabledBorderBrush}"/>
                                        <Setter Property="Foreground"
                                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabControl.Resources>
            
            <TabItem Header="Home">
                <ScrollViewer>
                <StackPanel>
                    <TextBlock TextWrapping="Wrap">
                        <Run FontWeight="ExtraBold"
                             FontSize="18">Fluent.Ribbon</Run>
                        <LineBreak />
                        Fluent.Ribbon is a library that implements an Office-like user interface for the Windows Presentation Foundation (WPF).
                        <LineBreak />
                        It provides controls such as RibbonTabControl, Backstage, Gallery, QuickAccessToolbar, ScreenTip and so on.
                        <LineBreak />
                        <LineBreak />
                    </TextBlock>

                    <GroupBox Header="Options">
                        <WrapPanel>
                            <GroupBox Header="Theme">
                                <WrapPanel>
                                    <WrapPanel.Resources>
                                        <ObjectDataProvider MethodName="GetValues"
                                                            ObjectType="{x:Type controlzEx:ThemeSyncMode}"
                                                            x:Key="SyncModePreferenceEnumValues">
                                            <ObjectDataProvider.MethodParameters>
                                                <x:Type TypeName="controlzEx:ThemeSyncMode" />
                                            </ObjectDataProvider.MethodParameters>
                                        </ObjectDataProvider>
                                    </WrapPanel.Resources>
                                    <Fluent:ComboBox Header="BaseColors"
                                                     MinWidth="140"
                                                     IsEditable="False"
                                                     ItemsSource="{Binding Source={x:Static controlzEx:ThemeManager.Current}, Path=BaseColors}"
                                                     SelectedItem="{Binding ColorViewModel.CurrentBaseColor, Mode=TwoWay}" />
                                    <Fluent:ComboBox Header="Theme"
                                                     MinWidth="150"
                                                     IsEditable="False"
                                                     ItemsSource="{Binding Source={x:Static controlzEx:ThemeManager.Current}, Path=Themes}"
                                                     SelectedItem="{Binding ColorViewModel.CurrentTheme, Mode=TwoWay}">
                                        <Fluent:ComboBox.ItemTemplate>
                                            <DataTemplate DataType="{x:Type controlzEx:Theme}">
                                                <StackPanel Orientation="Horizontal">
                                                    <Ellipse Width="16"
                                                             Height="16"
                                                             Fill="{Binding ShowcaseBrush, Mode=OneWay}" />
                                                    <TextBlock Text="{Binding DisplayName}" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </Fluent:ComboBox.ItemTemplate>
                                        <!--<Fluent:ComboBox.GroupStyle>
                                            <GroupStyle>
                                                <GroupStyle.HeaderTemplate>
                                                    <DataTemplate>
                                                        <TextBlock Text="{Binding Name, StringFormat='{}Base color: {0}'}"
                                                                   FontSize="14"
                                                                   FontWeight="DemiBold"
                                                                   Background="{DynamicResource BlackBrush}"
                                                                   Foreground="{DynamicResource WhiteBrush}" />
                                                    </DataTemplate>
                                                </GroupStyle.HeaderTemplate>
                                            </GroupStyle>
                                        </Fluent:ComboBox.GroupStyle>-->
                                    </Fluent:ComboBox>

                                    <Fluent:ComboBox Header="SyncMode"
                                                     IsEditable="False"
                                                     ItemsSource="{Binding Source={StaticResource SyncModePreferenceEnumValues}}"
                                                     SelectedItem="{Binding Source={x:Static controlzEx:ThemeManager.Current}, Path=ThemeSyncMode}" />
                                    <Fluent:CheckBox IsChecked="{Binding Path=Options.UseHSL, Source={x:Static controlzEx:RuntimeThemeGenerator.Current}, Mode=TwoWay}"
                                                     Header="Use HSL color" />
                                    <Button Click="SyncThemeNow_OnClick">Sync now</Button>
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="WindowGlow">
                                <WrapPanel>
                                    <Fluent:ComboBox Header="GlowBrush"
                                                     MinWidth="140"
                                                     IsEditable="False"
                                                     ItemsSource="{Binding Brushes, ElementName=TestContentControl}"
                                                     SelectedValuePath="Value"
                                                     SelectedValue="{Binding Path=GlowBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                        <Fluent:ComboBox.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Grid.Column="0"
                                                          Margin="4 0"
                                                          Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"
                                                          VerticalAlignment="Stretch"
                                                          Background="{Binding Value}" />
                                                    <TextBlock Grid.Column="1"
                                                               Margin="4 0"
                                                               Text="{Binding}" />
                                                </Grid>
                                            </DataTemplate>
                                        </Fluent:ComboBox.ItemTemplate>
                                    </Fluent:ComboBox>

                                    <Fluent:ComboBox Header="NonActiveGlowBrush"
                                                     MinWidth="150"
                                                     IsEditable="False"
                                                     ItemsSource="{Binding Brushes, ElementName=TestContentControl}"
                                                     SelectedValuePath="Value"
                                                     SelectedValue="{Binding Path=NonActiveGlowBrush, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                                        <Fluent:ComboBox.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Grid Grid.Column="0"
                                                          Margin="4 0"
                                                          Width="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight}"
                                                          VerticalAlignment="Stretch"
                                                          Background="{Binding Value}" />
                                                    <TextBlock Grid.Column="1"
                                                               Margin="4 0"
                                                               Text="{Binding}" />
                                                </Grid>
                                            </DataTemplate>
                                        </Fluent:ComboBox.ItemTemplate>
                                    </Fluent:ComboBox>
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="Menu">
                                <WrapPanel>
                                    <Fluent:ComboBox Header="Menu" 
                                                     IsEditable="False"
                                                     SizeDefinition="Middle" 
                                                     SelectedItem="{Binding SelectedMenu, ElementName=TestContentControl}">
                                        <System:String>ApplicationMenu</System:String>
                                        <System:String>Backstage</System:String>
                                        <System:String>Empty menu</System:String>
                                    </Fluent:ComboBox>

                                        <Fluent:Button Name="ShowStartScreen"
                                                   Size="Middle"
                                                   Click="ShowStartScreen_OnClick">
                                        Show start screen
                                    </Fluent:Button>
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="Localization">
                                <WrapPanel>
                                    <Fluent:ComboBox Header="Localization" 
                                                     IsEditable="False"
                                                     SizeDefinition="Middle"
                                                     DisplayMemberPath="DisplayName"
                                                     ItemsSource="{Binding Localizations, ElementName=TestContentControl}"
                                                     SelectedItem="{Binding Path=Localization, Source={x:Static Fluent:RibbonLocalization.Current}}" />
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="Window options">
                                <WrapPanel>
                                    <Fluent:CheckBox IsChecked="{Binding IsIconVisible, RelativeSource={RelativeSource AncestorType={x:Type Fluent:RibbonWindow}}, FallbackValue=false}">
                                        IsIconVisible
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsCollapsed, RelativeSource={RelativeSource AncestorType={x:Type Fluent:RibbonWindow}}, FallbackValue=false}">
                                        IsCollapsed
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsAutomaticCollapseEnabled, RelativeSource={RelativeSource AncestorType={x:Type Fluent:RibbonWindow}}, FallbackValue=false}">
                                        IsAutomaticCollapseEnabled
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox x:Name="IsStatusBarVisibleCheckBox"
                                                     IsChecked="True">
                                        IsStatusBarVisible
                                    </Fluent:CheckBox>
                                    <ComboBox x:Name="ResizeModeComboBox"
                                              AutomationProperties.Name="Window resize mode"
                                              ItemsSource="{Binding Source={StaticResource ResizeModeEnumValues}}"
                                              SelectedItem="{Binding Path=ResizeMode, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

                                    <ComboBox x:Name="FlowDirectionComboBox"
                                              AutomationProperties.Name="Window flow direction"
                                              ItemsSource="{Binding Source={StaticResource FlowDirectionEnumValues}}"
                                              SelectedItem="{Binding Path=FlowDirection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

                                        <Fluent:CheckBox IsChecked="{Binding Path=IgnoreTaskbarOnMaximize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource AncestorType={x:Type Fluent:RibbonWindow}}, FallbackValue=False}">
                                        IgnoreTaskbarOnMaximize
                                    </Fluent:CheckBox>
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="Ribbon options">
                                <WrapPanel>
                                    <Fluent:CheckBox IsChecked="{Binding ShowQuickAccessToolBarAboveRibbon, ElementName=ribbon}">
                                        ShowQuickAccessToolBarAboveRibbon
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding CanCustomizeQuickAccessToolBar, ElementName=ribbon}">
                                        CanCustomizeQuickAccessToolBar
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding CanCustomizeQuickAccessToolBarItems, ElementName=ribbon}">
                                        CanCustomizeQuickAccessToolBarItems
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding CanCustomizeRibbon, ElementName=ribbon}">
                                        CanCustomizeRibbon
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsMinimized, ElementName=ribbon}">
                                        IsMinimized
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding CanMinimize, ElementName=ribbon}">
                                        CanMinimize
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsCollapsed, ElementName=ribbon}">
                                        IsCollapsed
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsAutomaticCollapseEnabled, ElementName=ribbon}">
                                        IsAutomaticCollapseEnabled
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsQuickAccessToolBarVisible, ElementName=ribbon}">
                                        IsQuickAccessToolBarVisible
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsQuickAccessToolBarMenuDropDownVisible , ElementName=ribbon}">
                                        IsQuickAccessToolBarMenuDropDownVisible
                                    </Fluent:CheckBox>                    
                                    <Fluent:CheckBox IsChecked="{Binding CanQuickAccessLocationChanging, ElementName=ribbon}">
                                        CanQuickAccessLocationChanging
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding AutomaticStateManagement, ElementName=ribbon}">
                                        AutomaticStateManagement
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding AreTabHeadersVisible, ElementName=ribbon}">
                                        AreTabHeadersVisible
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsToolBarVisible, ElementName=ribbon}">
                                        IsToolBarVisible
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsMouseWheelScrollingEnabled, ElementName=ribbon}">
                                        IsMouseWheelScrollingEnabled
                                    </Fluent:CheckBox>
                                    <Fluent:CheckBox IsChecked="{Binding IsDefaultContextMenuEnabled, ElementName=ribbon}">
                                        IsDefaultContextMenuEnabled
                                    </Fluent:CheckBox>
                                </WrapPanel>
                            </GroupBox>

                            <GroupBox Header="Commands">
                                <Button Content="Reset saved state &amp; restart" 
                                        Click="HandleResetSavedState_OnClick" />
                            </GroupBox>
                        </WrapPanel>
                    </GroupBox>
                </StackPanel>
                </ScrollViewer>
            </TabItem>
            
            <TabItem Header="Developer">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <StackPanel Orientation="Horizontal">
                        <Fluent:Button x:Name="showLogicalTree"
                                       Size="Middle"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Top"
                                       Header="Show logical tree"
                                       Click="OnShowLogicalTreeClick">
                            <Button.ContextMenu>
                                <Fluent:ContextMenu ResizeMode="Both">
                                    <Fluent:MenuItem Header="_Lala"
                                                     InputGestureText="(Ctrl+F)" />
                                    <Fluent:MenuItem Header="_Lala"
                                                     RecognizesAccessKey="False" />
                                    <Fluent:MenuItem Header="Lala">
                                        <Fluent:MenuItem Header="Lala" />
                                        <Fluent:MenuItem Header="Lala">
                                            <Fluent:MenuItem Header="Lala" />
                                            <Fluent:MenuItem Header="Lala" />
                                            <Fluent:MenuItem Header="Lala" />
                                        </Fluent:MenuItem>
                                        <Fluent:MenuItem Header="Lala" />
                                    </Fluent:MenuItem>
                                    <Fluent:MenuItem Header="Lala">
                                        <Fluent:MenuItem.Icon>
                                            <BitmapImage UriSource="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/GrowFont.png" />
                                        </Fluent:MenuItem.Icon>
                                    </Fluent:MenuItem>
                                    <Separator />
                                    <Fluent:MenuItem Header="1" />
                                    <Fluent:MenuItem Header="2" />
                                    <Fluent:MenuItem Header="3" />
                                    <Fluent:MenuItem Header="4" />
                                    <Fluent:MenuItem Header="5" />
                                    <Fluent:MenuItem Header="6" />
                                    <Fluent:MenuItem Header="7" />
                                    <Fluent:MenuItem Header="8" />
                                    <Fluent:MenuItem Header="9" />
                                    <Fluent:MenuItem Header="10" />
                                    <Fluent:MenuItem Header="11" />
                                    <Fluent:MenuItem Header="12" />
                                    <Fluent:MenuItem Header="13" />
                                    <Fluent:MenuItem Header="14" />
                                    <Fluent:MenuItem Header="15" />
                                    <Fluent:MenuItem Header="16" />
                                    <Fluent:MenuItem Header="17" />
                                    <Fluent:MenuItem Header="18" />
                                    <Fluent:MenuItem Header="19" />
                                    <Fluent:MenuItem Header="20" />
                                    <Fluent:MenuItem Header="21" />
                                    <Fluent:MenuItem Header="22" />
                                    <Fluent:MenuItem Header="23" />
                                    <Fluent:MenuItem Header="24" />
                                    <Fluent:MenuItem Header="25" />
                                    <Fluent:MenuItem Header="26" />
                                    <Fluent:MenuItem Header="27" />
                                    <Fluent:MenuItem Header="28" />
                                    <Fluent:MenuItem Header="29" />
                                    <Fluent:MenuItem Header="30" />
                                    <Fluent:MenuItem Header="31" />
                                    <Fluent:MenuItem Header="32" />
                                    <Fluent:MenuItem Header="33" />
                                    <Fluent:MenuItem Header="34" />
                                    <Fluent:MenuItem Header="35" />
                                    <Fluent:MenuItem Header="36" />
                                    <Fluent:MenuItem Header="37" />
                                    <Fluent:MenuItem Header="38" />
                                    <Fluent:MenuItem Header="39" />
                                    <Fluent:MenuItem Header="40" />
                                </Fluent:ContextMenu>
                            </Button.ContextMenu>
                        </Fluent:Button>

                        <Fluent:Button Header="Snoop"
                                       Size="Middle"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Top"
                                       Click="StartSnoop_OnClick" />
                    </StackPanel>

                    <TreeView x:Name="logicalTreeView"
                              Grid.Row="1"
                              MouseDoubleClick="OnTreeDoubleClick" />
                </Grid>
            </TabItem>
            
            <TabItem Header="ViewboxTest"
                     Fluent:FrameworkHelper.UseLayoutRounding="False">
                <Grid>
                    <Viewbox Stretch="Uniform"
                             TextOptions.TextFormattingMode="Ideal"
                             Width="768"
                             Height="576">
                        <Canvas Width="6"
                                Height="6">
                            <Canvas.Resources>
                                <Style TargetType="Line">
                                    <Setter Property="Stroke"
                                            Value="Red" />
                                    <Setter Property="StrokeThickness"
                                            Value="0.05" />
                                </Style>
                                <Style TargetType="Rectangle">
                                    <Setter Property="Stroke"
                                            Value="Red" />
                                    <Setter Property="StrokeThickness"
                                            Value="0.05" />
                                </Style>
                                <Style TargetType="Ellipse">
                                    <Setter Property="Stroke"
                                            Value="Red" />
                                    <Setter Property="StrokeThickness"
                                            Value="0.05" />
                                </Style>
                            </Canvas.Resources>
                            <Canvas.RenderTransform>
                                <TranslateTransform X="3"
                                                    Y="3" />
                            </Canvas.RenderTransform>
                            <Label Canvas.Left="-3"
                                   Canvas.Top="-3"
                                   Foreground="Red"
                                   FontSize="0.2"
                                   Padding="0"
                                   Panel.ZIndex="1">
                                Rectangle and Ellipse should be between green lines and Text 1 to 3 shouldn't overlap
                            </Label>
                            <Label Canvas.Left="-2.2"
                                   Canvas.Top="0"
                                   Foreground="Red"
                                   Content="Text 1"
                                   FontSize="0.5"
                                   Padding="0" />
                            <Label Canvas.Left="-2.1"
                                   Canvas.Top="0.5"
                                   Foreground="Red"
                                   Content="Text 2"
                                   FontSize="0.5"
                                   Padding="0" />
                            <Label Canvas.Left="-2"
                                   Canvas.Top="1"
                                   Foreground="Red"
                                   Content="Text 3"
                                   FontSize="0.5"
                                   Padding="0" />
                            <Line X1="-0.2"
                                  Y1="-3"
                                  X2="-0.2"
                                  Y2="3"
                                  Stroke="Green" />
                            <Line X1="0.3"
                                  Y1="-3"
                                  X2="0.3"
                                  Y2="3"
                                  Stroke="Green" />
                            <Rectangle Canvas.Left="-0.2"
                                       Canvas.Top="-0.2"
                                       Width="0.5"
                                       Height="0.6" />
                            <Ellipse Canvas.Left="-0.2"
                                     Canvas.Top="-0.2"
                                     Width="0.5"
                                     Height="0.6" />
                        </Canvas>
                    </Viewbox>
                </Grid>
            </TabItem>
            
            <TabItem Header="Tests">
                <ScrollViewer>
                <StackPanel Orientation="Vertical">
                    <GroupBox Header="Tabs">
                        <WrapPanel>
                            <Fluent:Button x:Name="AddRibbonTab"
                                           Size="Middle"
                                           Click="AddRibbonTab_OnClick">Add tab</Fluent:Button>
                        </WrapPanel>
                    </GroupBox>
                    <GroupBox Header="Interop">
                        <WrapPanel>
                            <Fluent:Button x:Name="OpenMahMetroWindow"
                                           Size="Middle"
                                           Click="OpenMahMetroWindow_OnClick">Open MahMetro-Window</Fluent:Button>
                        </WrapPanel>
                    </GroupBox>
                    <GroupBox Header="Windows">
                        <WrapPanel>
                            <Fluent:Button x:Name="OpenRegularWindow"
                                           Size="Middle"
                                           Click="OpenRegularWindow_OnClick">Open Regular-Window</Fluent:Button>
                            <Fluent:Button x:Name="OpenMinimalRibbonWindowSample"
                                           Size="Middle"
                                           Click="OpenMinimalRibbonWindowSample_OnClick">Open Minimal Ribbon-Window Sample</Fluent:Button>
                            <Fluent:Button x:Name="OpenRibbonWindowWithoutVisibileRibbon"
                                           Size="Middle"
                                           Click="OpenRibbonWindowWithoutVisibileRibbon_OnClick">Open Ribbon-Window without visible Ribbon</Fluent:Button>
                            <Fluent:Button x:Name="OpenRibbonWindowWithoutRibbon"
                                           Size="Middle"
                                           Click="OpenRibbonWindowWithoutRibbon_OnClick">Open Ribbon-Window without Ribbon</Fluent:Button>
                            <Fluent:Button x:Name="OpenModalRibbonWindow"
                                           Size="Middle"
                                           Click="OpenModalRibbonWindow_OnClick">Open Ribbon-Window (ShowDialog)</Fluent:Button>
                            <Fluent:Button x:Name="OpenRibbonWindowOnNewThread"
                                           Size="Middle"
                                           Click="OpenRibbonWindowOnNewThread_OnClick">Open Ribbon-Window (new Thread)</Fluent:Button>
                            <Fluent:Button x:Name="OpenRibbonWindowColorized"
                                           Size="Middle"
                                           Click="OpenRibbonWindowColorized_OnClick">Open Ribbon-Window (colorized)</Fluent:Button>
                            <Fluent:Button x:Name="OpenRibbonWindowWithBackgroundImage"
                                           Size="Middle"
                                           Click="OpenRibbonWindowWithBackgroundImage_OnClick">Open Ribbon-Window (with background image)</Fluent:Button>
                        </WrapPanel>
                    </GroupBox>
                    <GroupBox Header="Issue repros">
                        <WrapPanel>
                            <Fluent:Button x:Name="SleepButton"
                                           Size="Middle"
                                           VerticalAlignment="Top"
                                           Click="SleepButton_OnClick">Sleep for issues #80 and #159</Fluent:Button>
                            
                            <Fluent:Button Size="Middle"
                                           VerticalAlignment="Top"
                                           ToolTip="Theme should change every 2 seconds."
                                           Command="{Binding IssueReprosViewModel.ThemeManagerFromThread.StartStopCommand}">Change theme from thread</Fluent:Button>                            
                            
                            <GroupBox Header="KeyTip issues #254">
                                <StackPanel Orientation="Vertical">
                                    <formsInterop:WindowsFormsHost>
                                        <forms:TextBox Height="30"
                                                       Text="Test Windows.Forms.TextBox" />
                                    </formsInterop:WindowsFormsHost>

                                    <StackPanel>
                                        <Label Target="{Binding ElementName=targetTextBox}">Label with _Access Key A</Label>
                                        <TextBox x:Name="targetTextBox">Test System.Windows.Controls.TextBox</TextBox>
                                    </StackPanel>
                                </StackPanel>
                            </GroupBox>
                        </WrapPanel>
                    </GroupBox>
                </StackPanel>
                </ScrollViewer>
            </TabItem>

            <TabItem Header="Styles">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <StackPanel Orientation="Horizontal">
                        <Fluent:DropDownButton HorizontalAlignment="Left"
                                               SizeDefinition="Small"
                                               MaxDropDownHeight="500">
                            <Fluent:DropDownButton.Icon>
                                <Rectangle VerticalAlignment="Stretch"
                                            HorizontalAlignment="Stretch">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="{Binding ElementName=ThemeColorGallery, Path=SelectedColor, FallbackValue=Red}" />
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Fluent:DropDownButton.Icon>
                            <Fluent:ColorGallery x:Name="ThemeColorGallery"
                                                 ThemeColorsSource="{Binding ColorViewModel.ThemeColors}"
                                                 SelectedColor="Red"
                                                 Mode="ThemeColors"
                                                 StandardColorGridRows="3"
                                                 Columns="10"
                                                 ThemeColorGridRows="5"
                                                 IsNoColorButtonVisible="False"
                                                 IsAutomaticColorButtonVisible="False" />
                        </Fluent:DropDownButton>

                        <Label Target="{Binding ElementName=ChangeImmediatelyCheckBox}">Change immediately</Label>
                        <CheckBox x:Name="ChangeImmediatelyCheckBox" 
                                  VerticalAlignment="Center" />
                        <Button x:Name="CreateThemeResourceDictionaryButton"
                                Click="CreateThemeResourceDictionaryButton_OnClick">Create theme</Button>
                    </StackPanel>
                    
                    <TextBox x:Name="ThemeResourceDictionaryTextBox" 
                             Grid.Row="1"
                             IsReadOnly="True"
                             VerticalScrollBarVisibility="Visible"
                             TextWrapping="Wrap"
                             Background="{DynamicResource WhiteBrush}"
                             Foreground="{DynamicResource BlackBrush}" />
                </Grid>
            </TabItem>

            <TabItem Header="Airspace issue">
                <DockPanel LastChildFill="True">
                    <formsInterop:WindowsFormsHost HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch">
                        <forms:TextBox Height="30"
                                       Text="Test Windows.Forms.TextBox" />
                    </formsInterop:WindowsFormsHost>
                </DockPanel>
            </TabItem>
        </TabControl>

        <Fluent:StatusBar HorizontalAlignment="Stretch"
                          VerticalAlignment="Bottom"
                          Visibility="{Binding IsChecked, ElementName=IsStatusBarVisibleCheckBox, Converter={StaticResource boolToVisibilityConverter}}"
                          Grid.Row="2">
            <Fluent:StatusBarItem Title="Words Width"
                                  Value="150"
                                  IsEnabled="False"
                                  HorizontalAlignment="Left">
                <TextBlock Text="150 px" />
            </Fluent:StatusBarItem>
            
            <Separator HorizontalAlignment="Left" />
            
            <Fluent:StatusBarItem Title="Selected Words"
                                  Value="15"
                                  ToolTip="This is Selected Words"
                                  Content="15 words"
                                  HorizontalAlignment="Left" />
            
            <Separator HorizontalAlignment="Left" />

            <Fluent:StatusBarItem Title="Used memory"
                                  HorizontalAlignment="Right"
                                  Value="{Binding UsedMemory, StringFormat={}{0:##\,000} KB}" />

            <Separator HorizontalAlignment="Right" />

            <Fluent:StatusBarItem Title="Zoom"
                                  HorizontalAlignment="Right"
                                  Value="{Binding Value, ElementName=zoomSlider, StringFormat={}{0:P}}" />

            <Fluent:StatusBarItem Title="Test (no content, no value)"
                                  HorizontalAlignment="Right" />

            <Fluent:StatusBarItem Title="Zoom Slider"
                                  HorizontalAlignment="Right">
                <Slider x:Name="zoomSlider"
                        Minimum="0.5"
                        Maximum="2.0"
                        IsDirectionReversed="False"
                        Style="{DynamicResource ZoomSliderStyle}"
                        Value="{Binding Zoom}"
                        IsSnapToTickEnabled="True"
                        TickFrequency="0.1"
                        SmallChange="0.1"
                        LargeChange="0.1"
                        ValueChanged="ZoomSlider_OnValueChanged" />
            </Fluent:StatusBarItem>
        </Fluent:StatusBar>
    </Grid>
</UserControl>