Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ColorPicker control themes for upstream changes #202

Merged
merged 2 commits into from
Sep 29, 2022
Merged

Update ColorPicker control themes for upstream changes #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8808fc0
Update ColorPicker control themes for upstream changes
robloo Sep 27, 2022
575762a
Formatting
robloo Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions FluentAvalonia/Styling/ControlThemes/BasicControls/ColorPicker/ColorPickerStyles.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="using:Avalonia.Controls.Converters">
xmlns:converters="using:Avalonia.Controls.Converters"
x:CompileBindings="True">

<!--
Note the following changes from upstream Avalonia:
Expand All @@ -11,11 +12,7 @@ Note the following changes from upstream Avalonia:
- SystemControlBackgroundChromeWhiteBrush -> ColorControlLightSelectorBrush (new resource)
- SystemControlBackgroundChromeBlackHighBrush -> ColorControlDarkSelectorBrush (new resource)
- SystemControlForegroundBaseHighBrush -> ColorControlDefaultSelectorBrush (new resource)
5. Separated out ColorViewColorModelRadioButtonTheme and converted to a ControlTheme
6. Added new ColorViewPaletteListBoxTheme to customize ListBox for the ColorPicker itself
7. Added new ColorViewPaletteListBoxItemTheme to customize ListBoxItem containers for the ColorPicker itself
8. Added new resources to control tab/content area background and border in the ColorView
Used these resources in both ColorView and ColorPicker to change styles
5. ColorViewColorModelRadioButtonTheme and ColorViewTabItemTheme modified to match Fluent v2
-->

<!-- Shared Resources -->
Expand Down
132 changes: 96 additions & 36 deletions FluentAvalonia/Styling/ControlThemes/BasicControls/ColorPicker/ColorView.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<pc:ThirdComponentConverter x:Key="ThirdComponentConverter" />
<converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
<converters:ColorToHexConverter x:Key="ColorToHexConverter" />
<!--TODO <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />-->
<globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
<x:Double x:Key="ColorViewTabStripHeight">48</x:Double>
<x:Double x:Key="ColorViewComponentLabelWidth">30</x:Double>
Expand Down Expand Up @@ -102,31 +103,32 @@
</Style>
</ControlTheme>

<!-- Based on the Fluent ToggleButton ControlTheme -->
<ControlTheme x:Key="ColorViewColorModelRadioButtonTheme"
TargetType="RadioButton">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackground}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForeground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{DynamicResource ToggleButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Padding" Value="{DynamicResource ButtonPadding}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
<Setter Property="Template">
<ControlTemplate>
<ContentPresenter Name="PART_ContentPresenter"
<ContentPresenter x:Name="PART_ContentPresenter"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}"
RecognizesAccessKey="True"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
Expand All @@ -144,22 +146,85 @@
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundPressed}" />
</Style>

<Style Selector="^:checked /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundChecked}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBackgroundChecked}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundChecked}" />
<Style Selector="^:checked">
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundChecked}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushChecked}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundChecked}" />
</Style>

<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPointerOver}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPointerOver}" />
</Style>

<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBorderBrushCheckedPressed}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPressed}" />
</Style>
</Style>
</ControlTheme>

<!-- Based on the Fluent TabItem ControlTheme -->
<ControlTheme x:Key="ColorViewTabItemTheme"
TargetType="TabItem">
<Setter Property="FontSize" Value="{DynamicResource TabItemHeaderFontSize}" />
<Setter Property="FontWeight" Value="{DynamicResource TabItemHeaderThemeFontWeight}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}" />
<Setter Property="Padding" Value="6,0,6,0" />
<Setter Property="Margin" Value="0" />
<Setter Property="MinHeight" Value="{DynamicResource ColorViewTabStripHeight}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<ControlTemplate>
<Border Name="PART_LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}">
<Panel>
<ContentPresenter Name="PART_ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}" />
<Border Name="PART_SelectedPipe"
Height="{DynamicResource TabItemPipeThickness}"
Margin="0,0,0,2"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Background="{DynamicResource AccentFillColorDefaultBrush}"
CornerRadius="{DynamicResource ControlCornerRadius}"
IsVisible="False"/>
</Panel>
</Border>
</ControlTemplate>
</Setter>

<Style Selector="^:selected">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />

