From 04fcde2b0fea93fc66bf77ac90bb04a20326fcbf Mon Sep 17 00:00:00 2001
From: "DESKTOP-3BO4HSG\\ksat" <zggsong@foxmail.com>
Date: Mon, 9 Jan 2023 14:15:24 +0800
Subject: [PATCH] feat: add loading

---
 STranslate/STranslate.csproj    |   7 ++
 STranslate/View/Loading.xaml    |  45 +++++++++
 STranslate/View/Loading.xaml.cs |  28 ++++++
 STranslate/View/MainWindow.xaml | 156 ++++++++++++++++++++++++++++----
 STranslate/ViewModel/MainVM.cs  |  14 ++-
 5 files changed, 231 insertions(+), 19 deletions(-)
 create mode 100644 STranslate/View/Loading.xaml
 create mode 100644 STranslate/View/Loading.xaml.cs

diff --git a/STranslate/STranslate.csproj b/STranslate/STranslate.csproj
index 39f86b1..a9504f9 100644
--- a/STranslate/STranslate.csproj
+++ b/STranslate/STranslate.csproj
@@ -104,6 +104,10 @@
     </Compile>
     <Compile Include="Util\Util.cs" />
     <Compile Include="ViewModel\MainVM.cs" />
+    <Page Include="View\Loading.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="View\MainWindow.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -112,6 +116,9 @@
       <DependentUpon>App.xaml</DependentUpon>
       <SubType>Code</SubType>
     </Compile>
+    <Compile Include="View\Loading.xaml.cs">
+      <DependentUpon>Loading.xaml</DependentUpon>
+    </Compile>
     <Compile Include="View\MainWindow.xaml.cs">
       <DependentUpon>MainWindow.xaml</DependentUpon>
       <SubType>Code</SubType>
