<Border x:Class="SparkClient.Views.Configuration.ConfigMenuPage"
        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:local="clr-namespace:SparkClient.Views"
        Loaded="ConfigMenuPage_OnLoaded"
        mc:Ignorable="d" >
    <Border.Resources>
        <!-- 定义一个缩放变换,用于按钮的放大缩小 -->
        <ScaleTransform x:Key="ButtonScaleTransform" ScaleX="1" ScaleY="1" x:Shared="False" />

        <!-- 鼠标移入的放大动画 -->
        <Storyboard x:Key="MouseEnterStoryboard">
            <!-- 放大ScaleX -->
            <DoubleAnimation
                From="1" To="1.1"
                Duration="0:0:0.3"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <!-- 放大ScaleY -->
            <DoubleAnimation
                From="1" To="1.1"
                Duration="0:0:0.3"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>

        <!-- 鼠标移出的缩小动画 -->
        <Storyboard x:Key="MouseLeaveStoryboard">
            <!-- 缩回ScaleX -->
            <DoubleAnimation
                From="1.1" To="1"
                Duration="0:0:0.3"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <!-- 缩回ScaleY -->
            <DoubleAnimation
                From="1.1" To="1"
                Duration="0:0:0.3"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        
       
        <Style x:Key="CloseHoverImageStyle" TargetType="Image">
            <!-- 默认图片 -->
            <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/01-4.png"/>
            
            <Style.Triggers>
                <!-- DataTrigger: 当父级Border的IsMouseOver=True时,切换图片Source -->
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                    <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/01-4-1.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="MiniszieHoverImageStyle" TargetType="Image">
            <!-- 默认图片 -->
            <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/01-3.png"/>
            
            <Style.Triggers>
                <!-- DataTrigger: 当父级Border的IsMouseOver=True时,切换图片Source -->
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                    <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/02-2.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="InCloseHoverImageStyle" TargetType="Image">
            <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/01-8-1.png"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True">
                    <Setter Property="Source" Value="pack://application:,,,/Resource/Images/UIResource/01-8.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Resources>
    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="pack://application:,,,/Resource/Images/UIResource/08-bg.jpg" Stretch="UniformToFill" />
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="100"/>
            <RowDefinition />
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0" Height="100" VerticalAlignment="Top" MouseLeftButtonDown="UIElement_OnMouseLeftButtonDown">
            <!-- 顶部布局 -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        
            <Grid Grid.Column="0" Margin="20 0 5 0" Width="100">
                <Grid.RowDefinitions>
                    <RowDefinition Height="3*"/>
                    <RowDefinition Height="2*"/>
                </Grid.RowDefinitions>
                <Image Grid.Row="0" Source="../../Resource/Images/icon_200.png"
                       Width="80" Height="80"
                       VerticalAlignment="Center" HorizontalAlignment="Center"  />
                
                <TextBlock Grid.Row="1" Text="{DynamicResource ProcName}" Width="100"
                           VerticalAlignment="Center" FontWeight="Bold"
                           HorizontalAlignment="Left" FontSize="28" 
                           TextAlignment="Center">
                    <TextBlock.Foreground>
                        <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                            <GradientStop Color="#11ceff" Offset="0" />
                            <GradientStop Color="#0a699f" Offset="1" />
                        </LinearGradientBrush>
                    </TextBlock.Foreground>
                </TextBlock>
            </Grid>
            
            <!-- 首位元素:图标 -->
            <!-- <Image Grid.Column="0" Source="../../Resource/Images/UIResource/03-1-1.png" -->
            <!--        Width="30" Height="50" -->
            <!--        VerticalAlignment="Center" HorizontalAlignment="Center" Margin="20 0 5 0" /> -->
        
            <!-- 次位元素:标题 -->
            <!-- <TextBlock Grid.Column="1" Text="{DynamicResource ProcName}" -->
            <!--            VerticalAlignment="Center" FontWeight="Bold" -->
            <!--            HorizontalAlignment="Left" FontSize="20" > -->
            <!--     <TextBlock.Foreground> -->
            <!--         <LinearGradientBrush StartPoint="1,0" EndPoint="1,1"> -->
            <!--             <GradientStop Color="#11ceff" Offset="0" /> -->
            <!--             <GradientStop Color="#0a699f" Offset="1" /> -->
            <!--         </LinearGradientBrush> -->
            <!--     </TextBlock.Foreground> -->
            <!-- </TextBlock> -->
            <!-- 末位元素:操作按钮 -->
            <Grid Grid.Column="2" Width="260" HorizontalAlignment="Right">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <!-- 最小化 -->
                <Button Grid.Column="2"   BorderBrush="Transparent" Background="Transparent"
                        Padding="0" Height="40" BorderThickness="0" FocusVisualStyle="{x:Null}">
                    <Border Grid.Column="2"
                            Width="40" Height="40"
                            HorizontalAlignment="Center" VerticalAlignment="Center"
                            Background="Transparent"
                            MouseLeftButtonDown="Minimize_Click">
                        <Image Style="{StaticResource MiniszieHoverImageStyle}" Height="40"></Image>
                    </Border>
                </Button>
              
                <!-- 关闭 -->
                <Border Grid.Column="3"
                        Width="40" Height="40"
                        HorizontalAlignment="Center" VerticalAlignment="Center"
                        Background="Transparent"
                        Margin="30 0 "
                      
                        MouseLeftButtonDown="Close_Click">
                    <Image Height="40" Style="{StaticResource CloseHoverImageStyle}"></Image>
                </Border>
            </Grid>
        </Grid>
        <!-- Source="../../Resource/Images/UIResource/01-4.png"  -->
        <!-- MouseEnter="Border_Close_MouseEnter" -->
        <!-- MouseLeave="Border_MouseLeave" -->
        <Border Grid.Row="1" Width="1090" Height="400" BorderBrush="Transparent"  BorderThickness="1" CornerRadius="20">
           
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Button Grid.Row="0" Background="Transparent" BorderBrush="Transparent"  
                        HorizontalAlignment="Right" Padding="0" Margin="0 0 0 10 "
                        Command="{Binding CloseCommand}"  Width="50" Height="50">
                    <Image Style="{StaticResource InCloseHoverImageStyle}" x:Name="ImageClosed"  Width="40" Height="40"/>
                </Button>
                
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" MaxWidth="250"/>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" MaxWidth="250"/>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" MaxWidth="250"/>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" MaxWidth="250"/>
                    </Grid.ColumnDefinitions>
                    
                    <Button Grid.Column="0"  Padding="0" Width="250" Height="250" BorderBrush="Transparent" 
                            RenderTransformOrigin="0.5, 0.5" RenderTransform="{StaticResource ButtonScaleTransform}"
                            Command="{Binding LevelConfigCommand}">
                        <Button.Background>
                            <ImageBrush ImageSource="../../Resource/Images/UIResource/02-4.png"></ImageBrush>
                        </Button.Background>
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" />
                            </EventTrigger>
                        </Button.Triggers>
                        <TextBlock Foreground="Azure" FontWeight="Bold" FontSize="28" 
                                   Margin="0 125 0 0"
                                   Text="{StaticResource LevelConfig}"/>
                    </Button>
                    <Button Grid.Column="2"  Padding="0" Width="250" Height="250" BorderBrush="Transparent"
                            RenderTransformOrigin="0.5, 0.5" RenderTransform="{StaticResource ButtonScaleTransform}"
                            Command="{Binding AlgorithmConfigCommand}">
                        <Button.Background>
                            <ImageBrush ImageSource="../../Resource/Images/UIResource/02-5.png"></ImageBrush>
                        </Button.Background>
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" />
                            </EventTrigger>
                        </Button.Triggers>
                        <TextBlock Foreground="Azure" FontWeight="Bold" FontSize="28" 
                                   Margin="0 125 0 0"
                                   Text="{StaticResource AlgorithmConfig}"/>
                    </Button>
                    <Button Grid.Column="4"  Padding="0" Width="250" Height="250" BorderBrush="Transparent" 
                            RenderTransformOrigin="0.5, 0.5" RenderTransform="{StaticResource ButtonScaleTransform}"
                            Command="{Binding CutConfigCommand}">
                        <Button.Background>
                            <ImageBrush ImageSource="../../Resource/Images/UIResource/02-6.png"></ImageBrush>
                        </Button.Background>
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" />
                            </EventTrigger>
                        </Button.Triggers>
                        <TextBlock Foreground="Azure" FontWeight="Bold" FontSize="28" 
                                   Margin="0 125 0 0"
                                   Text="{StaticResource CutConfig}"/>
                    </Button>
                    <Button Grid.Column="6"  Padding="0" Width="250" Height="250" BorderBrush="Transparent" 
                            RenderTransformOrigin="0.5, 0.5" RenderTransform="{StaticResource ButtonScaleTransform}"
                            Command="{Binding SettingConfigCommand}">
                        <Button.Background>
                            <ImageBrush ImageSource="../../Resource/Images/UIResource/02-7.png"></ImageBrush>
                        </Button.Background>
                        <Button.Triggers>
                            <EventTrigger RoutedEvent="UIElement.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" />
                            </EventTrigger>
                            <EventTrigger RoutedEvent="UIElement.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" />
                            </EventTrigger>
                        </Button.Triggers>
                        <TextBlock Foreground="Azure" FontWeight="Bold" FontSize="28" 
                                   Margin="0 125 0 0"
                                   Text="{StaticResource SystemSetting}"/>
                    </Button>
                    
                </Grid>
                
            </Grid>
            
            
        </Border>
    </Grid>
</Border>