<Style Selector="^ /template/ Border#PART_SelectedPipe">
<Setter Property="IsVisible" Value="True" />
</Style>
</Style>

<Style Selector="^:checked:pointerover /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBackgroundCheckedPointerOver}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPointerOver}" />

<Style Selector="^:pointerover /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TextFillColorSecondaryBrush}" />
</Style>

<Style Selector="^:checked:pressed /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleButtonBackgroundCheckedPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleButtonBackgroundCheckedPressed}" />
<Setter Property="Foreground" Value="{DynamicResource ToggleButtonForegroundCheckedPressed}" />
<Style Selector="^:pressed /template/ Border#PART_LayoutRoot">
<Setter Property="Background" Value="Transparent" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
</Style>

</ControlTheme>
Expand Down Expand Up @@ -199,24 +264,17 @@
Grid.Row="0"
Height="338"
Width="350"
Padding="0"
SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<TabControl.Resources>
<Thickness x:Key="TabItemMargin">0,0,0,0</Thickness>
</TabControl.Resources>
<TabControl.Styles>
<Style Selector="TabControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="0"
Rows="1" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Styles>
<TabControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="0"
Rows="1" />
</ItemsPanelTemplate>
</TabControl.ItemsPanel>
<!-- Spectrum Tab -->
<TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
<TabItem Theme="{StaticResource ColorViewTabItemTheme}"
IsVisible="{TemplateBinding IsColorSpectrumVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<ui:FontIcon UseLayoutRounding="False"
Expand Down Expand Up @@ -281,7 +339,8 @@
</Grid>
</TabItem>
<!-- Palette Tab -->
<TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
<TabItem Theme="{StaticResource ColorViewTabItemTheme}"
IsVisible="{TemplateBinding IsColorPaletteVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<ui:FontIcon UseLayoutRounding="False"
Expand Down Expand Up @@ -316,7 +375,8 @@
</ListBox>
</TabItem>
<!-- Components Tab -->
<TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
<TabItem Theme="{StaticResource ColorViewTabItemTheme}"
IsVisible="{TemplateBinding IsColorComponentsVisible}">
<TabItem.Header>
<Border Height="{DynamicResource ColorViewTabStripHeight}">
<ui:FontIcon UseLayoutRounding="False"
Expand Down
4 changes: 2 additions & 2 deletions FluentAvalonia/Styling/StylesV2/DarkResources.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1415,8 +1415,8 @@


<!-- AVALONIA COLOR PICKER -->
<StaticResource x:Key="ColorControlLightSelectorBrush" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorControlDarkSelectorBrush" ResourceKey="TextFillColorInverseBrush" />
<SolidColorBrush x:Key="ColorControlLightSelectorBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ColorControlDarkSelectorBrush" Color="#E4000000" />
<StaticResource x:Key="ColorControlDefaultSelectorBrush" ResourceKey="TextFillColorPrimaryBrush" />
<SolidColorBrush x:Key="ColorViewContentBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="ColorViewContentBorderBrush" Color="Transparent" />
Expand Down
4 changes: 2 additions & 2 deletions FluentAvalonia/Styling/StylesV2/LightResources.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1475,8 +1475,8 @@


<!-- AVALONIA COLOR PICKER -->
<StaticResource x:Key="ColorControlLightSelectorBrush" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorControlDarkSelectorBrush" ResourceKey="TextFillColorInverseBrush" />
<SolidColorBrush x:Key="ColorControlLightSelectorBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="ColorControlDarkSelectorBrush" Color="#E4000000" />
<StaticResource x:Key="ColorControlDefaultSelectorBrush" ResourceKey="TextFillColorPrimaryBrush" />
<SolidColorBrush x:Key="ColorViewContentBackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="ColorViewContentBorderBrush" Color="Transparent" />
Expand Down
2 changes: 1 addition & 1 deletion FluentAvaloniaSamples/Assets/CoreControlsGroups.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
},
{
"Header": "Miscellaneous Controls",
"Description": "Flyout, GridSplitter, ScrollViewer, ScrollBar, ToolTip",
"Description": "Flyout, GridSplitter, ScrollViewer, ScrollBar, ToolTip, ColorPicker",
"IconResourceKey": null,
"Navigates": true,
"PageType": "MiscControlsPage"
Expand Down