diff --git a/STranslate/View/Loading.xaml b/STranslate/View/Loading.xaml
new file mode 100644
index 0000000..107929a
--- /dev/null
+++ b/STranslate/View/Loading.xaml
@@ -0,0 +1,45 @@
+<UserControl x:Class="STranslate.View.Loading"
+             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:STranslate.View"
+             mc:Ignorable="d" 
+             d:DesignHeight="100" d:DesignWidth="200">
+    <UserControl.Resources>
+        <Style x:Key="ellipse" TargetType="Ellipse">
+            <Setter Property="Width" Value="10"/>
+            <Setter Property="Height" Value="10"/>
+            <Setter Property="Fill" Value="#af67c1"/>
+            <Setter Property="RenderTransform">
+                <Setter.Value>
+                    <TranslateTransform X="0" Y="0"/>
+                </Setter.Value>
+            </Setter>
+        </Style>
+        <PowerEase x:Key="powerEase" Power="2" EasingMode="EaseInOut"/>
+    </UserControl.Resources>
+
+    <Canvas>
+        <Canvas.Triggers>
+            <EventTrigger RoutedEvent="Loaded">
+                <BeginStoryboard>
+                    <Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)">
+                        <DoubleAnimation Storyboard.TargetName="e1" To="-10" BeginTime="0:0:0.0" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/>
+                        <DoubleAnimation Storyboard.TargetName="e2" To="-10" BeginTime="0:0:0.1" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/>
+                        <DoubleAnimation Storyboard.TargetName="e3" To="-10" BeginTime="0:0:0.2" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/>
+                        <DoubleAnimation Storyboard.TargetName="e4" To="-10" BeginTime="0:0:0.3" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/>
+                        <DoubleAnimation Storyboard.TargetName="e5" To="-10" BeginTime="0:0:0.4" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/>
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </Canvas.Triggers>
+
+        <Ellipse Name="e1" Canvas.Left="20" Style="{StaticResource ellipse}"/>
+        <Ellipse Name="e2" Canvas.Left="40" Style="{StaticResource ellipse}"/>
+        <Ellipse Name="e3" Canvas.Left="60" Style="{StaticResource ellipse}"/>
+        <Ellipse Name="e4" Canvas.Left="80" Style="{StaticResource ellipse}"/>
+        <Ellipse Name="e5" Canvas.Left="100" Style="{StaticResource ellipse}"/>
+    </Canvas>
+
+</UserControl>
diff --git a/STranslate/View/Loading.xaml.cs b/STranslate/View/Loading.xaml.cs
new file mode 100644
index 0000000..3c4bb12
--- /dev/null
+++ b/STranslate/View/Loading.xaml.cs
@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace STranslate.View
+{
+    /// <summary>
+    /// Loading.xaml 的交互逻辑
+    /// </summary>
+    public partial class Loading : UserControl
+    {
+        public Loading()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/STranslate/View/MainWindow.xaml b/STranslate/View/MainWindow.xaml
index 612c4fa..d459f27 100644
--- a/STranslate/View/MainWindow.xaml
+++ b/STranslate/View/MainWindow.xaml
@@ -37,6 +37,122 @@
             <MenuItem Header="退出"
                       Command="{Binding ExitCmd}"/>
         </ContextMenu>
+        <Style x:Key="ExpanderStyle1" TargetType="{x:Type Expander}">
+            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
+            <Setter Property="Background" Value="Transparent"/>
+            <Setter Property="BorderBrush" Value="#918C8C"/>
+            <Setter Property="BorderThickness" Value="0 0 0 0"/>
+            <Setter Property="Template">
+                <Setter.Value>
+                    <ControlTemplate TargetType="{x:Type Expander}">
+                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" SnapsToDevicePixels="True">
+                            <DockPanel>
+                                <ToggleButton x:Name="HeaderSite" ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                             Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="{TemplateBinding Foreground}"
+                                             FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}"
+                                             FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}"
+                                             FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                             IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                                             Margin="1" MinWidth="0" MinHeight="0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding
+                                   VerticalContentAlignment}">
+                                    <ToggleButton.FocusVisualStyle>
+                                        <Style>
+                                            <Setter Property="Control.Template">
+                                                <Setter.Value>
+                                                    <ControlTemplate>
+                                                        <Border>
+                                                            <Rectangle Margin="0"
+                                                                       SnapsToDevicePixels="True"
+                                                                       Stroke="Black"
+                                                                       StrokeThickness="1"
+                                                                       StrokeDashArray="1 2"/>
+                                                        </Border>
+                                                    </ControlTemplate>
+                                                </Setter.Value>
+                                            </Setter>
+                                        </Style>
+                                    </ToggleButton.FocusVisualStyle>
+                                    <ToggleButton.Style>
+                                        <Style TargetType="{x:Type ToggleButton}">
+                                            <Setter Property="Template">
+                                                <Setter.Value>
+                                                    <ControlTemplate TargetType="{x:Type ToggleButton}">
+                                                        <Border Padding="{TemplateBinding Padding}">
+                                                            <Grid>
+                                                                <Grid.ColumnDefinitions>
+                                                                    <ColumnDefinition Width="19*"/>
+                                                                </Grid.ColumnDefinitions>
+                                                                
+                                                                <Path Grid.Column="0"
+                                                                      x:Name="arrow"
+                                                                      Data="M1,1.5L4.5,5 8,1.5"
+                                                                      HorizontalAlignment="Right"
+                                                                      SnapsToDevicePixels="False"
+                                                                      Stroke="#918C8C"
+                                                                      StrokeThickness="2"
+                                                                      VerticalAlignment="Center"
+                                                                      Height="10"
+                                                                      Margin="10,10" />
+                                                                
+                                                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                                                  Content="{TemplateBinding Content}"
+                                                                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
+                                                                                  HorizontalAlignment="Left"
+                                                                                  Margin="4,0,0,0"
+                                                                                  RecognizesAccessKey="True"
+                                                                                  SnapsToDevicePixels="True"
+                                                                                  VerticalAlignment="Center"  />
+                                                            </Grid>
+                                                        </Border>
+                                                        <ControlTemplate.Triggers>
+                                                            <Trigger Property="IsChecked" Value="True">
+                                                                <Setter Property="Data" TargetName="arrow" Value="M1,4.5L4.5,1 8,4.5"/>
+                                                            </Trigger>
+                                                            <Trigger Property="IsMouseOver" Value="True">
+                                                                <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
+                                                            </Trigger>
+                                                            <Trigger Property="IsPressed" Value="True">
+                                                                <Setter Property="Stroke" TargetName="arrow" Value="Black"/>
+                                                            </Trigger>
+                                                            <Trigger Property="IsEnabled" Value="False">
+                                                                <Setter Property="Stroke" TargetName="arrow" Value="#FF707070"/>
+                                                            </Trigger>
+                                                        </ControlTemplate.Triggers>
+                                                    </ControlTemplate>
+                                                </Setter.Value>
+                                            </Setter>
+                                        </Style>
+                                    </ToggleButton.Style>
+                                </ToggleButton>
+                                <ContentPresenter x:Name="ExpandSite"
+                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                  Content="{TemplateBinding Content}"
+                                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
+                                                  DockPanel.Dock="Bottom"
+                                                  Focusable="False"
+                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                  Margin="{TemplateBinding Padding}"
+                                                  Visibility="Collapsed"
+                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            </DockPanel>
+                        </Border>
+                        <ControlTemplate.Triggers>
+                            <Trigger Property="IsExpanded"
+                                     Value="True">
+                                <Setter Property="Visibility"
+                                        TargetName="ExpandSite"
+                                        Value="Visible"/>
+                            </Trigger>
+                            <Trigger Property="IsEnabled"
+                                     Value="False">
+                                <Setter Property="Foreground"
+                                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
+                            </Trigger>
+                        </ControlTemplate.Triggers>
+                    </ControlTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style>
     </Window.Resources>
 
     <Window.InputBindings>
@@ -163,41 +279,47 @@
             <Grid x:Name="Output"
                   Margin="10,0,10,10"
                   Grid.Row="3">
