<Page x:Class="MultiLayout.MainEdit.PgMainEditDynArea"
      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" 

      mc:Ignorable="d" 
      d:DesignHeight="768" d:DesignWidth="1024"
      Background="White"
      Title="Page_MainEditGraph">
    <Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MultiLayout;component/Themes/Styles.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 x:Key="TabItemStyle1" 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="30,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="1,1,1,0" Background="{TemplateBinding Background}" Margin="0"/>

                                <ContentPresenter 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}}}"/>
                            </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}"/>
                                </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 x:Key="TabControlStyle_ABC" TargetType="{x:Type TabControl}">
                <Setter Property="Padding" Value="2"/>
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="BorderThickness" Value="1"/>
                <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.ColumnDefinitions>
                                    <ColumnDefinition x:Name="ColumnDefinition0"/>
                                    <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition x:Name="RowDefinition1" Height="*"/>
                                </Grid.RowDefinitions>
                                <TabPanel x:Name="headerPanel" VerticalAlignment="Bottom" Background="Transparent" Grid.Column="0" IsItemsHost="true" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
                                <Border x:Name="contentPanel" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
                                    <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


            <Style TargetType="Border" x:Key="BorderStyle_background">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Margin" Value="3"/>
                <Setter Property="CornerRadius" Value="3"/>
                <Setter Property="Effect">
                    <Setter.Value>
                        <DropShadowEffect Color="Black" Direction="270" ShadowDepth="1" Opacity="0.23" />
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="{x:Type Button}" x:Key="ButtonStyle_component" >
                <Setter Property="Height" Value="80"/>
                <Setter Property="Background" Value="White"/>
                <Setter Property="Content" Value="{Binding Type.Header}"/>
                <Setter Property="Padding" Value="3"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Style="{StaticResource BorderStyle_background}" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}" Width="{TemplateBinding Width}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition Width="auto"/>
                                    </Grid.ColumnDefinitions>
                                    
                                    <TextBlock Text="{TemplateBinding Content}" TextWrapping = "Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="15" Margin="5"/>
                                    
                                    <Button Grid.Column="1" 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" BorderBrush="#FF0C0C0C">
                                <StackPanel Margin="10">
                                    <TextBlock Text="{Binding Header}" FontSize="18" TextWrapping = "Wrap" />
                                    <TextBlock Text="{Binding Count}" FontSize="12" Margin="0,20,0,0"/>
                                </StackPanel>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
            <Grid Background="#bcbcbc" Grid.Column="1">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel Width="73" Background="#FF363636" Opacity="0.5" >
                    <StackPanel.Resources>
                        <ResourceDictionary>
                            <Style TargetType="{x:Type StackPanel}" x:Key="StackPanelStyle_button">
                                <Setter Property="Margin" Value="5"/>
                            </Style>
                            <Style TargetType="{x:Type Ellipse}">
                                <Setter Property="Height" Value="36"/>
                                <Setter Property="Width" Value="36"/>
                                <Setter Property="Stroke" Value="White"/>
                                <Setter Property="StrokeThickness" Value="4"/>
                            </Style>
                            <Style TargetType="{x:Type Rectangle}">
                                <Setter Property="Height" Value="36"/>
                                <Setter Property="Width" Value="36"/>
                                <Setter Property="Stroke" Value="White"/>
                                <Setter Property="StrokeThickness" Value="4"/>
                            </Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Foreground" Value="White"/>
                                <Setter Property="TextAlignment" Value="Center"/>
                                <Setter Property="FontSize" Value="12"/>
                                <Setter Property="FontFamily" Value="YouYuan"/>
                                <Setter Property="Margin" Value="3"/>
                                <Setter Property="FontWeight" Value="Bold"/>
                            </Style>
                        </ResourceDictionary>
                    </StackPanel.Resources>
                    <StackPanel Style="{StaticResource StackPanelStyle_button}">
                        <Ellipse />
                        <TextBlock Text="□□"/>
                    </StackPanel>
                    <StackPanel Style="{StaticResource StackPanelStyle_button}">
                        <Ellipse />
                        <TextBlock Text="□□"/>
                    </StackPanel>
                    <StackPanel Style="{StaticResource StackPanelStyle_button}">
                        <Ellipse Stroke="Red"/>
                        <TextBlock Text="□□" Foreground="Red"/>
                    </StackPanel>
                    <StackPanel Style="{StaticResource StackPanelStyle_button}">
                        <Rectangle />
                        <TextBlock Text="□□"/>
                    </StackPanel>
                </StackPanel>
                <Viewbox Grid.Column="1" Margin="5" MaxWidth="250" VerticalAlignment="Top">
                    <StackPanel Orientation="Vertical" Width="250" >
                        <!--<Border Style="{StaticResource BorderStyle_background}" >
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition  />
                                    <RowDefinition Height="auto" />
                                </Grid.RowDefinitions>
                                <Border Background="{StaticResource Color_theme_activity}" CornerRadius="3" Height="100" />
                                <StackPanel Grid.Row="1" Margin="2" Height="35"/>
                            </Grid>
                        </Border>-->
                        
                        <StackPanel x:Name="stackpanel_dynArea">
                            <Button Style="{StaticResource ButtonStyle_component}" Height="100" Content="123123123123123123112312321"/>
                        </StackPanel>
                    </StackPanel>
                </Viewbox>
                <TabControl Grid.Column="2" FontSize="40" Margin="10" Style="{StaticResource TabControlStyle_ABC}" Opacity="0.5" IsEnabled="False">
                    <TabControl.Resources>
                        <Style TargetType="Border" x:Key="BorderStyle_background">
                            <Setter Property="Background" Value="#FF7C7C7C"/>
                            <Setter Property="Margin" Value="10"/>
                            <Setter Property="CornerRadius" Value="3"/>
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <DropShadowEffect Color="Black" Direction="270" ShadowDepth="1" Opacity="0.23" />
                                </Setter.Value>
                            </Setter>
                        </Style>

                    </TabControl.Resources>
                    <TabItem Header="□□□" Style="{StaticResource TabItemStyle1}" >
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Border Style="{StaticResource BorderStyle_background}"/>
                            <Border Grid.Row="1" Style="{StaticResource BorderStyle_background}"/>
                            <Border Grid.Row="2" Style="{StaticResource BorderStyle_background}"/>
                        </Grid>

                    </TabItem>
                    <TabItem Header="□□□" Style="{StaticResource TabItemStyle1}"/>
                    <TabItem Header="□□□" Style="{StaticResource TabItemStyle1}"/>
                </TabControl>
            </Grid>

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