XFEstudio/MyFirstRespo
完善侧边选项栏及其动画设计
42e7a88
代码差异
18 个文件
+218
-121
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
二进制文件已变更，无法进行逐行预览。
@@ -99,15 +99,120 @@
99
99
</EventTrigger>
100
100
</Style.Triggers>
101
101
</Style>
102
<Style x:Key="NavigationButtonText" TargetType="TextBlock">
103
<Setter Property="Foreground" Value="#8998e7"/>
104
<Setter Property="FontSize" Value="15"/>
105
<Setter Property="Margin" Value="10,0,0,0"/>
106
<Setter Property="HorizontalAlignment" Value="Left"/>
107
<Setter Property="VerticalAlignment" Value="Center"/>
108
</Style>
102
109
<Style x:Key="NavigationButton" TargetType="RadioButton">
110
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
111
<Setter Property="Margin" Value="10,5"/>
103
112
<Setter Property="Template">
104
113
<Setter.Value>
105
114
<ControlTemplate TargetType="RadioButton">
106
<Border CornerRadius="15">
107
115
<Border x:Name="mainBorder" CornerRadius="15" HorizontalAlignment="Stretch" Height="40" Background="White" BorderBrush="#9898e7" BorderThickness="1.5" RenderTransformOrigin="0.5,0.5">
116
<Border.RenderTransform>
117
<ScaleTransform x:Name="mainBorderScale" ScaleX="1" ScaleY="1"/>
118
</Border.RenderTransform>
119
<Border.Effect>
120
<DropShadowEffect x:Name="mainBorderShadow" Color="#9898e7" BlurRadius="8" ShadowDepth="3" Direction="-45" Opacity="0"/>
121
</Border.Effect>
122
<Grid>
123
<Grid.ColumnDefinitions>
124
<ColumnDefinition Width="40"/>
125
<ColumnDefinition Width="10"/>
126
<ColumnDefinition Width="*"/>
127
</Grid.ColumnDefinitions>
128
<Border x:Name="borderSplit" Grid.Column="1" Background="#9898e7" CornerRadius="2" Width="3" Opacity="0.5" HorizontalAlignment="Left" VerticalAlignment="Stretch" Margin="0,5"/>
129
<ContentPresenter Grid.ColumnSpan="3"/>
130
</Grid>
108
131
</Border>
132
<ControlTemplate.Triggers>
133
<EventTrigger RoutedEvent="MouseEnter">
134
<BeginStoryboard>
135
<Storyboard>
136
<DoubleAnimation Storyboard.TargetName="mainBorderScale" Storyboard.TargetProperty="ScaleX" From="1" To="1.1" Duration="0:0:0.3">
137
<DoubleAnimation.EasingFunction>
138
<CubicEase EasingMode="EaseOut"/>
139
</DoubleAnimation.EasingFunction>
140
</DoubleAnimation>
141
<DoubleAnimation Storyboard.TargetName="mainBorderScale" Storyboard.TargetProperty="ScaleY" From="1" To="1.1" Duration="0:0:0.3">
142
<DoubleAnimation.EasingFunction>
143
<CubicEase EasingMode="EaseOut"/>
144
</DoubleAnimation.EasingFunction>
145
</DoubleAnimation>
146
<ThicknessAnimation Storyboard.TargetName="mainBorder" Storyboard.TargetProperty="Margin" From="0,0" To="0,10" Duration="0:0:0.3">
147
<ThicknessAnimation.EasingFunction>
148
<CubicEase EasingMode="EaseOut"/>
149
</ThicknessAnimation.EasingFunction>
150
</ThicknessAnimation>
151
</Storyboard>
152
</BeginStoryboard>
153
</EventTrigger>
154
<EventTrigger RoutedEvent="MouseLeave">
155
<BeginStoryboard>
156
<Storyboard>
157
<DoubleAnimation Storyboard.TargetName="mainBorderScale" Storyboard.TargetProperty="ScaleX" From="1.1" To="1" Duration="0:0:0.3">
158
<DoubleAnimation.EasingFunction>
159
<CubicEase EasingMode="EaseOut"/>
160
</DoubleAnimation.EasingFunction>
161
</DoubleAnimation>
162
<DoubleAnimation Storyboard.TargetName="mainBorderScale" Storyboard.TargetProperty="ScaleY" From="1.1" To="1" Duration="0:0:0.3">
163
<DoubleAnimation.EasingFunction>
164
<CubicEase EasingMode="EaseOut"/>
165
</DoubleAnimation.EasingFunction>
166
</DoubleAnimation>
167
<ThicknessAnimation Storyboard.TargetName="mainBorder" Storyboard.TargetProperty="Margin" From="0,10" To="0,0" Duration="0:0:0.3">
168
<ThicknessAnimation.EasingFunction>
169
<CubicEase EasingMode="EaseOut"/>
170
</ThicknessAnimation.EasingFunction>
171
</ThicknessAnimation>
172
</Storyboard>
173
</BeginStoryboard>
174
</EventTrigger>
175
<EventTrigger RoutedEvent="Checked">
176
<BeginStoryboard>
177
<Storyboard>
178
<DoubleAnimation Storyboard.TargetName="mainBorderShadow" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.3">
179
<DoubleAnimation.EasingFunction>
180
<CubicEase EasingMode="EaseOut"/>
181
</DoubleAnimation.EasingFunction>
182
</DoubleAnimation>
183
<DoubleAnimation Storyboard.TargetName="borderSplit" Storyboard.TargetProperty="Opacity" From="0.5" To="1" Duration="0:0:0.3">
184
<DoubleAnimation.EasingFunction>
185
<CubicEase EasingMode="EaseOut"/>
186
</DoubleAnimation.EasingFunction>
187
</DoubleAnimation>
188
</Storyboard>
189
</BeginStoryboard>
190
</EventTrigger>
191
<EventTrigger RoutedEvent="Unchecked">
192
<BeginStoryboard>
193
<Storyboard>
194
<DoubleAnimation Storyboard.TargetName="mainBorderShadow" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.3">
195
<DoubleAnimation.EasingFunction>
196
<CubicEase EasingMode="EaseOut"/>
197
</DoubleAnimation.EasingFunction>
198
</DoubleAnimation>
199
<DoubleAnimation Storyboard.TargetName="borderSplit" Storyboard.TargetProperty="Opacity" From="1" To="0.5" Duration="0:0:0.3">
200
<DoubleAnimation.EasingFunction>
201
<CubicEase EasingMode="EaseOut"/>
202
</DoubleAnimation.EasingFunction>
203
</DoubleAnimation>
204
</Storyboard>
205
</BeginStoryboard>
206
</EventTrigger>
207
</ControlTemplate.Triggers>
109
208
</ControlTemplate>
110
209
</Setter.Value>
111
210
</Setter>
112
211
</Style>
212
<Style x:Key="NavigationFrame" TargetType="Frame">
213
<Setter Property="Margin" Value="10,0,0,0"/>
214
<Setter Property="NavigationUIVisibility" Value="Hidden"/>
215
<Setter Property="Grid.Column" Value="1"/>
216
<Setter Property="Grid.Row" Value="1"/>
217
</Style>
113
218
</ResourceDictionary>
@@ -4,6 +4,7 @@ using XFEToolBox.Views.Windows;
4
4
using System.Windows.Controls;
5
5
using System.Windows;
6
6
using XFEToolBox.Profiles;
7
using CommunityToolkit.Mvvm.Input;
7
8
8
9
namespace XFEToolBox.ViewModel;
9
10
@@ -12,7 +13,7 @@ public partial class MainWindowViewModel : ObservableObject
12
13
public MainWindow? ViewPage { get; set; }
13
14
14
15
[ObservableProperty]
15
private Page? currentPage = new MainPage();
16
private Page? currentPage = MainPage.Current;
16
17
17
18
public MainWindowViewModel(MainWindow viewPage)
18
19
{
@@ -39,14 +40,34 @@ public partial class MainWindowViewModel : ObservableObject
39
40
return false;
40
41
}
41
42
}
43
/// <summary>
44
/// 关闭窗体
45
/// </summary>
42
46
public void CloseWindow()
43
47
{
44
48
ExitApp(true);
45
49
//TODO:1 待完善的退出应用逻辑，强制退出等
46
50
}
47
51
48
public void MoveWindow(int x, int y)
52
[RelayCommand]
53
private void NavigateToPage(string pageTag)
49
54
{
50
55
switch (pageTag)
56
{
57
case "home":
58
CurrentPage = MainPage.Current;
59
break;
60
case "tool":
61
CurrentPage = MainPage.Current;
62
break;
63
case "download":
64
CurrentPage = MainPage.Current;
65
break;
66
case "setting":
67
CurrentPage = SettingPage.Current;
68
break;
69
default:
70
break;
71
}
51
72
}
52
73
}
@@ -1,12 +1,10 @@
1
using System.Windows;
2
using System.Windows.Controls;
1
using System.Windows.Controls;
3
2
4
3
namespace XFEToolBox.Views.Controls;
5
4
6
5
public class NavigationButton : RadioButton
7
6
{
8
static NavigationButton()
7
public NavigationButton()
9
8
{
10
DefaultStyleKeyProperty.OverrideMetadata(typeof(NavigationButton), new PropertyMetadata(typeof(NavigationButton)));
11
9
}
12
10
}
@@ -1,41 +0,0 @@
1
<UserControl x:Class="XFEToolBox.Views.Controls.NavigationSideBar"
2
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6
xmlns:local="clr-namespace:XFEToolBox.Views.Controls"
7
mc:Ignorable="d"
8
d:DesignHeight="440" d:DesignWidth="720" Background="White">
9
<StackPanel>
10
<Canvas>
11
<Polygon Fill="#9898e7">
12
<Polygon.Points>
13
<Point X="200" Y="0" />
14
<Point X="100" Y="100" />
15
<Point X="200" Y="200" />
16
</Polygon.Points>
17
</Polygon>
18
<Polygon Fill="White">
19
<Polygon.Points>
20
<Point X="0" Y="0" />
21
<Point X="200" Y="0" />
22
<Point X="100" Y="100" />
23
</Polygon.Points>
24
<Polygon.Effect>
25
<DropShadowEffect Color="Black" Direction="0" ShadowDepth="5" BlurRadius="10" />
26
</Polygon.Effect>
27
</Polygon>
28
<Polygon Fill="White">
29
<Polygon.Points>
30
<Point X="0" Y="0" />
31
<Point X="100" Y="100" />
32
<Point X="200" Y="200" />
33
<Point X="0" Y="200" />
34
</Polygon.Points>
35
<Polygon.Effect>
36
<DropShadowEffect Color="Black" Direction="0" ShadowDepth="5" BlurRadius="10" RenderingBias="Quality"/>
37
</Polygon.Effect>
38
</Polygon>
39
</Canvas>
40
</StackPanel>
41
</UserControl>
@@ -1,28 +0,0 @@
1
using System;
2
using System.Collections.Generic;
3
using System.Linq;
4
using System.Text;
5
using System.Threading.Tasks;
6
using System.Windows;
7
using System.Windows.Controls;
8
using System.Windows.Data;
9
using System.Windows.Documents;
10
using System.Windows.Input;
11
using System.Windows.Media;
12
using System.Windows.Media.Imaging;
13
using System.Windows.Navigation;
14
using System.Windows.Shapes;
15
16
namespace XFEToolBox.Views.Controls
17
{
18
/// <summary>
19
/// NavigationSideBar.xaml 的交互逻辑
20
/// </summary>
21
public partial class NavigationSideBar : UserControl
22
{
23
public NavigationSideBar()
24
{
25
InitializeComponent();
26
}
27
}
28
}
@@ -8,8 +8,9 @@
8
8
d:DesignHeight="450" d:DesignWidth="800"
9
9
Title="MainPage">
10
10
<Grid>
11
<TextBlock Foreground="White">
12
<Span>亻尔 女子</Span>
13
</TextBlock>
11
<Grid.ColumnDefinitions>
12
<ColumnDefinition Width="2*"/>
13
<ColumnDefinition Width="*"/>
14
</Grid.ColumnDefinitions>
14
15
</Grid>
15
16
</Page>
@@ -7,8 +7,10 @@ namespace XFEToolBox.Views.Pages;
7
7
/// </summary>
8
8
public partial class MainPage : Page
9
9
{
10
public static MainPage? Current { get; set; } = new MainPage();
10
11
public MainPage()
11
12
{
12
13
InitializeComponent();
14
Current = this;
13
15
}
14
16
}
@@ -7,8 +7,10 @@ namespace XFEToolBox.Views.Pages;
7
7
/// </summary>
8
8
public partial class SettingPage : Page
9
9
{
10
public static SettingPage? Current { get; set; } = new SettingPage();
10
11
public SettingPage()
11
12
{
12
13
InitializeComponent();
14
Current = this;
13
15
}
14
16
}
@@ -4,10 +4,11 @@
4
4
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5
5
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6
6
xmlns:viewmodel="clr-namespace:XFEToolBox.ViewModel"
7
xmlns:ctr="clr-namespace:XFEToolBox.Views.Controls"
7
8
xmlns:local="clr-namespace:XFEToolBox.Views.Windows"
8
9
mc:Ignorable="d"
9
10
d:DataContext="{d:DesignInstance Type=viewmodel:MainWindowViewModel}"
10
Title="MainWindow" Height="450" Width="720" Background="Transparent" WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen">
11
Title="MainWindow" Height="450" Width="720" Background="Transparent" WindowStyle="None" AllowsTransparency="True" WindowStartupLocation="CenterScreen" Icon="/Resources/Icon/XFEToolBoxIcon.ico" Loaded="Window_Loaded">
11
12
12
13
<Border CornerRadius="20" Background="#9898e7">
13
14
<Grid>
@@ -40,52 +41,48 @@
40
41
</TextBlock>
41
42
</Border>
42
43
<StackPanel Grid.Column="0" Grid.Row="1">
43
<Border HorizontalAlignment="Stretch" Height="40" Background="LightBlue">
44
<ctr:NavigationButton x:Name="mainButton" Style="{StaticResource NavigationButton}" Command="{Binding NavigateToPageCommand}" CommandParameter="home">
44
45
<Grid>
45
46
<Grid.ColumnDefinitions>
47
<ColumnDefinition Width="40"/>
48
<ColumnDefinition Width="*"/>
49
</Grid.ColumnDefinitions>
50
<Image Source="/Resources/Image/grid.png" Margin="5"/>
51
<TextBlock Grid.Column="1" Style="{StaticResource NavigationButtonText}" Text="首页"/>
52
</Grid>
53
</ctr:NavigationButton>
54
<ctr:NavigationButton Style="{StaticResource NavigationButton}" Command="{Binding NavigateToPageCommand}" CommandParameter="tool">
55
<Grid>
56
<Grid.ColumnDefinitions>
57
<ColumnDefinition Width="40"/>
58
<ColumnDefinition Width="*"/>
59
</Grid.ColumnDefinitions>
60
<Image Source="/Resources/Image/toolbox.png" Margin="7"/>
61
<TextBlock Grid.Column="1" Style="{StaticResource NavigationButtonText}" Text="工具箱"/>
62
</Grid>
63
</ctr:NavigationButton>
64
<ctr:NavigationButton Style="{StaticResource NavigationButton}" Command="{Binding NavigateToPageCommand}" CommandParameter="download">
65
<Grid>
66
<Grid.ColumnDefinitions>
67
<ColumnDefinition Width="40"/>
46
68
<ColumnDefinition Width="*"/>
69
</Grid.ColumnDefinitions>
70
<Image Source="/Resources/Image/download.png" Margin="7"/>
71
<TextBlock Grid.Column="1" Style="{StaticResource NavigationButtonText}" Text="下载专区"/>
72
</Grid>
73
</ctr:NavigationButton>
74
<ctr:NavigationButton Style="{StaticResource NavigationButton}" Command="{Binding NavigateToPageCommand}" CommandParameter="setting">
75
<Grid>
76
<Grid.ColumnDefinitions>
47
77
<ColumnDefinition Width="40"/>
78
<ColumnDefinition Width="*"/>
48
79
</Grid.ColumnDefinitions>
49
<Canvas Grid.Column="1">
50
<Polygon Fill="#9898e7">
51
<Polygon.Points>
52
<Point X="40" Y="0" />
53
<Point X="20" Y="20" />
54
<Point X="40" Y="40" />
55
</Polygon.Points>
56
</Polygon>
57
<Polygon Fill="White">
58
<Polygon.Points>
59
<Point X="0" Y="0" />
60
<Point X="40" Y="0" />
61
<Point X="20" Y="20" />
62
</Polygon.Points>
63
<Polygon.Effect>
64
<DropShadowEffect Color="Black" Direction="0" ShadowDepth="1" BlurRadius="5" />
65
</Polygon.Effect>
66
</Polygon>
67
<Polygon Fill="White">
68
<Polygon.Points>
69
<Point X="0" Y="0" />
70
<Point X="20" Y="20" />
71
<Point X="40" Y="40" />
72
<Point X="0" Y="40" />
73
</Polygon.Points>
74
<Polygon.Effect>
75
<DropShadowEffect Color="Black" Direction="0" ShadowDepth="1" BlurRadius="5" />
76
</Polygon.Effect>
77
</Polygon>
78
</Canvas>
79
<Border Background="White">
80
<Border.Effect>
81
<DropShadowEffect Direction="0" BlurRadius="5" ShadowDepth="0"/>
82
</Border.Effect>
83
</Border>
84
80
<Image Source="/Resources/Image/setting.png" Margin="7"/>
81
<TextBlock Grid.Column="1" Style="{StaticResource NavigationButtonText}" Text="选项设置"/>
85
82
</Grid>
86
</Border>
83
</ctr:NavigationButton>
87
84
</StackPanel>
88
<Frame Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" NavigationUIVisibility="Hidden" Content="{Binding CurrentPage}"/>
85
<Frame x:Name="contentFrame" Style="{StaticResource NavigationFrame}" Content="{Binding CurrentPage}" Navigated="ContentFrame_Navigated"/>
89
86
</Grid>
90
87
</Border>
91
88
</Window>
@@ -1,4 +1,5 @@
1
1
using System.Windows;
2
using System.Windows.Media.Animation;
2
3
using XFEToolBox.ViewModel;
3
4
4
5
namespace XFEToolBox.Views.Windows
@@ -27,5 +28,26 @@ namespace XFEToolBox.Views.Windows
27
28
if (e.LeftButton == System.Windows.Input.MouseButtonState.Pressed)
28
29
DragMove();
29
30
}
31
32
private void Window_Loaded(object sender, RoutedEventArgs e)
33
{
34
mainButton.IsChecked = true;
35
}
36
37
private void ContentFrame_Navigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
38
{
39
var storyboard = new Storyboard();
40
var fadeIn = new DoubleAnimation
41
{
42
From = 0,
43
To = 1,
44
Duration = new Duration(TimeSpan.FromMilliseconds(300)),
45
EasingFunction = new CubicEase() { EasingMode = EasingMode.EaseOut }
46
};
47
Storyboard.SetTarget(fadeIn, contentFrame);
48
Storyboard.SetTargetProperty(fadeIn, new PropertyPath("Opacity"));
49
storyboard.Children.Add(fadeIn);
50
storyboard.Begin();
51
}
30
52
}
31
53
}
@@ -6,13 +6,21 @@
6
6
<Nullable>enable</Nullable>
7
7
<ImplicitUsings>enable</ImplicitUsings>
8
8
<UseWPF>true</UseWPF>
9
<ApplicationIcon>Resources\Icon\XFEToolBoxIcon.ico</ApplicationIcon>
9
10
</PropertyGroup>
10
11
11
12
<ItemGroup>
13
<None Remove="Resources\Icon\XFEToolBoxIcon.ico" />
14
<None Remove="Resources\Icon\XFEToolBoxLogo.png" />
15
<None Remove="Resources\Icon\XFEToolBoxSplashScreen.png" />
12
16
<None Remove="Resources\Image\close.png" />
17
<None Remove="Resources\Image\download.png" />
13
18
<None Remove="Resources\Image\grid.png" />
14
19
<None Remove="Resources\Image\min.png" />
20
<None Remove="Resources\Image\setting.png" />
15
21
<None Remove="Resources\Image\tabline.png" />
22
<None Remove="Resources\Image\toolbox.png" />
23
<None Remove="Resources\Image\wrench.png" />
16
24
</ItemGroup>
17
25
18
26
<ItemGroup>
@@ -24,9 +32,13 @@
24
32
</ItemGroup>
25
33
26
34
<ItemGroup>
35
<Resource Include="Resources\Icon\XFEToolBoxIcon.ico" />
36
<Resource Include="Resources\Icon\XFEToolBoxLogo.png" />
27
37
<Resource Include="Resources\Image\close.png" />
38
<Resource Include="Resources\Image\download.png" />
28
39
<Resource Include="Resources\Image\grid.png" />
29
40
<Resource Include="Resources\Image\min.png" />
41
<Resource Include="Resources\Image\setting.png" />
30
42
<Resource Include="Resources\Image\tabline.png" />
31
43
</ItemGroup>
32
44
@@ -38,4 +50,10 @@
38
50
<ProjectReference Include="..\XFEToolBox.Core\XFEToolBox.Core.csproj" />
39
51
</ItemGroup>
40
52
53
<ItemGroup>
54
<Resource Include="Resources\Icon\XFEToolBoxSplashScreen.png" />
55
<Resource Include="Resources\Image\toolbox.png" />
56
<Resource Include="Resources\Image\wrench.png" />
57
</ItemGroup>
58
41
59
</Project>