You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
13 KiB
226 lines
13 KiB
<UserControl x:Class="AIK.Views.AccountPages.NavMenu"
|
|
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:AIK.Views.AccountPages"
|
|
xmlns:converters="clr-namespace:AIK.Views.Converters"
|
|
mc:Ignorable="d"
|
|
d:DesignHeight="450" d:DesignWidth="800">
|
|
<UserControl.Resources>
|
|
<converters:BoolToExpandedStyleConverter x:Key="BoolToExpandedStyleConverter"/>
|
|
<converters:BoolToSelectedStyleConverter x:Key="BoolToSelectedStyleConverter"/>
|
|
<converters:ExpandArrowConverter x:Key="ExpandArrowConverter"/>
|
|
<!-- 缓动函数（用于动画更自然） -->
|
|
<CubicEase x:Key="SmoothEase" EasingMode="EaseOut"/>
|
|
<!-- 颜色资源 -->
|
|
<SolidColorBrush x:Key="PrimaryColor">#3B82F6</SolidColorBrush>
|
|
<SolidColorBrush x:Key="HoverColor">#F1F5F9</SolidColorBrush>
|
|
<SolidColorBrush x:Key="TextColor">#1E293B</SolidColorBrush>
|
|
<SolidColorBrush x:Key="TextSecondaryColor">#64748B</SolidColorBrush>
|
|
<SolidColorBrush x:Key="SubMenuBgColor">#F8FAFC</SolidColorBrush>
|
|
<SolidColorBrush x:Key="SidebarColor">#FFFFFF</SolidColorBrush>
|
|
|
|
<!-- 图标样式 -->
|
|
<Style x:Key="MenuIconStyle" TargetType="TextBlock">
|
|
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
|
|
<Setter Property="FontSize" Value="16"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryColor}"/>
|
|
<Setter Property="VerticalAlignment" Value="Center"/>
|
|
<Setter Property="Width" Value="24"/>
|
|
<Setter Property="TextAlignment" Value="Center"/>
|
|
</Style>
|
|
|
|
<Style x:Key="ArrowIconStyle" TargetType="TextBlock">
|
|
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
|
|
<Setter Property="FontSize" Value="12"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryColor}"/>
|
|
<Setter Property="VerticalAlignment" Value="Center"/>
|
|
<Setter Property="HorizontalAlignment" Value="Center"/>
|
|
</Style>
|
|
|
|
<!-- 基础按钮样式 -->
|
|
<Style x:Key="BaseButtonStyle" TargetType="Button">
|
|
<Setter Property="Background" Value="Transparent"/>
|
|
<Setter Property="BorderThickness" Value="0"/>
|
|
<Setter Property="HorizontalContentAlignment" Value="Left"/>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="Button">
|
|
<Border x:Name="border"
|
|
Background="{TemplateBinding Background}"
|
|
CornerRadius="8"
|
|
Margin="8,2">
|
|
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
Margin="{TemplateBinding Padding}"/>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsMouseOver" Value="True">
|
|
<Setter TargetName="border" Property="Background" Value="{StaticResource HoverColor}"/>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- 一级菜单样式 -->
|
|
<Style x:Key="ParentMenuButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
|
|
<Setter Property="Padding" Value="16,12"/>
|
|
<Setter Property="FontSize" Value="14"/>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="Button">
|
|
<Border x:Name="border"
|
|
Background="{TemplateBinding Background}"
|
|
CornerRadius="8"
|
|
Margin="8,2">
|
|
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
Margin="{TemplateBinding Padding}"/>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsMouseOver" Value="True">
|
|
<Setter TargetName="border" Property="Background" Value="{StaticResource HoverColor}"/>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- 二级菜单样式 -->
|
|
<Style x:Key="ChildMenuButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
|
|
<Setter Property="Padding" Value="32,10,16,10"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextSecondaryColor}"/>
|
|
<Setter Property="FontSize" Value="13"/>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="Button">
|
|
<Border x:Name="border"
|
|
Background="{TemplateBinding Background}"
|
|
CornerRadius="6"
|
|
Margin="16,1,8,1">
|
|
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
Margin="{TemplateBinding Padding}"/>
|
|
</Border>
|
|
<ControlTemplate.Triggers>
|
|
<Trigger Property="IsMouseOver" Value="True">
|
|
<Setter TargetName="border" Property="Background" Value="{StaticResource HoverColor}"/>
|
|
</Trigger>
|
|
<Trigger Property="IsPressed" Value="True">
|
|
<Setter TargetName="border" Property="Background" Value="{StaticResource PrimaryColor}"/>
|
|
<Setter Property="Foreground" Value="White"/>
|
|
</Trigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<!-- 子菜单容器样式 -->
|
|
<Style x:Key="SubMenuContainerStyle" TargetType="Border">
|
|
<Setter Property="Background" Value="{StaticResource SubMenuBgColor}"/>
|
|
<Setter Property="CornerRadius" Value="0,0,8,8"/>
|
|
<Setter Property="Margin" Value="0,-4,0,4"/>
|
|
<Setter Property="Padding" Value="0,4,0,8"/>
|
|
</Style>
|
|
|
|
<!-- 一级菜单数据模板 -->
|
|
<DataTemplate x:Key="ParentMenuTemplate">
|
|
<StackPanel>
|
|
<!-- 一级菜单按钮 -->
|
|
<Button Command="{Binding DataContext.ToggleSubMenuCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
|
|
CommandParameter="{Binding}">
|
|
<Button.Style>
|
|
<Style TargetType="Button" BasedOn="{StaticResource ParentMenuButtonStyle}">
|
|
<Style.Triggers>
|
|
|
|
<!-- 选中高亮（仅无子项时触发） -->
|
|
<DataTrigger Binding="{Binding IsSelected}" Value="True">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryColor}"/>
|
|
<Setter Property="Foreground" Value="White"/>
|
|
<Setter Property="FontWeight" Value="SemiBold"/>
|
|
</DataTrigger>
|
|
<Trigger Property="IsMouseOver" Value="True">
|
|
<Setter Property="Foreground" Value="{StaticResource TextColor}"/>
|
|
<!-- 黑色 -->
|
|
</Trigger>
|
|
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
|
|
<Setter Property="Background" Value="{StaticResource HoverColor}"/>
|
|
<Setter Property="FontWeight" Value="SemiBold"/>
|
|
</DataTrigger>
|
|
</Style.Triggers>
|
|
</Style>
|
|
</Button.Style>
|
|
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto"/>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="Auto"/>
|
|
</Grid.ColumnDefinitions>
|
|
<TextBlock Text="{Binding MenuIcon}" Style="{StaticResource MenuIconStyle}" FontFamily="{StaticResource Iconfont}"/>
|
|
<TextBlock Text="{Binding MenuHeader}" Margin="12,0,0,0" VerticalAlignment="Center" Grid.Column="1"/>
|
|
<TextBlock Margin="15,0,0,0" Text="" Style="{StaticResource ArrowIconStyle}" Grid.Column="2"
|
|
Visibility="{Binding HasSubItems, Converter={StaticResource BoolToVisibilityConverter}}">
|
|
<TextBlock.RenderTransform>
|
|
<RotateTransform Angle="{Binding IsExpanded, Converter={StaticResource ExpandArrowConverter}}"/>
|
|
</TextBlock.RenderTransform>
|
|
</TextBlock>
|
|
</Grid>
|
|
</Button>
|
|
|
|
<!-- 二级菜单容器 -->
|
|
<Border Style="{StaticResource SubMenuContainerStyle}"
|
|
Visibility="{Binding IsExpanded, Converter={StaticResource BoolToVisibilityConverter}}">
|
|
<ItemsControl ItemsSource="{Binding SubItems}" BorderThickness="0" Background="Transparent">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Button Command="{Binding DataContext.SwitchPageCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
|
|
CommandParameter="{Binding}">
|
|
<Button.Style>
|
|
<Style TargetType="Button" BasedOn="{StaticResource ChildMenuButtonStyle}">
|
|
<Style.Triggers>
|
|
<DataTrigger Binding="{Binding IsSelected}" Value="True">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryColor}"/>
|
|
<Setter Property="Foreground" Value="White"/>
|
|
<Setter Property="FontWeight" Value="SemiBold"/>
|
|
</DataTrigger>
|
|
<Trigger Property="IsMouseOver" Value="True">
|
|
<Setter Property="Foreground" Value="{StaticResource TextColor}"/>
|
|
<!-- 黑色 -->
|
|
</Trigger>
|
|
</Style.Triggers>
|
|
</Style>
|
|
</Button.Style>
|
|
|
|
<StackPanel Orientation="Horizontal" Margin="8,0,0,0">
|
|
<TextBlock Text="●" FontSize="6" VerticalAlignment="Center" Margin="0,0,8,0"/>
|
|
<TextBlock Text="{Binding MenuHeader}" VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</Border>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
</UserControl.Resources>
|
|
|
|
<Grid>
|
|
<Border Background="{StaticResource SidebarColor}"
|
|
BorderThickness="0,0,1,0"
|
|
BorderBrush="#E2E8F0">
|
|
<ScrollViewer VerticalScrollBarVisibility="Auto">
|
|
<ItemsControl ItemsSource="{Binding Menus}"
|
|
ItemTemplate="{StaticResource ParentMenuTemplate}"
|
|
BorderThickness="0"
|
|
Background="Transparent"
|
|
Margin="0,20,0,0"/>
|
|
</ScrollViewer>
|
|
</Border>
|
|
</Grid>
|
|
</UserControl>
|
|
|