From 25f71e83277b09f6c8e960b8d51a0edc12b30254 Mon Sep 17 00:00:00 2001
From: DB p <onesound@oooz.net>
Date: Thu, 2 Dec 2021 18:14:36 +0900
Subject: [PATCH] Change Text to String Adjust Animation

---
 Flow.Launcher/Languages/en.xaml               |   9 +
 .../Resources/Pages/WelcomePage1.xaml         | 146 ++++--
 .../Resources/Pages/WelcomePage3.xaml         | 433 +++++++++---------
 .../Resources/Pages/WelcomePage4.xaml         |  59 ++-
 .../Resources/Pages/WelcomePage5.xaml         |  28 +-
 Flow.Launcher/WelcomeWindow.xaml.cs           |   5 +-
 6 files changed, 395 insertions(+), 285 deletions(-)

diff --git a/Flow.Launcher/Languages/en.xaml b/Flow.Launcher/Languages/en.xaml
index 94db7174e..d31d66651 100644
--- a/Flow.Launcher/Languages/en.xaml
+++ b/Flow.Launcher/Languages/en.xaml
@@ -258,4 +258,13 @@
     <system:String x:Key="HotkeyCtrlIDesc">Open Setting Window</system:String>
     <system:String x:Key="HotkeyF5Desc">Reload Plugin Data</system:String>
 
+    <system:String x:Key="RecommendWeather">g Weather</system:String>
+    <system:String x:Key="RecommendWeatherDesc">Weather in Google Result</system:String>
+    <system:String x:Key="RecommendShell">&gt; ping 8.8.8.8</system:String>
+    <system:String x:Key="RecommendShellDesc">Shell Command</system:String>
+    <system:String x:Key="RecommendBluetooth">Bluetooth</system:String>
+    <system:String x:Key="RecommendBluetoothDesc">Bluetooth in Windows Setting</system:String>
+    <system:String x:Key="RecommendAcronyms">vs</system:String>
+    <system:String x:Key="RecommendAcronymsDesc">Visual Studio</system:String>
+
 </ResourceDictionary>
diff --git a/Flow.Launcher/Resources/Pages/WelcomePage1.xaml b/Flow.Launcher/Resources/Pages/WelcomePage1.xaml
index 1c7531d64..a7882568d 100644
--- a/Flow.Launcher/Resources/Pages/WelcomePage1.xaml
+++ b/Flow.Launcher/Resources/Pages/WelcomePage1.xaml
@@ -1,15 +1,15 @@
-<Page x:Class="Flow.Launcher.Resources.Pages.WelcomePage1"
-      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-      xmlns:local="clr-namespace:Flow.Launcher.Resources.Pages"
-      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-      Title="WelcomePage1"
-      DataContext="{Binding RelativeSource={RelativeSource Self}}"
-      mc:Ignorable="d">
+<Page
+    x:Class="Flow.Launcher.Resources.Pages.WelcomePage1"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Flow.Launcher.Resources.Pages"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Title="WelcomePage1"
+    DataContext="{Binding RelativeSource={RelativeSource Self}}"
+    mc:Ignorable="d">
     <Page.Resources>
         <Style x:Key="StyleImageFadeIn" TargetType="{x:Type Image}">
-            <Setter Property="Opacity" Value="0" />
             <Style.Triggers>
                 <!--  Fades-in the image when it becomes visible  -->
                 <Trigger Property="IsVisible" Value="True">
@@ -17,7 +17,56 @@
                         <BeginStoryboard>
                             <BeginStoryboard.Storyboard>
                                 <Storyboard x:Name="FadeIn">
-                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:2" />
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="(Canvas.Top)"
+                                        From="105"
+                                        To="95"
+                                        Duration="0:0:1">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="Opacity"
+                                        From="0"
+                                        To="1"
+                                        Duration="0:0:1">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
+                                </Storyboard>
+                            </BeginStoryboard.Storyboard>
+                        </BeginStoryboard>
+                    </Trigger.EnterActions>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+        <Style x:Key="StyleImageFadeInText" TargetType="{x:Type TextBlock}">
+            <Style.Triggers>
+                <Trigger Property="IsVisible" Value="True">
+                    <Trigger.EnterActions>
+                        <BeginStoryboard>
+                            <BeginStoryboard.Storyboard>
+                                <Storyboard x:Name="FadeIn">
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="(Canvas.Top)"
+                                        From="110"
+                                        To="100"
+                                        Duration="0:0:1">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="Opacity"
+                                        From="0"
+                                        To="1"
+                                        Duration="0:0:1">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
                                 </Storyboard>
                             </BeginStoryboard.Storyboard>
                         </BeginStoryboard>
