tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add initial ColorSpectrum Fluent style/template

pull/7842/head
robloo 5 years ago
parent
d12ee97e78
commit
2edd7e4157
3 changed files with 208 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      src/Avalonia.Controls/ColorPicker/ColorSpectrum/ColorSpectrum.cs
  2. 183
      src/Avalonia.Themes.Fluent/Controls/ColorSpectrum.xaml
  3. 5
      src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml

41
src/Avalonia.Controls/ColorPicker/ColorSpectrum/ColorSpectrum.cs
View File

@ -104,15 +104,15 @@ namespace Avalonia.Controls.Primitives
UnregisterEvents();
_layoutRoot = e.NameScope.Find<Grid>("LayoutRoot");
_sizingGrid = e.NameScope.Find<Grid>("SizingGrid");
_spectrumRectangle = e.NameScope.Find<Rectangle>("SpectrumRectangle");
_spectrumEllipse = e.NameScope.Find<Ellipse>("SpectrumEllipse");
_spectrumOverlayRectangle = e.NameScope.Find<Rectangle>("SpectrumOverlayRectangle");
_spectrumOverlayEllipse = e.NameScope.Find<Ellipse>("SpectrumOverlayEllipse");
_inputTarget = e.NameScope.Find<Canvas>("InputTarget");
_selectionEllipsePanel = e.NameScope.Find<Panel>("SelectionEllipsePanel");
_colorNameToolTip = e.NameScope.Find<ToolTip>("ColorNameToolTip");
_layoutRoot = e.NameScope.Find<Grid>("PART_LayoutRoot");
_sizingGrid = e.NameScope.Find<Grid>("PART_SizingGrid");
_spectrumRectangle = e.NameScope.Find<Rectangle>("PART_SpectrumRectangle");
_spectrumEllipse = e.NameScope.Find<Ellipse>("PART_SpectrumEllipse");
_spectrumOverlayRectangle = e.NameScope.Find<Rectangle>("PART_SpectrumOverlayRectangle");
_spectrumOverlayEllipse = e.NameScope.Find<Ellipse>("PART_SpectrumOverlayEllipse");
_inputTarget = e.NameScope.Find<Canvas>("PART_InputTarget");
_selectionEllipsePanel = e.NameScope.Find<Panel>("PART_SelectionEllipsePanel");
_colorNameToolTip = e.NameScope.Find<ToolTip>("PART_ColorNameToolTip");
if (_layoutRoot != null)
{
@ -149,7 +149,7 @@ namespace Avalonia.Controls.Primitives
}
UpdateEllipse();
UpdateVisualState(useTransitions: false);
UpdatePseudoClasses();
}
/// <summary>
@ -290,7 +290,7 @@ namespace Avalonia.Controls.Primitives
}
}
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
}
/// <inheritdoc/>
@ -305,7 +305,7 @@ namespace Avalonia.Controls.Primitives
}
}
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
}
/// <inheritdoc/>
@ -508,7 +508,10 @@ namespace Avalonia.Controls.Primitives
CreateBitmapsAndColorMap();
}
private void UpdateVisualState(bool useTransitions)
/// <summary>
/// Updates the visual state of the control by applying latest PseudoClasses.
/// </summary>
private void UpdatePseudoClasses()
{
//if (m_isPointerPressed)
//{
@ -555,7 +558,7 @@ namespace Avalonia.Controls.Primitives
HsvColor = newHsv.ToHsvColor(alpha);
UpdateEllipse();
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
_updatingHsvColor = false;
_updatingColor = false;
@ -822,7 +825,7 @@ namespace Avalonia.Controls.Primitives
}
}
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
}
private void OnLayoutRootSizeChanged()
@ -833,14 +836,14 @@ namespace Avalonia.Controls.Primitives
private void OnInputTargetPointerEnter(object? sender, PointerEventArgs args)
{
_isPointerOver = true;
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
args.Handled = true;
}
private void OnInputTargetPointerLeave(object? sender, PointerEventArgs args)
{
_isPointerOver = false;
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
args.Handled = true;
}
@ -858,7 +861,7 @@ namespace Avalonia.Controls.Primitives
args.Pointer.Capture(inputTarget);
UpdateColorFromPoint(args.GetCurrentPoint(inputTarget));
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
UpdateEllipse();
args.Handled = true;
@ -881,7 +884,7 @@ namespace Avalonia.Controls.Primitives
_shouldShowLargeSelection = false;
args.Pointer.Capture(null);
UpdateVisualState(useTransitions: true);
UpdatePseudoClasses();
UpdateEllipse();
args.Handled = true;

