PgMainEditGage.xaml

<Page x:Class="MultiLayout.MainEdit.PgMainEditGage"
      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"
      xmlns:local="clr-namespace:MultiLayout.MainEdit"
      mc:Ignorable="d" 
      d:DesignHeight="768" d:DesignWidth="1024"
      Background="White"
      Title="Page_MainEditGraph">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="PgMainEditGageStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <SolidColorBrush x:Key="Item.MouseOver.Background" Color="Transparent"/>
            <SolidColorBrush x:Key="Item.MouseOver.Foreground" Color="White"/>
            <SolidColorBrush x:Key="Item.MouseOver.Border" Color="Black"/>

            <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#FF3B3B3B"/>
            <SolidColorBrush x:Key="Item.SelectedInactive.Foreground" Color="White"/>
            <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="Black"/>

            <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="White"/>
            <SolidColorBrush x:Key="Item.SelectedActive.Foreground" Color="Black"/>
            <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="Black"/>
            <Style TargetType="{x:Type TabItem}" x:Key="EditableTabItemStyle">
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style>
                            <Setter Property="Control.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Rectangle Margin="2" SnapsToDevicePixels="True" 
                                                   Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" 
                                                   StrokeThickness="1" StrokeDashArray="1 2"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
                <Setter Property="FontSize" Value="20"/>
                <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" Style="{StaticResource ButtonStyle_smallIcon}" Foreground="Black" 
                                                Click="button_itemEdit_Click"  >
                                            <iconPacks:PackIconMaterial Kind="Settings"/>
                                        </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_icon}" Foreground="Red"
                                                Click="button_itemDel_Click"
                                                >
                                            <iconPacks:PackIconMaterial Kind="CloseCircle"/>
                                        </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}" x:Key="EditableTabStyle">
                <Setter Property="Padding" Value="2"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Foreground" Value="{DynamicResource {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_icon}" Click="button_itemAdd_Click" >
                                            <Grid>
                                                <Ellipse Fill="White" Margin="2"/>
                                                <iconPacks:PackIconMaterial Kind="PlusCircle" />
                                            </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>
                <Setter Property="ItemContainerStyle" Value="{StaticResource EditableTabItemStyle}"/>
            </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="主界面布局管理"/>
                <TextBlock Style="{StaticResource TextBlockStyle_SubHeader}" Text="设备页面"/>
            </StackPanel>
            <Button Style="{StaticResource ButtonStyle_largeIcon}" Click="button_ok_Click" Margin="20,0">
                <iconPacks:PackIconMaterial Kind="CheckCircle" />
            </Button>
        </StackPanel>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid Background="#bcbcbc" Grid.Column="1">
                <TabControl x:Name="tabcontrol" Margin="{StaticResource ControlMargin}" Style="{StaticResource EditableTabStyle}">
                    <TabItem Header="test1" >
                        <local:UcMeGageTabItem/>
                    </TabItem>
                    <TabItem Header="test2" />
                    <TabItem Header="test3"/>
                </TabControl>
            </Grid>

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