Mini Kabibi Habibi

<local:NavBarDemoModule x:Class="NavBarDemo.GroupsAndItems"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:NavBarDemo"
    xmlns:dxdb="http://schemas.devexpress.com/winfx/2008/xaml/demobase"
 xmlns:dxn="http://schemas.devexpress.com/winfx/2008/xaml/navbar"
    xmlns:dxnt="http://schemas.devexpress.com/winfx/2008/xaml/navbar/themekeys"
 xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
 xmlns:sys="clr-namespace:System;assembly=mscorlib"
                        x:Name="navBarDemoModuleControl">
    <local:NavBarDemoModule.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/NavBarDemo;component/Themes/Generic.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <collections:ArrayList x:Key="NavBarViews">
                <sys:String>Explorer Bar</sys:String>
                <sys:String>Navigation Pane</sys:String>
                <sys:String>Side Bar</sys:String>
            </collections:ArrayList>
            <collections:ArrayList x:Key="Images">
                <Image Stretch="None" Source="/NavBarDemo;component/Images/AddItemsDemo/image1.png"/>
                <Image Stretch="None" Source="/NavBarDemo;component/Images/AddItemsDemo/image2.png"/>
                <Image Stretch="None" Source="/NavBarDemo;component/Images/AddItemsDemo/image3.png"/>
            </collections:ArrayList>
            <collections:ArrayList x:Key="ItemTemplates">
                <sys:String>Small Images</sys:String>
                <sys:String>Large Images</sys:String>
            </collections:ArrayList>
            <local:ItemToEnabledConverter x:Key="itemToEnabledConverter"/>
        </ResourceDictionary>
    </local:NavBarDemoModule.Resources>
    <dxdb:DemoModuleControl>
        <dxdb:DemoModuleControl.OptionsContent>
            <StackPanel MinWidth="200">
                <dx:GroupFrame Header="View" MinWidth="150" Margin="{DynamicResource groupMargin}">
                    <dxe:ListBoxEdit x:Name="viewsList" ItemsSource="{DynamicResource NavBarViews}" SelectedIndexChanged="SelectView"
          ShowBorder="False" SelectedIndex="0" Background="{x:Null}">
                        <dxe:ListBoxEdit.StyleSettings>
                            <dxe:RadioListBoxEditStyleSettings/>
                        </dxe:ListBoxEdit.StyleSettings>
                    </dxe:ListBoxEdit>
                </dx:GroupFrame>
                <dx:GroupFrame Header="New Group Item Style" Margin="{DynamicResource groupMargin}">
                    <dxe:ListBoxEdit x:Name="newGroupImageStyleList" ItemsSource="{DynamicResource ItemTemplates}" ShowBorder="False"
          SelectedIndex="0" Background="{x:Null}">
                        <dxe:ListBoxEdit.StyleSettings>
                            <dxe:RadioListBoxEditStyleSettings/>
                        </dxe:ListBoxEdit.StyleSettings>
                    </dxe:ListBoxEdit>
                </dx:GroupFrame>
                <Button Name="addGroupButton" Height="22" Content="Add Group" Click="Add_Group"  Margin="{DynamicResource controlMargin}" />
                <Button Name="deleteLastGroupButton" Height="22" Content="Delete Last Group" Click="Delete_Group"  Margin="{DynamicResource groupMargin}">
                    <Button.IsEnabled>
                        <Binding Path="Groups.Count" ElementName="navBar">
                            <Binding.Converter>
                                <local:IntToBooleanConverter/>
                            </Binding.Converter>
                        </Binding>
                    </Button.IsEnabled>
                </Button>
                <dx:GroupFrame Header="New Item Image" Margin="{DynamicResource groupMargin}">
                    <dxe:ListBoxEdit x:Name="newItemImageList" ItemsSource="{DynamicResource Images}" SelectedIndex="0" Background="{x:Null}"
                                     ShowBorder="False">
                        <dxe:ListBoxEdit.StyleSettings>
                            <dxe:RadioListBoxEditStyleSettings/>
                        </dxe:ListBoxEdit.StyleSettings>
                    </dxe:ListBoxEdit>
                </dx:GroupFrame>
                <Button Name="addNewItemButton" Margin="{DynamicResource controlMargin}" Grid.Column="0" Content="Add New Item" Click="Add_Item" HorizontalAlignment="Stretch" MouseEnter="Add_MouseEnter" MouseLeave="Add_MouseLeave"/>
                <Button Name="deleteSelectedItemButton" Height="22" Grid.Column="1" Margin="{DynamicResource groupMargin}" Content="Delete Selected Item" Click="Delete_Item" HorizontalAlignment="Stretch">
                    <Button.IsEnabled>
                        <MultiBinding>
                            <MultiBinding.Converter>
                                <dxdb:AndConverter />
                            </MultiBinding.Converter>
                            <Binding Path="ActiveGroup" ElementName="navBar" Converter="{StaticResource itemToEnabledConverter}" />
                            <Binding Path="ActiveGroup.SelectedItem" ElementName="navBar" Converter="{StaticResource itemToEnabledConverter}" />
                        </MultiBinding>
                    </Button.IsEnabled>
                </Button>
            </StackPanel>
        </dxdb:DemoModuleControl.OptionsContent>
        <local:NavBarDemoGridControl>
            <dxn:NavBarControl Name="navBar">
                <dxn:NavBarControl.Groups>
                    <dxn:NavBarGroup Header="Group 1" ImageSource="/NavBarDemo;component/Images/AddItemsDemo/image2.png" ItemImageSettings="{dxn:NavBarImageSettings Height=16, Width=16}">
                        <dxn:NavBarItem Content="Item 1" ImageSource="/NavBarDemo;component/Images/AddItemsDemo/image1.png"/>
                    </dxn:NavBarGroup>
                    <dxn:NavBarGroup Header="Group 2" ImageSource="/NavBarDemo;component/Images/AddItemsDemo/image3.png"
                                     ItemImageSettings="{dxn:NavBarImageSettings Height=32, Width=32}"
                                     ItemLayoutSettings="{dxn:NavBarLayoutSettings ImageHorizontalAlignment=Center, TextHorizontalAlignment=Center, ImageDocking=Top}"
                                     >
                        <dxn:NavBarItem Content="Item 1" ImageSource="/NavBarDemo;component/Images/AddItemsDemo/image2.png"/>
                    </dxn:NavBarGroup>
                </dxn:NavBarControl.Groups>
            </dxn:NavBarControl>
        </local:NavBarDemoGridControl>
    </dxdb:DemoModuleControl>
</local:NavBarDemoModule>