Files
qhmes/yy-admin-master/YY.Admin/Views/Control/SidebarControl.xaml

194 lines
10 KiB
XML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<UserControl x:Class="YY.Admin.Views.Control.SidebarControl"
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:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:prism="http://prismlibrary.com/"
xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:core="clr-namespace:YY.Admin.Core;assembly=YY.Admin.Core"
xmlns:ctls="clr-namespace:YY.Admin.Core.Controls;assembly=YY.Admin.Core"
xmlns:local="clr-namespace:YY.Admin.Views.Control">
<UserControl.Resources>
<!-- AntDesign 模板 -->
<DataTemplate x:Key="AntDesignIconTemplate">
<TextBlock
FontFamily="{StaticResource AntDesignIcon}"
FontSize="22"
Text="{Binding Icon}"
Margin="0,0,0,5"
HorizontalAlignment="Center"/>
</DataTemplate>
<!-- MaterialDesign 模板 -->
<DataTemplate x:Key="MaterialDesignIconTemplate">
<md:PackIcon
Kind="{Binding Icon}"
Width="22"
Height="22"
Margin="0,0,0,5"
HorizontalAlignment="Center"/>
</DataTemplate>
<!-- FontAwesome 模板 -->
<DataTemplate x:Key="FontawesomeIconTemplate">
<ctls:FontAwesomeIcon
Icon="{Binding Icon}"
FontSize="22"
Margin="0,0,0,5"
HorizontalAlignment="Center"/>
</DataTemplate>
<DataTemplate x:Key="NavItemTemplate">
<StackPanel Orientation="Vertical" Margin="5" HorizontalAlignment="Center">
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<!-- 默认模板AntDesign -->
<Setter Property="ContentTemplate" Value="{StaticResource AntDesignIconTemplate}"/>
<!-- 绑定数据上下文 -->
<Setter Property="Content" Value="{Binding}"/>
<!-- 触发器根据 IconType 切换模板 -->
<Style.Triggers>
<DataTrigger Binding="{Binding IconType}" Value="{x:Static core:IconTypeEnum.MaterialDesign}">
<Setter Property="ContentTemplate" Value="{StaticResource MaterialDesignIconTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding IconType}" Value="{x:Static core:IconTypeEnum.FontAwesome}">
<Setter Property="ContentTemplate" Value="{StaticResource FontawesomeIconTemplate}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<TextBlock Text="{Binding Name}" FontSize="12" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap" TextAlignment="Center"/>
</StackPanel>
</DataTemplate>
<Style x:Key="NavItemStyle" TargetType="ListBoxItem" BasedOn="{StaticResource ListBoxItemBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="templateRoot" Margin="0,0,0,5">
<!-- 左侧指示器 -->
<Border
x:Name="indicator"
Width="4"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="6,0,0,0"
CornerRadius="2"
Background="{DynamicResource PrimaryBrush}"
Opacity="0"
Panel.ZIndex="1"
Height="{Binding ActualHeight, ElementName=templateRoot, Converter={StaticResource PercentageConverter}, ConverterParameter=0.4}">
<Border.RenderTransform>
<TranslateTransform Y="10"/>
</Border.RenderTransform>
</Border>
<!-- 内容边框 -->
<Border x:Name="border" CornerRadius="6" Background="Transparent" Margin="5,0">
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- 选中动画 -->
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
<Setter TargetName="content" Property="TextBlock.Foreground" Value="{DynamicResource PrimaryBrush}"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="indicator"
Storyboard.TargetProperty="Opacity"
To="0.8"
Duration="0:0:0.25"/>
<DoubleAnimation
Storyboard.TargetName="indicator"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
To="0"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="indicator"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.25"/>
<DoubleAnimation
Storyboard.TargetName="indicator"
Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
To="10"
Duration="0:0:0.25"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!-- 鼠标悬停 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
<Setter TargetName="content" Property="TextBlock.Foreground" Value="{DynamicResource PrimaryBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- 鼠标点击触发命令 -->
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="OnNavItemMouseDown"/>
</Style>
</UserControl.Resources>
<Border BorderBrush="{DynamicResource BorderBrush}" BorderThickness="0,0,1,0">
<Grid>
<Grid.RowDefinitions>
<!-- 上部占满剩余空间 -->
<RowDefinition Height="*"/>
<!-- 底部自适应 -->
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- 上半部分:主导航 -->
<ListBox
Grid.Row="0"
Padding="0,5,0,0"
BorderThickness="0"
hc:BorderElement.CornerRadius="0"
ItemsSource="{Binding TopNavItems}"
SelectedItem="{Binding SelectedTopNavItem, Mode=TwoWay}"
ItemTemplate="{StaticResource NavItemTemplate}"
ItemContainerStyle="{StaticResource NavItemStyle}">
<!--<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<prism:InvokeCommandAction
Command="{Binding NavItemClickCommand}"
CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType=ListBox}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>-->
</ListBox>
<!-- 底部部分:固定操作 -->
<ListBox
Grid.Row="1"
Padding="0"
BorderThickness="0"
hc:BorderElement.CornerRadius="0"
ItemsSource="{Binding BottomNavItems}"
SelectedItem="{Binding SelectedBottomNavItem, Mode=TwoWay}"
ItemTemplate="{StaticResource NavItemTemplate}"
ItemContainerStyle="{StaticResource NavItemStyle}"/>
</Grid>
</Border>
</UserControl>