【统一教程步骤排版格式】Little Skin 外置登录

进行了大幅度修改：
统一了步骤格式，添加遗漏标点，更换一张图片以使排版美观，将部分文字归并至 MyHint，调整部分 MyHint 参数，合并两个按钮至文首

启动器/LittleSkin 外置登录使用教程.xaml

@@ -11,41 +11,66 @@
     </StackPanel>
 </local:MyCard>
 
-<local:MyCard Title="教程">
-    <StackPanel Margin="25,40,23,15">
-        <local:MyHint Margin="0,10,0,0" Text="以下填写的所有邮箱地址应全部为英文小写字母，否则将会出现 UUID 为 null 的情况导致无法进入服务器！" IsWarn="True" />
-        
-        <TextBlock Margin="0,10,0,0" Text="1. 前往 LittleSkin 注册一个账号。" />
+<local:MyCard Title="设置 Little Skin 外置登录" Margin="0,0,0,15">
+	<StackPanel Margin="25,40,23,15">
+        <local:MyHint Margin="0,-3,0,0" Text="以下填写的所有邮箱地址应全部为英文小写字母，否则将会出现 UUID 为 null 的情况导致无法进入服务器！"/>
+        <local:MyButton Margin="0,15,0,0" MinWidth="140" Padding="13,0" HorizontalAlignment="Left" Height="35" 
+                        Text="打开 LittleSkin" EventType="打开网页" EventData="https://littleskin.cn" />
         <local:MyHint Margin="0,10,0,0" Text="在注册 LittleSkin 账号时不要使用第三方登录，可能会导致账号无法设置密码，从而无法继续操作！" IsWarn="False" />
-        <local:MyButton Margin="0,10,0,0" MinWidth="140" Padding="13,0" HorizontalAlignment="Left" Height="35" Text="打开 LittleSkin 注册界面" EventType="打开网页" EventData="https://littleskin.cn/auth/register" />
-        <Image Margin="0,10,0,0" Height="360" HorizontalAlignment="Left" Source ="https://cdn.img.z0z0r4.top/2022/07/10/1/img1.png" />
+        <Grid Margin="0,10,0,0">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="1. 前往 LittleSkin 注册一个账号。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/05/15/64623b15ae134.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="2. 进入“仪表盘”，点击左侧“角色管理”，再点击“添加新角色”。" />
-        <local:MyButton Margin="0,10,0,0" MinWidth="140" Padding="13,0" HorizontalAlignment="Left" Height="35" Text="打开 LittleSkin 用户中心" EventType="打开网页" EventData="https://littleskin.cn/user" />
-        <Image Margin="0,10,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2022/07/10/1/img2.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="2. 进入“仪表盘”，点击左侧“角色管理”，再点击“添加新角色”。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2022/07/10/1/img2.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="3. 在弹出的窗口内输入角色名（这将会成为联机时的 ID，即游戏中的用户名），填写完成后点击“确定”。" />
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2022/07/10/1/img3.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="3. 在弹出的窗口内输入角色名（这将会成为联机时的 ID，即游戏中的用户名），填写完成后点击“确定”。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2022/07/10/1/img3.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="4. 打开 PCL2，点击左下角的“版本选择”。" />
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230b5136.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="4. 打开 PCL2，点击左下角的“版本选择”。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230b5136.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="5. 右键点击将要启动的游戏版本。" />
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left"  Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230bedd5.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="5. 右键点击将要启动的游戏版本。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230bedd5.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="6. 点击左侧“设置”选项。" />
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230c9e9b.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="6. 点击左侧“设置”选项。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/19/63f20230c9e9b.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="7. 滑动到页面底部，在“服务器选项”中把登录方式设为“第三方登录：Authlib Injector 或 LittleSkin”" />   
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36df35222d.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="7. 滑动到页面底部，在“服务器选项”中把登录方式设为“第三方登录：Authlib Injector 或 LittleSkin”。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36df35222d.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="8. 点击下方“设置为 LittleSkin”按钮，并点击“确定”。" />   
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36e0268931.png" />
+        <Grid Margin="0,20,0,4">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="8. 点击下方“设置为 LittleSkin”按钮，并点击“确定”。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36e0268931.png" />
+        </Grid>
 
-        <TextBlock Margin="0,50,0,0" Text="9. 返回主菜单并输入你的 LittleSkin 账号，点击“启动游戏”即可。" />   
-        <Image Margin="0,20,0,0" Height="360" HorizontalAlignment="Left" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36e13ba79e.png" />
-        
-        <TextBlock Margin="0,50,0,0" Text="在启动游戏后，PCL2 能够记忆你的账号，并且可以进行更换角色、更改皮肤、退出登录等操作。" />
+        <local:MyHint Margin="0,20,0,0" Text="在启动游戏后，PCL2 能够记忆你的账号，并且可以进行更换角色、更改皮肤、退出登录等操作。" IsWarn="False" />
+        <Grid Margin="0,10,0,0">
+            <TextBlock TextWrapping="Wrap" Margin="0,15,0,4" Width="200"
+                        Text="9. 返回主菜单并输入你的 LittleSkin 账号，点击“启动游戏”即可。" HorizontalAlignment="Left" />
+            <Image Margin="250,0,0,0" HorizontalAlignment="Center" Source="https://cdn.img.z0z0r4.top/2023/02/20/63f36e13ba79e.png" />
+        </Grid>
     </StackPanel>
 </local:MyCard>