@@ -44,41 +93,56 @@
                 </Border.Background>
 
                 <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
-                    <Image Name="Logo"
-                           Width="60"
-                           Height="60"
-                           Source="../../images/app.png"
-                           Style="{DynamicResource StyleImageFadeIn}" />
-                    <TextBlock Margin="12,0,0,0"
-                               VerticalAlignment="Center"
-                               FontSize="30"
-                               Foreground="White">
-                        Flow Launcher
-                    </TextBlock>
+                    <Canvas Width="550" Height="250">
+                        <Image
+                            Name="Logo"
+                            Canvas.Left="140"
+                            Width="60"
+                            Height="60"
+                            Source="../../images/app.png"
+                            Style="{DynamicResource StyleImageFadeIn}" />
+                        <TextBlock
+                            Canvas.Left="205"
+                            Margin="12,0,0,0"
+                            VerticalAlignment="Center"
+                            FontSize="30"
+                            Foreground="White"
+                            Opacity="0"
+                            Style="{DynamicResource StyleImageFadeInText}">
+                            Flow Launcher
+                        </TextBlock>
+                    </Canvas>
                 </StackPanel>
             </Border>
 
             <StackPanel Grid.Row="1" Margin="24,20,24,20">
                 <StackPanel>
-                    <TextBlock FontSize="20" FontWeight="SemiBold" Text="{DynamicResource Welcome_Page1_Title}" />
-                    <TextBlock Margin="0,10,0,0"
-                               FontSize="14"
-                               Text="{DynamicResource Welcome_Page1_Text01}"
-                               TextWrapping="WrapWithOverflow" />
-                    <TextBlock Margin="0,10,0,0"
-                               FontSize="14"
-                               Text="{DynamicResource Welcome_Page1_Text02}"
-                               TextWrapping="WrapWithOverflow" />
-                    <TextBlock Margin="0,30,0,0"
-                               FontSize="14"
-                               FontWeight="SemiBold"
-                               Text="{DynamicResource language}" />
-                    <ComboBox Width="200"
-                              Margin="0,10,0,0"
-                              DisplayMemberPath="Display"
-                              ItemsSource="{Binding Languages}"
-                              SelectedValue="{Binding CustomLanguage, Mode=TwoWay}"
-                              SelectedValuePath="LanguageCode" />
+                    <TextBlock
+                        FontSize="20"
+                        FontWeight="SemiBold"
+                        Text="{DynamicResource Welcome_Page1_Title}" />
+                    <TextBlock
+                        Margin="0,10,0,0"
+                        FontSize="14"
+                        Text="{DynamicResource Welcome_Page1_Text01}"
+                        TextWrapping="WrapWithOverflow" />
+                    <TextBlock
+                        Margin="0,10,0,0"
+                        FontSize="14"
+                        Text="{DynamicResource Welcome_Page1_Text02}"
+                        TextWrapping="WrapWithOverflow" />
+                    <TextBlock
+                        Margin="0,30,0,0"
+                        FontSize="14"
+                        FontWeight="SemiBold"
+                        Text="{DynamicResource language}" />
+                    <ComboBox
+                        Width="200"
+                        Margin="0,10,0,0"
+                        DisplayMemberPath="Display"
+                        ItemsSource="{Binding Languages}"
+                        SelectedValue="{Binding CustomLanguage, Mode=TwoWay}"
+                        SelectedValuePath="LanguageCode" />
                 </StackPanel>
 
             </StackPanel>
