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.
371 lines
23 KiB
371 lines
23 KiB
<reactive:ReactiveWindow xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:vm="using:MyAvaloniaApp.ViewModels"
|
|
xmlns:converters="using:MyAvaloniaApp.Converters"
|
|
xmlns:tooltip="using:Avalonia.Controls"
|
|
xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
|
|
xmlns:reactive="clr-namespace:Avalonia.ReactiveUI;assembly=Avalonia.ReactiveUI"
|
|
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
|
|
x:Class="MyAvaloniaApp.MainWindow"
|
|
x:DataType="vm:MainWindowViewModel"
|
|
Title="{Binding Title}"
|
|
MinWidth="1000" MinHeight="600"
|
|
ExtendClientAreaToDecorationsHint="True"
|
|
ExtendClientAreaChromeHints="NoChrome"
|
|
SystemDecorations="None">
|
|
|
|
<Design.DataContext>
|
|
<vm:MainWindowViewModel />
|
|
</Design.DataContext>
|
|
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="250" MinWidth="200"/>
|
|
<ColumnDefinition Width="*"/>
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- 左侧导航栏 -->
|
|
<Border Grid.Column="0"
|
|
Background="{StaticResource PrimaryDark}"
|
|
BorderBrush="{StaticResource PrimaryDarkHover}"
|
|
BorderThickness="0,0,1,0">
|
|
<Grid>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="*"/>
|
|
<RowDefinition Height="Auto"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- 导航栏标题 -->
|
|
<StackPanel Grid.Row="0" Margin="20,20,20,30">
|
|
<TextBlock Text="{StaticResource AppTitle}"
|
|
FontSize="20"
|
|
FontWeight="Bold"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"/>
|
|
<TextBlock Text="{StaticResource AppSubtitle}"
|
|
FontSize="12"
|
|
Foreground="{StaticResource SecondaryGray}"
|
|
HorizontalAlignment="Center"
|
|
Margin="0,5,0,0"/>
|
|
</StackPanel>
|
|
|
|
<!-- 导航菜单 -->
|
|
<ScrollViewer Grid.Row="1"
|
|
VerticalScrollBarVisibility="Auto"
|
|
HorizontalScrollBarVisibility="Disabled"
|
|
Margin="10,0,10,0">
|
|
<ItemsControl ItemsSource="{Binding NavigationItems}">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<StackPanel>
|
|
<!-- 主导航项 -->
|
|
<Button Command="{Binding $parent[Window].DataContext.NavigateCommand}"
|
|
CommandParameter="{Binding}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="0,2"
|
|
Padding="15,12"
|
|
FontSize="14"
|
|
Background="Transparent"
|
|
Foreground="White"
|
|
BorderThickness="0"
|
|
CornerRadius="8">
|
|
<Button.Styles>
|
|
<Style Selector="Button">
|
|
<Setter Property="Background" Value="Transparent"/>
|
|
<Setter Property="Foreground" Value="White"/>
|
|
</Style>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryDarkHover}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
<Style Selector="Button:selected">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryBlue}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<Button.Content>
|
|
<StackPanel Orientation="Horizontal" Spacing="10">
|
|
<heroicons:HeroIcon Type="{Binding IconType}"
|
|
Width="16" Height="16"
|
|
Foreground="{StaticResource TextWhite}"/>
|
|
<TextBlock Text="{Binding Title}"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button.Content>
|
|
</Button>
|
|
|
|
<!-- 子导航项 -->
|
|
<ItemsControl ItemsSource="{Binding Children}"
|
|
IsVisible="{Binding IsExpanded}"
|
|
Margin="20,0,0,0">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Button Command="{Binding $parent[Window].DataContext.NavigateCommand}"
|
|
CommandParameter="{Binding}"
|
|
HorizontalAlignment="Stretch"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="0,1"
|
|
Padding="15,10"
|
|
FontSize="13"
|
|
Background="Transparent"
|
|
Foreground="{StaticResource SecondaryGray}"
|
|
BorderThickness="0"
|
|
CornerRadius="6">
|
|
<Button.Styles>
|
|
<Style Selector="Button">
|
|
<Setter Property="Background" Value="Transparent"/>
|
|
<Setter Property="Foreground" Value="{StaticResource SecondaryGray}"/>
|
|
</Style>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryDarkHover}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
<Style Selector="Button:selected">
|
|
<Setter Property="Background" Value="{StaticResource PrimaryBlue}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<Button.Content>
|
|
<StackPanel Orientation="Horizontal" Spacing="8">
|
|
<heroicons:HeroIcon Type="{Binding IconType}"
|
|
Width="14" Height="14"
|
|
Foreground="{Binding $parent[Button].Foreground}"/>
|
|
<TextBlock Text="{Binding Title}"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button.Content>
|
|
</Button>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</StackPanel>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</ScrollViewer>
|
|
|
|
<!-- 底部信息 -->
|
|
<StackPanel Grid.Row="2" Margin="20,0,20,20">
|
|
<Border Background="{StaticResource PrimaryDarkHover}" CornerRadius="8" Padding="15">
|
|
<StackPanel>
|
|
<TextBlock Text="{StaticResource VersionInfo}"
|
|
FontSize="12"
|
|
Foreground="{StaticResource SecondaryGray}"
|
|
HorizontalAlignment="Center"/>
|
|
<TextBlock Text="{StaticResource VersionNumber}"
|
|
FontSize="14"
|
|
FontWeight="Bold"
|
|
Foreground="White"
|
|
HorizontalAlignment="Center"
|
|
Margin="0,5,0,0"/>
|
|
</StackPanel>
|
|
</Border>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- 右侧主内容区域 -->
|
|
<Grid Grid.Column="1">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="*"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- 头部区域 -->
|
|
<Border Grid.Row="0"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,0,1"
|
|
Padding="0,0,0,0">
|
|
<Grid Height="50" Name="TitleBarGrid">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="Auto"/>
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- 左侧标题区域 -->
|
|
<StackPanel Grid.Column="0"
|
|
VerticalAlignment="Center"
|
|
Margin="20,0,0,0">
|
|
<TextBlock Text="{Binding HeaderTitle}"
|
|
FontSize="18"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
<TextBlock Text="{Binding HeaderSubtitle}"
|
|
FontSize="12"
|
|
Foreground="{StaticResource SecondaryGrayDark}"
|
|
Margin="0,2,0,0"/>
|
|
</StackPanel>
|
|
|
|
<!-- 右侧按钮区域 -->
|
|
<StackPanel Grid.Column="1"
|
|
Orientation="Horizontal"
|
|
VerticalAlignment="Center"
|
|
Margin="0,0,0,0">
|
|
|
|
|
|
<!-- 窗口控制按钮组 -->
|
|
<StackPanel Orientation="Horizontal" Spacing="0">
|
|
<!-- 最小化按钮 -->
|
|
<Button Name="MinimizeButton"
|
|
Width="46" Height="30"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
tooltip:ToolTip.Tip="{StaticResource BtnMinimize}">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLight}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<heroicons:HeroIcon Type="Minus"
|
|
Width="16" Height="16"
|
|
Foreground="{StaticResource SecondaryGrayStroke}"/>
|
|
</Button>
|
|
|
|
<!-- 最大化/还原按钮 -->
|
|
<Button Name="MaximizeButton"
|
|
Width="46" Height="30"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
tooltip:ToolTip.Tip="{StaticResource BtnMaximize}">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLight}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<heroicons:HeroIcon Type="ArrowsPointingOut"
|
|
Width="16" Height="16"
|
|
Foreground="{StaticResource SecondaryGrayStroke}"/>
|
|
</Button>
|
|
|
|
<!-- 关闭按钮 -->
|
|
<Button Name="CloseButton"
|
|
Width="46" Height="30"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
tooltip:ToolTip.Tip="{StaticResource BtnClose}">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource ButtonClose}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<heroicons:HeroIcon Type="XMark"
|
|
Width="16" Height="16"
|
|
Foreground="{StaticResource SecondaryGrayStroke}"/>
|
|
</Button>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- 标签页区域 -->
|
|
<Border Grid.Row="1"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,0,1"
|
|
Padding="0,0,0,0">
|
|
<ScrollViewer HorizontalScrollBarVisibility="Auto"
|
|
VerticalScrollBarVisibility="Disabled">
|
|
<ItemsControl ItemsSource="{Binding Tabs}"
|
|
Margin="8,4,8,0">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel Orientation="Horizontal" Spacing="0"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Button Background="{Binding IsSelected, Converter={x:Static converters:TabStyleConverter.Instance}, ConverterParameter=Background}"
|
|
BorderBrush="{Binding IsSelected, Converter={x:Static converters:TabStyleConverter.Instance}, ConverterParameter=BorderBrush}"
|
|
BorderThickness="1,1,1,0"
|
|
CornerRadius="4,4,0,0"
|
|
Margin="0,0,1,0"
|
|
Padding="12,8,8,8"
|
|
MinWidth="120"
|
|
Cursor="Hand"
|
|
Command="{Binding $parent[Window].DataContext.SelectTabCommand}"
|
|
CommandParameter="{Binding}">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLight}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
<Grid>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="Auto"/>
|
|
</Grid.ColumnDefinitions>
|
|
<StackPanel Grid.Column="0"
|
|
Orientation="Horizontal"
|
|
Spacing="6"
|
|
VerticalAlignment="Center">
|
|
<heroicons:HeroIcon Type="{Binding IconType}"
|
|
Width="14" Height="14"
|
|
VerticalAlignment="Center"/>
|
|
<TextBlock Text="{Binding Title}"
|
|
FontSize="13"
|
|
FontWeight="Normal"
|
|
Foreground="{Binding IsSelected, Converter={x:Static converters:TabStyleConverter.Instance}, ConverterParameter=Foreground}"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<Button Grid.Column="1"
|
|
Command="{Binding $parent[Window].DataContext.CloseTabCommand}"
|
|
CommandParameter="{Binding $parent[Button].DataContext}"
|
|
Width="18" Height="18"
|
|
Background="Transparent"
|
|
Foreground="{StaticResource SecondaryGrayLight}"
|
|
BorderThickness="0"
|
|
FontSize="12"
|
|
IsVisible="{Binding CanClose}"
|
|
Margin="6,0,0,0"
|
|
CornerRadius="9"
|
|
tooltip:ToolTip.Tip="{StaticResource BtnCloseTab}">
|
|
<heroicons:HeroIcon Type="XMark"
|
|
Width="6" Height="6"
|
|
Foreground="{Binding $parent[Button].Foreground}"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource ButtonCloseHover}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
<Style Selector="Button:pressed">
|
|
<Setter Property="Background" Value="{StaticResource ButtonCloseActive}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextWhite}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
</Grid>
|
|
</Button>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</ScrollViewer>
|
|
</Border>
|
|
|
|
<!-- 内容区域 -->
|
|
<Border Grid.Row="2"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
CornerRadius="8"
|
|
Margin="10"
|
|
Padding="5"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1">
|
|
<Border.Effect>
|
|
<DropShadowEffect Color="{StaticResource ShadowBlack}"
|
|
Opacity="0.08"
|
|
BlurRadius="12"
|
|
OffsetX="0"
|
|
OffsetY="2"/>
|
|
</Border.Effect>
|
|
<reactive:RoutedViewHost Router="{Binding Router}"/>
|
|
</Border>
|
|
</Grid>
|
|
</Grid>
|
|
</reactive:ReactiveWindow>
|
|
|