aistudio-wpf-diagram/Others/Dragablz/DragablzDemo/BasicExampleMainWindow.xaml

<Window x:Class="DragablzDemo.BasicExampleMainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:dragablzDemo="clr-namespace:DragablzDemo"
        Title="Basic Example Defining Tab Content in XAML" Height="350" Width="600"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance dragablzDemo:BasicExampleMainModel, IsDesignTimeCreatable=False}">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>            
        </ResourceDictionary>
    </Window.Resources>
    
    <dragablz:TabablzControl Style="{StaticResource BasicExamplesTabStyle}">
        <dragablz:TabablzControl.InterTabController>
            <dragablz:InterTabController  />
        </dragablz:TabablzControl.InterTabController>        
        <TabItem Header="Basic Examples" IsSelected="True">
            <Grid Margin="8 8 8 8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <TextBlock Grid.Row="0" Grid.Column="0">Content Defined in XAML, organised horizontally</TextBlock>                
                
                <dragablz:DragablzItemsControl Grid.Column="0" Grid.Row="1" BorderThickness="1" BorderBrush="DarkBlue"
                                               PositionMonitor="{Binding BasicColourMonitor}">
                    <dragablz:DragablzItemsControl.ItemsOrganiser>
                        <dragablz:HorizontalOrganiser />
                    </dragablz:DragablzItemsControl.ItemsOrganiser>
                    <TextBlock>Red</TextBlock>
                    <TextBlock>Green</TextBlock>
                    <TextBlock>Blue</TextBlock>
                </dragablz:DragablzItemsControl>
                
                <TextBlock Grid.Row="2" Grid.Column="0" TextWrapping="Wrap" 
                           Text="{Binding BasicColourMonitorText, StringFormat='Your view model can monitor coordinates. Latest coords={0}'}" />

                <TextBlock Grid.Row="0" Grid.Column="1" Margin="2 0">Content Bound From View Model, organised vertically</TextBlock>
                
                <dragablz:DragablzItemsControl Grid.Column="1" Grid.Row="1" ItemsSource="{Binding People}" BorderThickness="1" 
                                               BorderBrush="DarkBlue"
                                               ItemContainerStyle="{StaticResource CustomDragablzItemStyle}"
                                               Margin="2 0"
                                               PositionMonitor="{Binding PeopleMonitor}">
                    <dragablz:DragablzItemsControl.ItemsOrganiser>
                        <dragablz:VerticalOrganiser />
                    </dragablz:DragablzItemsControl.ItemsOrganiser>
                    <dragablz:DragablzItemsControl.ItemTemplate>
                        <DataTemplate DataType="{x:Type dragablzDemo:Person}">
                            <StackPanel>
                                <TextBlock Text="{Binding FirstName}" />
                                <TextBlock Text="{Binding LastName}" />
                            </StackPanel>
                        </DataTemplate>
                    </dragablz:DragablzItemsControl.ItemTemplate>
                </dragablz:DragablzItemsControl>
                <Button Command="{Binding AddNewPerson}" Grid.Row="2" Grid.Column="1" Margin="2 0">Add New Bound Person</Button>
                <TextBlock Grid.Row="3" Grid.Column="1" TextWrapping="Wrap" 
                           Text="{Binding PeopleMonitorText, StringFormat='Your can monitor ordering: {0}'}" />                                
            </Grid>            
        </TabItem>
        <TabItem Header="Drag me!">
            <TextBlock Margin="8 8 8 8">You can drag tabs around.</TextBlock>
        </TabItem>
        <TabItem Header="Basic bound tabs example">            
            <dragablz:TabablzControl Margin="8 8 8 8" ItemsSource="{Binding ViewModels}"
                                     SelectedItem="{Binding SelectedViewModel}">
                <dragablz:TabablzControl.HeaderSuffixContent>
                    <Button Command="{Binding AddNewViewModel}">+</Button>
                </dragablz:TabablzControl.HeaderSuffixContent>
                <TabControl.ContentTemplate>
                    <DataTemplate DataType="{x:Type dragablzDemo:SimpleViewModel}">
                        <TextBlock Text="{Binding SimpleContent}" />
                    </DataTemplate>
                </TabControl.ContentTemplate>
                <dragablz:TabablzControl.HeaderItemTemplate>
                    <DataTemplate DataType="{x:Type dragablzDemo:SimpleViewModel}">
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </dragablz:TabablzControl.HeaderItemTemplate>
                <TabControl.ItemTemplate>
                    <DataTemplate DataType="{x:Type dragablzDemo:SimpleViewModel}">
                        <TextBlock Text="{Binding SimpleContent}" />
                    </DataTemplate>
                </TabControl.ItemTemplate>
            </dragablz:TabablzControl>            
        </TabItem>
        <TabItem Header="Cool features">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <dragablz:Trapezoid Grid.Row="0" Margin="8 8 8 8">Trapezium/Trapezoid...pretty useful for tabs</dragablz:Trapezoid>        
                <dragablz:DragablzItem Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource SizableFromBottomRightDragablzItemStyle}">
                    <TextBlock TextWrapping="Wrap" Margin="2 2 2 2">This is a dragablz item, which can be resized...pretty cool to let text arrange.  Try dragging the bottom right of the border. A simple example style is used, but you can also create your own grips in content using DragablzItem.SizeGrip.</TextBlock>
                </dragablz:DragablzItem>        
                <dragablz:DragablzItemsControl Grid.RowSpan="2" Grid.Row="0" 
                                               Style="{StaticResource FloatingDragablzItemsControlStyle}">            
                    <dragablz:DragablzItem HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource FloatingDragablzItemStyle}"
                                           Background="White"
                                           X="100" Y="150"
                                           Width="150" Height="100">
                        <TextBlock TextWrapping="Wrap" Margin="2 2 2 2">This is a dragablz item, is floating aroung happily, you can size it on any part of the border, and drag it anywhere.</TextBlock>
                    </dragablz:DragablzItem>
                    <dragablz:HeaderedDragablzItem HeaderContent="Floating around"
                                                   Style="{StaticResource ToolDragablzItemStyle}"
                                                   X="110" Y="160"
                                                   Width="150" Height="100">
                        <TextBlock TextWrapping="Wrap" Margin="2 2 2 2">Ahh c'mon, this is basically just a tool window!  I know you are asking where the close button is.  Keep asking.  Haven't got there yet.  But this is WPF, so don't get lazy, just style it in for yourself!</TextBlock>
                    </dragablz:HeaderedDragablzItem>
                    
                </dragablz:DragablzItemsControl>
            </Grid>            
        </TabItem>
    </dragablz:TabablzControl>                 
</Window>