Skip to content

Commit

Permalink
优化一些控件的样式
Browse files Browse the repository at this point in the history
  • Loading branch information
YangSpring114 committed Jul 26, 2024
1 parent 9dd7d4f commit f06c893
Show file tree
Hide file tree
Showing 8 changed files with 164 additions and 39 deletions.
6 changes: 4 additions & 2 deletions WonderLab.Desktop/WonderLab.Desktop.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
<UseAppHost>true</UseAppHost>
</PropertyGroup>
<ItemGroup>
<None Remove="wonderlab.icns"/>
<None Remove="wonderlab.png"/>
<None Remove="wonderlab.icns" />
<None Remove="wonderlab.png" />
</ItemGroup>
<ItemGroup>
<AvaloniaResource Include="wonderlab.icns">
Expand All @@ -30,6 +30,7 @@
</ItemGroup>

<ItemGroup>
<Content Include="wonderlab.ico" />
<Content Include="wonderlab.png">
<LinuxPath>/usr/share/icons/wonderlab.png</LinuxPath>
</Content>
Expand All @@ -53,5 +54,6 @@
<CFBundleShortVersionString>2.0.0</CFBundleShortVersionString>
<UserSecretsId>650eae67-f1f5-4fc8-9914-ea217ada8a3b</UserSecretsId>
<CFBundleIdentifier>com.blessing-studio.wonderlab</CFBundleIdentifier>
<ApplicationIcon>wonderlab.ico</ApplicationIcon>
</PropertyGroup>
</Project>
2 changes: 2 additions & 0 deletions WonderLab/App.axaml
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@
<ResourceInclude Source="/Views/Controls/Themes/Controls/SliderTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ListBoxTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/TextBoxTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ComboBoxTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/FontIconTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ImageBoxTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/PopupRootTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/SettingCardTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ProgressBarTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ComboBoxItemTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/ProgressRingTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/SuperTitleBarTheme.axaml"/>
<ResourceInclude Source="/Views/Controls/Themes/Controls/RippleControlTheme.axaml"/>
Expand Down
4 changes: 4 additions & 0 deletions WonderLab/Services/UI/WindowService.cs
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,10 @@ public async void CopyText(string text) {
}

public async void SetBackground(int type) {
if (Design.IsDesignMode) {
return;
}

var main = _mainWindow as MainWindow;
if (main is null) {
return;
Expand Down
6 changes: 6 additions & 0 deletions WonderLab/Views/Controls/Themes/ColorTheme.axaml
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,9 @@
<!-- Control -->
<SolidColorBrush x:Key="DialogOverlayBackground" Color="Black"/>
<SolidColorBrush x:Key="TextBoxBackground" Color="{StaticResource ContentColor2}"/>
<SolidColorBrush x:Key="ComboBoxBackground" Color="{StaticResource ContentColor2}"/>
<SolidColorBrush x:Key="TextBoxBorderBrush" Color="{StaticResource ContentColor3}"/>
<SolidColorBrush x:Key="ComboBoxBorderBrush" Color="{StaticResource ContentColor3}"/>
<SolidColorBrush x:Key="TitleBarBackground" Color="{StaticResource LayoutBackgroundColor}"/>
<SolidColorBrush x:Key="BottomBarBackground" Color="{StaticResource LayoutBackgroundColor}"/>
<SolidColorBrush x:Key="SettingSideBarBackground" Color="{StaticResource LayoutBackgroundColor}"/>
Expand Down Expand Up @@ -374,7 +377,10 @@
<!-- Control -->
<SolidColorBrush x:Key="DialogOverlayBackground" Color="Black"/>
<SolidColorBrush x:Key="TextBoxBackground" Color="{StaticResource ContentColor2}"/>
<SolidColorBrush x:Key="ComboBoxBackground" Color="{StaticResource ContentColor2}"/>
<SolidColorBrush x:Key="TitleBarBackground" Color="{StaticResource ContentColor3}"/>
<SolidColorBrush x:Key="TextBoxBorderBrush" Color="{StaticResource ContentColor4}"/>
<SolidColorBrush x:Key="ComboBoxBorderBrush" Color="{StaticResource ContentColor4}"/>
<SolidColorBrush x:Key="BottomBarBackground" Color="{StaticResource ContentColor3}"/>
<SolidColorBrush x:Key="SettingSideBarBackground" Color="{StaticResource ContentColor3}"/>
<SolidColorBrush x:Key="GameManagerPanelBackground" Color="{StaticResource ContentColor3}"/>
Expand Down
88 changes: 88 additions & 0 deletions WonderLab/Views/Controls/Themes/Controls/ComboBoxItemTheme.axaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Design.PreviewWith>
<Border Padding="20">
<Border Background="{DynamicResource ComboBoxDropDownBackground}" BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}" BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}" Margin="0,-1,0,-1" Padding="{DynamicResource ComboBoxDropdownBorderPadding}" CornerRadius="{DynamicResource OverlayCornerRadius}">
<StackPanel HorizontalAlignment="Stretch">
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2 long</ComboBoxItem>
<ComboBoxItem IsEnabled="True">Item 4</ComboBoxItem>
<ComboBoxItem IsSelected="True">Item 3</ComboBoxItem>
<ComboBoxItem IsSelected="True" IsEnabled="True">Item 5</ComboBoxItem>
</StackPanel>
</Border>
</Border>
</Design.PreviewWith>

<ControlTheme x:Key="{x:Type ComboBoxItem}" TargetType="ComboBoxItem">
<Setter Property="Margin" Value="4 2" />
<Setter Property="CornerRadius" Value="6" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForeground}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackground}" />
<Setter Property="Padding" Value="{DynamicResource ComboBoxItemThemePadding}" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Name="PART_ContentPresenter"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}" />
</ControlTemplate>
</Setter>

