PgMainEditGraph.xaml

<Page x:Class="MultiLayout.MainEdit.PgMainEditGraph"
      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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
      mc:Ignorable="d" 
      d:DesignHeight="768" d:DesignWidth="1024"
      Background="White"
      Title="Page_MainEditGraph">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="PgMainEditGraphStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="{x:Type TabItem}">
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Margin="2" SnapsToDevicePixels="True" 
                                                   Stroke="{StaticResource {x:Static SystemColors.ControlTextBrushKey}}" 
                                                   StrokeThickness="1" StrokeDashArray="1 2"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="FontSize" Value="30"/>
                <Setter Property="Foreground" Value="{StaticResource Item.SelectedInactive.Foreground}"/>
                <Setter Property="Background" Value="{StaticResource Item.SelectedInactive.Background}"/>
                <Setter Property="BorderBrush" Value="{StaticResource Item.SelectedInactive.Border}"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Padding" Value="5,10"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid x:Name="templateRoot" SnapsToDevicePixels="True">
                                <Border x:Name="mainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,2,0" Background="{TemplateBinding Background}" Margin="0">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition Width="auto"/>
                                        </Grid.ColumnDefinitions>
                                        <Button x:Name="button_edit" Grid.Column="0" 
                                                Style="{StaticResource ButtonStyle_empty}" Margin="5" Background="White" VerticalAlignment="Center"
                                                Click="button_itemEdit_Click"
                                                >
                                            <StackPanel Orientation="Horizontal">
                                                <Path Data="{StaticResource Geometry_settings}"  Fill="Black" Height="25" Width="25" Stretch="Fill"/>
                                            </StackPanel>

                                        </Button>
                                        <ContentPresenter Grid.Column="1"  x:Name="contentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>

                                        <Button x:Name="button_close" Grid.Column="2" Style="{StaticResource ButtonStyle_empty}" Margin="5" Background="White" 
                                                Click="button_itemDel_Click"
                                                >
                                            <Path Data="{StaticResource Geometry_close-circle}"  Fill="red" Height="40" Width="40" Stretch="Fill"/>
                                        </Button>
                                    </Grid>

                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" Value="{StaticResource Item.MouseOver.Background}"/>
                                    <Setter Property="Foreground" Value="{StaticResource Item.MouseOver.Foreground}"/>
                                    <Setter Property="BorderBrush" Value="{StaticResource Item.MouseOver.Border}"/>
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="false"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Background" Value="{StaticResource Item.SelectedInactive.Background}"/>
                                    <Setter Property="Foreground" Value="{StaticResource Item.SelectedInactive.Foreground}"/>
                                    <Setter Property="BorderBrush" Value="{StaticResource Item.SelectedInactive.Border}"/>
                                    <Setter TargetName="button_close" Property="Visibility" Value="Collapsed"/>
                                    <Setter TargetName="button_edit" Property="Visibility" Value="Collapsed"/>
                                    <Setter TargetName="contentPresenter" Property="Margin" Value="30,10"/>
                                </MultiDataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true"/>
                                    </MultiDataTrigger.Conditions>
                                    <Setter Property="Panel.ZIndex" Value="1"/>
                                    <Setter Property="Background" Value="{StaticResource Item.SelectedActive.Background}"/>
                                    <Setter Property="Foreground" Value="{StaticResource Item.SelectedActive.Foreground}"/>
                                    <Setter Property="BorderBrush" Value="{StaticResource Item.SelectedActive.Border}"/>
                                </MultiDataTrigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type TabControl}">
                <Setter Property="Padding" Value="2"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabControl}">
                            <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition x:Name="RowDefinition1"/>
                                </Grid.RowDefinitions>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    <TabPanel x:Name="headerPanel" VerticalAlignment="Bottom" Background="Transparent" IsItemsHost="true" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                                    <StackPanel Grid.Column="1" Orientation="Horizontal" >
                                        <Button Style="{StaticResource ButtonStyle_empty}" Background="Transparent" VerticalAlignment="Center" Click="button_itemAdd_Click">
                                            <Grid>
                                                <Ellipse Fill="White" Height="40" Width="40"/>
                                                <Path Data="{StaticResource Geometry_plus-circle}"  Fill="{StaticResource Color_theme_activity}" Height="40" Width="40" Stretch="Fill"/>
                                            </Grid>
                                        </Button>
                                    </StackPanel>
                                </Grid>

                                <Border Grid.Row="1" x:Name="contentPanel" Background="{TemplateBinding Background}" KeyboardNavigation.DirectionalNavigation="Contained" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" 
                                        BorderThickness="2,0,2,2" BorderBrush="{StaticResource Item.SelectedInactive.Border}">
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type Button}" x:Key="ButtonStyle_component" >
                <Setter Property="Margin" Value="10"/>
                <Setter Property="Content" Value="{Binding Type.Header}"/>
                <Setter Property="Background" Value="{Binding Type.Background}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
                                <Grid>
                                    <TextBlock Text="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
                                    <Button x:Name="button_close" Style="{StaticResource ButtonStyle_empty}" Margin="5" Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Right"
                                                Click="button_componentDel_Click">
                                        <Grid>
                                            <Ellipse Fill="White" Height="40" Width="40"/>
                                            <Path Data="{StaticResource Geometry_close-circle}" Fill="red" Height="40" Width="40" Stretch="Fill"/>
                                        </Grid>
                                    </Button>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Page.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <Button Style="{StaticResource ButtonStyle_back}" Click="btnBackClick"/>
            <StackPanel Style="{StaticResource SpStyle_Header}">
                <TextBlock Text="主界面布局管理"/>
                <StackPanel>
                    <TextBlock Style="{StaticResource TextBlockStyle_SubHeader}" Text="{Binding Title}"/>
                    <TextBlock Style="{StaticResource TextBlockStyle_SubHeader}" Text="图表区"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <ScrollViewer Width="200">
                <ItemsControl x:Name="itemsControl_toolbox">
                    <ItemsControl.Resources>

                    </ItemsControl.Resources>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource ButtonStyle_empty}" Background="{Binding Background}" Tag="{Binding .}" Click="button_componentNew_Click" Margin="5">
                                <StackPanel Margin="10">
                                    <Viewbox Margin="3" MaxHeight="15">
                                        <TextBlock Text="{Binding Header}" FontSize="15" />
                                    </Viewbox>
                                    
                                    <TextBlock Text="{Binding Count}" FontSize="15" Margin="0,20,0,0"/>
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
            <Grid Background="#bcbcbc" Grid.Column="1">
                <TabControl x:Name="tabcontrol" Margin="10">
                    <TabItem Header="test1" >
                        <Grid Style="{StaticResource GridStyle_grid}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <ToggleButton Grid.Column="1" Style="{StaticResource ToggleButtonStyle_auto}" IsChecked="False"/>
                            <ToggleButton Grid.Column="2" Style="{StaticResource ToggleButtonStyle_auto}" IsChecked="True"/>
                            <ToggleButton Grid.Row="1" Style="{StaticResource ToggleButtonStyle_auto}" IsChecked="False"/>
                            <ToggleButton Grid.Row="2" Style="{StaticResource ToggleButtonStyle_auto}" IsChecked="True"/>
                            <ToggleButton Grid.Row="3" Style="{StaticResource ToggleButtonStyle_auto}" IsChecked="False"/>
                            <Border Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource BorderStyle_hGridLine}" />
                            <Border Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource BorderStyle_hGridLine}"/>
                            <Border Grid.Column="1" Grid.Row="1" Grid.RowSpan="3" Style="{StaticResource BorderStyle_vGridLine}">
                                
                            </Border>
                            <Button Grid.Row="1" Grid.Column="1"  Style="{StaticResource ButtonStyle_component}" />
                        </Grid>
                    </TabItem>
                    <TabItem Header="test2" />
                    <TabItem Header="test3"/>
                </TabControl>
            </Grid>

        </Grid>
    </Grid>
</Page>