diff --git a/Flow.Launcher/Resources/Pages/WelcomePage3.xaml b/Flow.Launcher/Resources/Pages/WelcomePage3.xaml
index f2108f009..97e431dc9 100644
--- a/Flow.Launcher/Resources/Pages/WelcomePage3.xaml
+++ b/Flow.Launcher/Resources/Pages/WelcomePage3.xaml
@@ -8,6 +8,11 @@
     Title="WelcomePage3"
     mc:Ignorable="d">
     <Page.Resources>
+        <Style x:Key="KbdLine" TargetType="Border">
+            <Setter Property="CornerRadius" Value="8" />
+            <Setter Property="Margin" Value="0,4,0,4" />
+            <Setter Property="Background" Value="{DynamicResource Color01B}" />
+        </Style>
         <Style x:Key="Kbd" TargetType="Border">
             <Setter Property="CornerRadius" Value="4" />
             <Setter Property="Padding" Value="12,4,12,4" />
@@ -24,7 +29,7 @@
     <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
         <Grid>
             <Grid.RowDefinitions>
-                <RowDefinition Height="60" />
+                <RowDefinition Height="0" />
                 <RowDefinition />
             </Grid.RowDefinitions>
 
@@ -41,9 +46,10 @@
                 <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                     <Image
                         Width="300"
-                        Height="40"
+                        Height="100"
                         Margin="0,0,0,0"
-                        Source="../../images/page_img02.png" />
+                        Source="../../images/page_img02.png"
+                        Style="{DynamicResource StyleImageFadeIn}" />
                 </StackPanel>
             </Border>
 
@@ -53,257 +59,244 @@
                 VerticalScrollBarVisibility="Auto">
                 <Grid>
                     <StackPanel Margin="24,20,24,20">
-
-                        <StackPanel>
+                        <StackPanel Margin="0,0,0,20">
                             <TextBlock
                                 FontSize="20"
                                 FontWeight="SemiBold"
                                 Text="{DynamicResource Welcome_Page3_Title}" />
                         </StackPanel>
-                        <StackPanel
-                            Margin="0,10,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}">←</TextBlock>
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">,</TextBlock>
-                                <Border Margin="5,0,0,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}">→</TextBlock>
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyUpDownDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}">←</TextBlock>
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">,</TextBlock>
+                                    <Border Margin="5,0,0,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}">→</TextBlock>
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyUpDownDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}">↑</TextBlock>
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">,</TextBlock>
-                                <Border Margin="5,0,0,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}">↓</TextBlock>
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyLeftRightDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}">↑</TextBlock>
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">,</TextBlock>
+                                    <Border Margin="5,0,0,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}">↓</TextBlock>
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyLeftRightDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}">Enter</TextBlock>
-                                </Border>
-
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyRunDesc}" />
-                            </StackPanel>
-                        </StackPanel>
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}">Enter</TextBlock>
+                                    </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="ESC" />
-                                </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyRunDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        </Border>
+
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyESCDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="ESC" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyESCDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Shift" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyShiftEnterDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Shift" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyShiftEnterDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyCtrlEnterDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyCtrlEnterDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Shift" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyCtrlShiftEnterDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Shift" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="ENTER" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyCtrlShiftEnterDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="H" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyCtrlHDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="H" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyCtrlHDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
-                                </Border>
-                                <TextBlock VerticalAlignment="Center">+</TextBlock>
-                                <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="I" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyCtrlIDesc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="Ctrl" />
+                                    </Border>
+                                    <TextBlock VerticalAlignment="Center">+</TextBlock>
+                                    <Border Margin="5,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="I" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyCtrlIDesc}" />
+                                </StackPanel>
                             </StackPanel>
-                        </StackPanel>
+                        </Border>
 
-                        <StackPanel
-                            Margin="0,2,0,2"
-                            Background="{DynamicResource Color01B}"
-                            Orientation="Horizontal">
-                            <StackPanel
-                                Width="210"
-                                Margin="20,5,4,5"
-                                VerticalAlignment="Center"
-                                Orientation="Horizontal">
-                                <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
-                                    <TextBlock Style="{DynamicResource KbdText}" Text="F5" />
-                                </Border>
-                            </StackPanel>
-                            <StackPanel VerticalAlignment="Center">
-                                <TextBlock
+                        <Border Style="{DynamicResource KbdLine}">
+                            <StackPanel Orientation="Horizontal">
+                                <StackPanel
+                                    Width="210"
+                                    Margin="20,5,4,5"
                                     VerticalAlignment="Center"