<!-- PointerOver state -->
<Style Selector="^:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPointerOver}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPointerOver}" />
</Style>

<!-- Disabled state -->
<Style Selector="^:disabled /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushDisabled}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundDisabled}" />
</Style>

<!-- Pressed state -->
<Style Selector="^:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushPressed}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundPressed}" />
</Style>

<!-- Selected state -->
<Style Selector="^:selected">
<Style Selector="^ /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelected}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelected}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelected}" />
</Style>
<!-- Selected Disabled state -->
<Style Selector="^:disabled /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedDisabled}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedDisabled}" />
</Style>
<!-- Selected PointerOver state -->
<Style Selector="^:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPointerOver}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPointerOver}" />
</Style>
<!-- Selected Pressed state -->
<Style Selector="^:pressed /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ComboBoxItemBackgroundSelectedPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxItemBorderBrushSelectedPressed}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxItemForegroundSelectedPressed}" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>
93 changes: 58 additions & 35 deletions WonderLab/Views/Controls/Themes/Controls/ComboBoxTheme.axaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:WonderLab.Views.Controls">
<Design.PreviewWith>
<Border Padding="20">
<StackPanel Spacing="10">
Expand Down Expand Up @@ -27,17 +28,18 @@
<x:Double x:Key="ComboBoxMinHeight">32</x:Double>

<ControlTheme x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="MinWidth" Value="80" />
<Setter Property="MinHeight" Value="35" />
<Setter Property="CornerRadius" Value="12" />
<Setter Property="BorderThickness" Value="2.55" />
<Setter Property="MaxDropDownHeight" Value="504" />
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="Padding" Value="{DynamicResource ComboBoxPadding}" />
<Setter Property="Foreground" Value="{DynamicResource ComboBoxForeground}" />
<Setter Property="Background" Value="{DynamicResource ComboBoxBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ComboBoxBorderThemeThickness}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="MinHeight" Value="{DynamicResource ComboBoxMinHeight}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Left" />
Expand All @@ -52,13 +54,26 @@
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
MinWidth="{DynamicResource ComboBoxThemeMinWidth}" />
BorderThickness="{TemplateBinding BorderThickness}"
MinWidth="{DynamicResource ComboBoxThemeMinWidth}">
<Border.Transitions>
<Transitions>
<BoxShadowsTransition Property="BoxShadow"
Duration="0:0:0.35"
Easing="ExponentialEaseOut"/>

<BrushTransition Duration="0:0:0.35"
Property="BorderBrush"
Easing="ExponentialEaseOut"/>
</Transitions>
</Border.Transitions>
</Border>

<Border x:Name="HighlightBackground"
Grid.Column="0"
Grid.ColumnSpan="2"
Background="{DynamicResource ComboBoxBackgroundUnfocused}"
Background="Red"
BorderBrush="{DynamicResource ComboBoxBackgroundBorderBrushUnfocused}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Expand All @@ -81,44 +96,54 @@

