Mini Kabibi Habibi

<local:DockingDemoModule x:Class="DockingDemo.NWindLayout"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="clr-namespace:DockingDemo"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
    xmlns:dxdb="http://schemas.devexpress.com/winfx/2008/xaml/demobase"
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
 xmlns:dxdo="http://schemas.devexpress.com/winfx/2008/xaml/docking"
 xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
    xmlns:collection="clr-namespace:System.Collections;assembly=mscorlib" Height="300" Width="721">
    <local:DockingDemoModule.Resources>
        <ResourceDictionary>
            <dx:ImageDataConverter x:Key="imageConverter" />
        </ResourceDictionary>
    </local:DockingDemoModule.Resources>
    <dxdb:DemoModuleControl>
        <dxb:BarManager>
            <dxdo:DockLayoutManager x:Name="dockManager" Background="Transparent">
                <dxdo:LayoutGroup>
                    <dxdo:LayoutControlItem ItemWidth="Auto" ShowCaption="False" ItemHeight="*">
                        <dxe:ListBoxEdit x:Name="list" SelectedIndex="0">
                            <dxe:ListBoxEdit.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="{Binding FirstName}" />
                                        <TextBlock Text="{Binding LastName}" Margin="5,0,0,0" />
                                    </StackPanel>
                                </DataTemplate>
                            </dxe:ListBoxEdit.ItemTemplate>
                        </dxe:ListBoxEdit>
                    </dxdo:LayoutControlItem>
                    <dxdo:LayoutSplitter />
                    <dxdo:LayoutGroup Orientation="Vertical" ItemHeight="Auto">
                        <dxdo:LayoutGroup ItemHeight="Auto" GroupBorderStyle="Group">
                            <dxdo:LayoutControlItem ShowCaption="False" ItemWidth="150" ItemHeight="150" >
                                <Image  HorizontalAlignment="Left" Source="{Binding Path=Photo, Converter={StaticResource ResourceKey=imageConverter}}" />
                            </dxdo:LayoutControlItem>
                            <dxdo:LayoutGroup Orientation="Vertical">
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="Title">
                                        <dxe:TextEdit Text="{Binding TitleOfCourtesy}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:EmptySpaceItem />
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="_First name ">
                                        <dxe:TextEdit Text="{Binding FirstName}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:LayoutControlItem Caption="_Last name ">
                                        <dxe:TextEdit Text="{Binding LastName}" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="Job title">
                                        <dxe:TextEdit Text="{Binding Title}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:EmptySpaceItem />
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="Birth date">
                                        <dxe:DateEdit DateTime="{Binding BirthDate}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:LayoutControlItem Caption="Hire date">
                                        <dxe:DateEdit DateTime="{Binding HireDate}" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                            </dxdo:LayoutGroup>
                        </dxdo:LayoutGroup>
                        <dxdo:LayoutSplitter />
                        <dxdo:LayoutGroup GroupBorderStyle="Tabbed">
                            <dxdo:LayoutGroup Caption="Address info" Orientation="Vertical" GroupBorderStyle="GroupBox" ShowCaption="True" CaptionImage="/DockingDemo;component/Images/Nwind/Address.png">
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="Country">
                                        <dxe:TextEdit Text="{Binding Country}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:LayoutControlItem Caption="Region">
                                        <dxe:TextEdit Text="{Binding Region}" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="City">
                                        <dxe:TextEdit Text="{Binding City}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:LayoutControlItem Caption="Postal code">
                                        <dxe:TextEdit Text="{Binding PostalCode}" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup>
                                    <dxdo:LayoutControlItem Caption="_Address">
                                        <dxe:TextEdit Text="{Binding Address}" VerticalContentAlignment="Top" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                                <dxdo:LayoutGroup ItemHeight="Auto">
                                    <dxdo:LayoutControlItem Caption="Home phone">
                                        <dxe:TextEdit Text="{Binding HomePhone}" />
                                    </dxdo:LayoutControlItem>
                                    <dxdo:LayoutControlItem Caption="Extension">
                                        <dxe:TextEdit Text="{Binding Extension}" />
                                    </dxdo:LayoutControlItem>
                                </dxdo:LayoutGroup>
                            </dxdo:LayoutGroup>
                            <dxdo:LayoutGroup Caption="Notes" GroupBorderStyle="GroupBox" ShowCaption="True" CaptionImage="/DockingDemo;component/Images/Nwind/Notes.png">
                                <dxdo:LayoutControlItem Caption="Notes" ShowCaption="False">
                                    <dxe:TextEdit Text="{Binding Notes}" TextWrapping="Wrap" VerticalContentAlignment="Top" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
                                </dxdo:LayoutControlItem>
                            </dxdo:LayoutGroup>
                        </dxdo:LayoutGroup>
                    </dxdo:LayoutGroup>
                </dxdo:LayoutGroup>
            </dxdo:DockLayoutManager>
        </dxb:BarManager>
    </dxdb:DemoModuleControl>
</local:DockingDemoModule>