-                                    FontSize="13"
-                                    Text="{DynamicResource HotkeyF5Desc}" />
+                                    Orientation="Horizontal">
+                                    <Border Margin="0,0,5,0" Style="{DynamicResource Kbd}">
+                                        <TextBlock Style="{DynamicResource KbdText}" Text="F5" />
+                                    </Border>
+                                </StackPanel>
+                                <StackPanel VerticalAlignment="Center">
+                                    <TextBlock
+                                        VerticalAlignment="Center"
+                                        FontSize="13"
+                                        Text="{DynamicResource HotkeyF5Desc}" />
+                                </StackPanel>
                             </StackPanel>
-
-                        </StackPanel>
+                        </Border>
                     </StackPanel>
                 </Grid>
             </ScrollViewer>
diff --git a/Flow.Launcher/Resources/Pages/WelcomePage4.xaml b/Flow.Launcher/Resources/Pages/WelcomePage4.xaml
index 432c6d098..e2062dcf2 100644
--- a/Flow.Launcher/Resources/Pages/WelcomePage4.xaml
+++ b/Flow.Launcher/Resources/Pages/WelcomePage4.xaml
@@ -10,9 +10,31 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <Page.Resources>
+        <Style x:Key="StyleImageFadeIn" TargetType="{x:Type Image}">
+            <Style.Triggers>
+                <Trigger Property="IsVisible" Value="True">
+                    <Trigger.EnterActions>
+                        <BeginStoryboard>
+                            <BeginStoryboard.Storyboard>
+                                <Storyboard x:Name="Move">
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="(Canvas.Left)"
+                                        From="0"
+                                        To="100"
+                                        Duration="0:0:20">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
+                                </Storyboard>
+                            </BeginStoryboard.Storyboard>
+                        </BeginStoryboard>
+                    </Trigger.EnterActions>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
         <Style x:Key="RecommendQuery" TargetType="Border">
             <Setter Property="CornerRadius" Value="8" />
-            <Setter Property="Width" Value="600" />
             <Setter Property="Padding" Value="20,7,12,7" />
             <Setter Property="Margin" Value="4,4,4,4" />
             <Setter Property="Background" Value="{DynamicResource Color01B}" />
@@ -49,12 +71,19 @@
                 </Border.Background>
 
                 <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
-                    <Image
-                        Name="Logo"
-                        Width="450"
-                        Height="300"
-                        Margin="0,22,0,0"
-                        Source="../../images/page_img01.png" />
+                    <Canvas
+                        Width="600"
+                        Height="301"
+                        ClipToBounds="True">
+                        <Image
+                            Name="Logo"
+                            Canvas.Left="0"
+                            Width="450"
+                            Height="280"
+                            Margin="0,0,0,0"
+                            Source="../../images/page_img01.png"
+                            Style="{DynamicResource StyleImageFadeIn}" />
+                    </Canvas>
                 </StackPanel>
             </Border>
 
@@ -75,26 +104,26 @@
                         Rows="2">
                         <Border Style="{DynamicResource RecommendQuery}">
                             <StackPanel>
-                                <TextBlock Style="{DynamicResource QueryText}" Text="g Weather" />
-                                <TextBlock Style="{DynamicResource ResultText}" Text="Weather in Google Result " />
+                                <TextBlock Style="{DynamicResource QueryText}" Text="{DynamicResource RecommendWeather}" />
+                                <TextBlock Style="{DynamicResource ResultText}" Text="{DynamicResource RecommendWeatherDesc}" />
                             </StackPanel>
                         </Border>
                         <Border Style="{DynamicResource RecommendQuery}">
                             <StackPanel>
-                                <TextBlock Style="{DynamicResource QueryText}" Text="&gt; ping 8.8.8.8" />
-                                <TextBlock Style="{DynamicResource ResultText}" Text="Shell Command" />
+                                <TextBlock Style="{DynamicResource QueryText}" Text="{DynamicResource RecommendShell}" />
+                                <TextBlock Style="{DynamicResource ResultText}" Text="{DynamicResource RecommendShellDesc}" />
                             </StackPanel>
                         </Border>
                         <Border Style="{DynamicResource RecommendQuery}">
                             <StackPanel>