<Border x:Name="DropDownOverlay"
Grid.Column="1"
Background="Transparent"
Background="Red"
Margin="0,1,1,1"
Width="30"
IsVisible="False"
HorizontalAlignment="Right" />

<PathIcon x:Name="DropDownGlyph"
Grid.Column="1"
UseLayoutRounding="False"
IsHitTestVisible="False"
Height="12"
Width="12"
Margin="0,0,10,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}"
Data="M1939 486L2029 576L1024 1581L19 576L109 486L1024 1401L1939 486Z"/>
<controls:FontIcon Width="13"
Height="12"
FontSize="12"
Grid.Column="1"
Glyph="&#xE70D;"
Margin="0 0 10 0"
Name="DropDownGlyphIcon"
IsHitTestVisible="False"
UseLayoutRounding="False"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Foreground="{DynamicResource ComboBoxDropDownGlyphForeground}">
<controls:FontIcon.Transitions>
<Transitions>
<ThicknessTransition Property="Margin"
Duration="0:0:0.35"
Easing="ExponentialEaseOut"/>
</Transitions>
</controls:FontIcon.Transitions>
</controls:FontIcon>

<Popup Name="PART_Popup"
Placement="AnchorAndGravity"
IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
PlacementTarget="{TemplateBinding}"
IsLightDismissEnabled="True">
<Border x:Name="PopupBorder"
HorizontalAlignment="Stretch"
Background="{DynamicResource ComboBoxDropDownBackground}"
BorderBrush="{DynamicResource ComboBoxDropDownBorderBrush}"
BorderThickness="{DynamicResource ComboBoxDropdownBorderThickness}"
Padding="{DynamicResource ComboBoxDropdownBorderPadding}"
HorizontalAlignment="Stretch"
CornerRadius="{DynamicResource OverlayCornerRadius}">
<ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}">
CornerRadius="{TemplateBinding CornerRadius}">
<controls:SmoothScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsDeferredScrollingEnabled="{TemplateBinding (ScrollViewer.IsDeferredScrollingEnabled)}">
<ItemsPresenter Name="PART_ItemsPresenter"
Margin="{DynamicResource ComboBoxDropdownContentMargin}"
ItemsPanel="{TemplateBinding ItemsPanel}" />
</ScrollViewer>
ItemsPanel="{TemplateBinding ItemsPanel}"
Margin="{DynamicResource ComboBoxDropdownContentMargin}"/>
</controls:SmoothScrollViewer>
</Border>
</Popup>
</Grid>
Expand All @@ -128,14 +153,12 @@

<!-- PointerOver State -->
<Style Selector="^:pointerover /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ContentBrush4}" />
</Style>

<!-- Pressed State -->
<Style Selector="^:pressed /template/ Border#Background">
<Setter Property="Background" Value="{DynamicResource ComboBoxBackgroundPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBorderBrushPressed}" />
<Style Selector="^:pressed /template/ controls|FontIcon#DropDownGlyphIcon">
<Setter Property="Margin" Value="0 0 10 -4"/>
</Style>

<!-- Error State -->
Expand All @@ -157,7 +180,7 @@
</Style>

<!-- Focused State -->
<Style Selector="^:focus-visible">
<Style Selector="^:focus-visible">
<Style Selector="^ /template/ Border#HighlightBackground">
<Setter Property="IsVisible" Value="True" />
<Setter Property="BorderBrush" Value="{DynamicResource ComboBoxBackgroundBorderBrushFocused}" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<VisualLayerManager IsPopup="True">
<control:RollingBorder x:Name="PopupBorder"
Margin="10 3 10 30"
CornerRadius="6"
CornerRadius="12"
RenderTransformOrigin="0% 0%"
Background="{TemplateBinding Background}">
<control:RollingBorder.Transitions>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
<Setter Property="FocusAdorner" Value="{x:Null}" />
<Setter Property="UseFloatingWatermark" Value="True"/>
<Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
<Setter Property="BorderBrush" Value="{DynamicResource ContentBrush3}" />
<Setter Property="Background" Value="{DynamicResource TextBoxBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource TextBoxBorderBrush}" />
<Setter Property="Padding" Value="{DynamicResource TextControlThemePadding}" />
<Setter Property="Foreground" Value="{DynamicResource TextControlForeground}" />
<Setter Property="CaretBrush" Value="{DynamicResource TextControlForeground}" />
Expand Down

0 comments on commit f06c893

Please sign in to comment.