183
src/Avalonia.Themes.Fluent/Controls/ColorSpectrum.xaml
View File

@ -0,0 +1,183 @@
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:CompileBindings="True">
<Design.PreviewWith>
</Design.PreviewWith>
<Styles.Resources>
</Styles.Resources>
<Style Selector="ColorSpectrum">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="PART_LayoutRoot">
<Grid x:Name="PART_SizingGrid"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.Clip>
<RectangleGeometry />
</Grid.Clip>
<Rectangle x:Name="PART_SpectrumRectangle"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
<Rectangle x:Name="PART_SpectrumOverlayRectangle"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
<Ellipse x:Name="PART_SpectrumEllipse"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsVisible="False" />
<Ellipse x:Name="PART_SpectrumOverlayEllipse"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsVisible="False" />
<Canvas x:Name="PART_InputTarget"
Background="Transparent"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid x:Name="PART_SelectionEllipsePanel"
Width="16"
Height="16">
<Ellipse x:Name="FocusEllipse"
Stroke="{DynamicResource SystemControlBackgroundChromeBlackHighBrush}"
Margin="-2"
StrokeThickness="2"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsVisible="False" />
<Ellipse x:Name="SelectionEllipse"
Stroke="{DynamicResource SystemControlBackgroundChromeWhiteBrush}"
StrokeThickness="2"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ToolTip.VerticalOffset="-20"
ToolTip.Placement="Top">
<ToolTip.Tip>
<ToolTip x:Name="PART_ColorNameToolTip" />
</ToolTip.Tip>
</Ellipse>
</Grid>
</Canvas>
<Rectangle x:Name="RectangleBorder"
Stroke="{DynamicResource SystemControlForegroundListLowBrush}"
StrokeThickness="2"
IsHitTestVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
<!--RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />-->
<Ellipse x:Name="EllipseBorder"
Stroke="{DynamicResource SystemControlForegroundListLowBrush}"
StrokeThickness="2"
IsHitTestVisible="False"
IsVisible="False"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--<VisualStateManager.VisualStateGroups>
<VisualStateGroup
x:Name="CommonStates">
<VisualState
x:Name="Normal" />
<VisualState
x:Name="PointerOver">
<VisualState.Setters>
<Setter
Target="SelectionEllipse.Opacity"
Value="0.8" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="Pressed" />
<VisualState
x:Name="PressedLarge">
<VisualState.Setters>
<Setter
Target="SelectionEllipsePanel.Width"
Value="48" />
<Setter
Target="SelectionEllipsePanel.Height"
Value="48" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="SelectionEllipseColor">
<VisualState
x:Name="SelectionEllipseLight" />
<VisualState
x:Name="SelectionEllipseDark">
<VisualState.Setters>
<Setter
Target="FocusEllipse.Stroke"
Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
<Setter
Target="SelectionEllipse.Stroke"
Value="{ThemeResource SystemControlBackgroundChromeBlackHighBrush}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="ShapeSelected">
<VisualState
x:Name="BoxSelected" />
<VisualState
x:Name="RingSelected">
<VisualState.Setters>
<Setter
Target="SpectrumRectangle.Visibility"
Value="Collapsed" />
<Setter
Target="SpectrumOverlayRectangle.Visibility"
Value="Collapsed" />
<Setter
Target="RectangleBorder.Visibility"
Value="Collapsed" />
<Setter
Target="SpectrumEllipse.Visibility"
Value="Visible" />
<Setter
Target="SpectrumOverlayEllipse.Visibility"
Value="Visible" />
<Setter
Target="EllipseBorder.Visibility"
Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup
x:Name="FocusStates">
<VisualState
x:Name="Unfocused" />
<VisualState
x:Name="Focused">
<VisualState.Setters>
<Setter
Target="FocusEllipse.Visibility"
Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState
x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>-->
</Styles>

5
src/Avalonia.Themes.Fluent/Controls/FluentControls.xaml
View File

@ -9,6 +9,7 @@
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CaptionButtons.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/Carousel.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/CheckBox.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ColorSpectrum.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBox.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ComboBoxItem.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ContentControl.xaml"/>
@ -59,8 +60,8 @@
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitButton.xaml" />
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/SplitView.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/DatePicker.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/TimePicker.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/FlyoutPresenter.xaml"/>
<StyleInclude Source="avares://Avalonia.Themes.Fluent/Controls/MenuFlyoutPresenter.xaml"/>
<!-- ManagedFileChooser comes last because it uses (and overrides) styles for a multitude of other controls...the dialogs were originally UserControls, after all-->

Write Preview
Loading…
Cancel
Save