-                                <TextBlock Style="{DynamicResource QueryText}" Text="Bluetooth" />
-                                <TextBlock Style="{DynamicResource ResultText}" Text="Bluetooth in Windows Setting" />
+                                <TextBlock Style="{DynamicResource QueryText}" Text="{DynamicResource RecommendBluetooth}" />
+                                <TextBlock Style="{DynamicResource ResultText}" Text="{DynamicResource RecommendBluetoothDesc}" />
                             </StackPanel>
                         </Border>
                         <Border Style="{DynamicResource RecommendQuery}">
                             <StackPanel>
-                                <TextBlock Style="{DynamicResource QueryText}" Text="vs" />
-                                <TextBlock Style="{DynamicResource ResultText}" Text="Visual Studio" />
+                                <TextBlock Style="{DynamicResource QueryText}" Text="{DynamicResource RecommendAcronyms}" />
+                                <TextBlock Style="{DynamicResource ResultText}" Text="{DynamicResource RecommendAcronymsDesc}" />
                             </StackPanel>
                         </Border>
                     </UniformGrid>
diff --git a/Flow.Launcher/Resources/Pages/WelcomePage5.xaml b/Flow.Launcher/Resources/Pages/WelcomePage5.xaml
index fc1ac3944..39090f81d 100644
--- a/Flow.Launcher/Resources/Pages/WelcomePage5.xaml
+++ b/Flow.Launcher/Resources/Pages/WelcomePage5.xaml
@@ -21,10 +21,21 @@
                         <BeginStoryboard>
                             <BeginStoryboard.Storyboard>
                                 <Storyboard x:Name="FadeIn">
+
+                                    <DoubleAnimation
+                                        Storyboard.TargetProperty="(Canvas.Top)"
+                                        From="110"
+                                        To="75"
+                                        Duration="0:0:1">
+                                        <DoubleAnimation.EasingFunction>
+                                            <QuadraticEase EasingMode="EaseOut" />
+                                        </DoubleAnimation.EasingFunction>
+                                    </DoubleAnimation>
                                     <DoubleAnimation
                                         Storyboard.TargetProperty="Opacity"
+                                        From="0"
                                         To="1"
-                                        Duration="0:0:2">
+                                        Duration="0:0:1">
                                         <DoubleAnimation.EasingFunction>
                                             <QuadraticEase EasingMode="EaseOut" />
                                         </DoubleAnimation.EasingFunction>
@@ -55,12 +66,15 @@
                 </Border.Background>
 
                 <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
-                    <Image
-                        Name="Logo"
-                        Width="90"
-                        Height="90"
-                        Source="../../images/app.png"
-                        Style="{DynamicResource StyleImageFadeIn}" />
+                    <Canvas Width="550" Height="250">
+                        <Image
+                            Name="Logo"
+                            Canvas.Left="225"
+                            Width="100"
+                            Height="100"
+                            Source="../../images/app.png"
+                            Style="{DynamicResource StyleImageFadeIn}" />
+                    </Canvas>
                 </StackPanel>
             </Border>
 
diff --git a/Flow.Launcher/WelcomeWindow.xaml.cs b/Flow.Launcher/WelcomeWindow.xaml.cs
index ee8623461..49406fbaa 100644
--- a/Flow.Launcher/WelcomeWindow.xaml.cs
+++ b/Flow.Launcher/WelcomeWindow.xaml.cs
@@ -40,6 +40,8 @@ namespace Flow.Launcher
             ContentFrame.Navigate(pages[0]);
         }
 
+        private NavigationTransitionInfo _transitionInfo = new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight };
+        Storyboard sb = new Storyboard();
         private int page;
         private int pageNum = 1;
         private int MaxPage = 5;
@@ -65,8 +67,7 @@ namespace Flow.Launcher
                 NextButton.IsEnabled = true;
             }
         }
-        private NavigationTransitionInfo _transitionInfo = new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight };
-        Storyboard sb = new Storyboard();
+
         private void ForwardButton_Click(object sender, RoutedEventArgs e)
         {
             page = page + 1;