-                <!--输出框-->
-                <Border x:Name="BorderOutput"
+                <Expander IsExpanded="{Binding IsExpanded}"
+                          Style="{StaticResource ExpanderStyle1}">
+                    <Expander.Header>
+                        <local:Loading Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}"/>
+                    </Expander.Header>
+                    <!--输出框-->
+                    <Border x:Name="BorderOutput"
                         Style="{DynamicResource BorderInOutputStyle}"
                         Height="{Binding Height, ElementName=Output}">
-                    <Grid>
-                        <TextBox x:Name="TextBoxOutput"
+                        <Grid>
+                            <TextBox x:Name="TextBoxOutput"
                                  Style="{DynamicResource TextBoxOutputStyle}"
                                  Text="{Binding OutputTxt}"/>
-                        <StackPanel Orientation="Horizontal"
+                            <StackPanel Orientation="Horizontal"
                                     Margin="10,5"
                                     VerticalAlignment="Bottom">
-                            <Button Template="{DynamicResource ButtonTemplateSpeak}"
+                                <Button Template="{DynamicResource ButtonTemplateSpeak}"
                                     Visibility="{Binding OutputTxt, Converter={StaticResource String2VisibilityConverter}}"
                                     Command="{Binding TargetSpeakCmd}"/>
-                            <!--普通复制-->
-                            <Button Template="{DynamicResource ButtonTemplate}"
+                                <!--普通复制-->
+                                <Button Template="{DynamicResource ButtonTemplate}"
                                     Visibility="{Binding OutputTxt, Converter={StaticResource String2VisibilityConverter}}"
                                     Command="{Binding CopyResultCmd}"/>
-                            <!--蛇形复制-->
-                            <Button Margin="5,0"
+                                <!--蛇形复制-->
+                                <Button Margin="5,0"
                                     Template="{DynamicResource ButtonTemplateSnakeCopy}"
                                     Visibility="{Binding SnakeRet, Converter={StaticResource String2VisibilityConverter}}"
                                     Command="{Binding CopySnakeResultCmd}"/>
-                            <!--小驼峰复制-->
-                            <Button Template="{DynamicResource ButtonTemplateSmallHumpCopy}"
+                                <!--小驼峰复制-->
+                                <Button Template="{DynamicResource ButtonTemplateSmallHumpCopy}"
                                     Visibility="{Binding SmallHumpRet, Converter={StaticResource String2VisibilityConverter}}"
                                     Command="{Binding CopySmallHumpResultCmd}"/>
-                            <!--大驼峰复制-->
-                            <Button Margin="5,0"
+                                <!--大驼峰复制-->
+                                <Button Margin="5,0"
                                     Template="{DynamicResource ButtonTemplateLargeHumpCopy}"
                                     Visibility="{Binding LargeHumpRet, Converter={StaticResource String2VisibilityConverter}}"
                                     Command="{Binding CopyLargeHumpResultCmd}"/>
-                        </StackPanel>
-                    </Grid>
-                </Border>
+                            </StackPanel>
+                        </Grid>
+                    </Border>
+                </Expander>
             </Grid>
         </Grid>
     </Border>
diff --git a/STranslate/ViewModel/MainVM.cs b/STranslate/ViewModel/MainVM.cs
index 5cda315..45aeb2d 100644
--- a/STranslate/ViewModel/MainVM.cs
+++ b/STranslate/ViewModel/MainVM.cs
@@ -182,6 +182,7 @@ namespace STranslate.ViewModel
         }
         public void InputTranslate()
         {
+            IsExpanded = false;
             ClearAll();
             OpenMainWin();
         }
@@ -300,9 +301,11 @@ namespace STranslate.ViewModel
         {
             try
             {
+                IsLoading = true;
+
                 var isEng = string.Empty;
                 IdentifyLanguage = string.Empty;
-                OutputTxt = "翻译中...";
+                //OutputTxt = "翻译中...";
                 //清空多种复制
                 SnakeRet = string.Empty;
                 SmallHumpRet = string.Empty;
@@ -323,12 +326,13 @@ namespace STranslate.ViewModel
 
                 //百度 Api
                 //var translateResp = await TranslateUtil.TranslateBaiduAsync(config.baidu.appid, config.baidu.secretKey, InputTxt, LanguageEnumDict[OutputComboSelected], LanguageEnumDict[InputComboSelected]);
-
+                IsLoading = false;
                 if (translateResp == string.Empty)
                 {
                     OutputTxt = "翻译出错，请稍候再试...";
                     return;
                 }
+                IsExpanded = true;
                 OutputTxt = translateResp;
 
                 //如果目标语言不是英文则不进行转换
@@ -403,6 +407,12 @@ namespace STranslate.ViewModel
         /// </summary>
         private ConfigModel _GlobalConfig;
 
+        private bool _IsExpanded;
+        public bool IsExpanded { get => _IsExpanded; set => UpdateProperty(ref _IsExpanded, value); }
+
+        private bool _IsLoading = true;
+        public bool IsLoading { get => _IsLoading; set => UpdateProperty(ref _IsLoading, value); }
+
         /// <summary>
         /// 识别语种
         /// </summary>