Skip to content

Commit

Permalink
Merge pull request unoplatform#5626 from robloo/winui-control-updates
Browse files Browse the repository at this point in the history 
chore: Update Expander and ColorPicker to latest WinUI
  • Loading branch information
@mergify
mergify[bot] authored Jul 1, 2021
2 parents edf9964 + 4d44624 commit 5510158
Show file tree
Hide file tree
Showing 10 changed files with 990 additions and 327 deletions.
132 changes: 77 additions & 55 deletions ...SamplesApp/UITests.Shared/Microsoft_UI_Xaml_Controls/ExpanderTests/WinUIExpanderPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,67 +11,89 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d not_win">

<not_win:Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<not_win:ScrollViewer Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<RepositionThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</StackPanel.ChildrenTransitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<RepositionThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</StackPanel.ChildrenTransitions>

<controls:Expander x:Name ="ExpandedExpander" AutomationProperties.Name="ExpandedExpander" IsExpanded="True" Margin="12" HorizontalAlignment="Left">
<controls:Expander.Header>
<TextBlock Text="This expander is expanded by default." />
</controls:Expander.Header>
<TextBlock AutomationProperties.AutomationId="ExpandedExpanderContent">Content</TextBlock>
</controls:Expander>
<controls:Expander x:Name ="ExpandedExpander" AutomationProperties.Name="ExpandedExpander" IsExpanded="True" Margin="12" HorizontalAlignment="Left">
<controls:Expander.Header>
<StackPanel Margin="0,14,0,16">
<TextBlock Text="This expander is expanded by default." Margin="0,0,0,4"/>
<TextBlock Text="This is the second line of text." Style="{StaticResource CaptionTextBlockStyle}" Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
</StackPanel>
</controls:Expander.Header>
<Button AutomationProperties.AutomationId="ExpandedExpanderContent">Content</Button>
</controls:Expander>

<controls:Expander AutomationProperties.AutomationId="CollapsedExpander" AutomationProperties.Name="Expander2" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<TextBlock Text="This expander is collapsed by default. This is a long title to test the header width. ext should be wrapping here." TextWrapping="Wrap" />
</controls:Expander.Header>
<TextBlock AutomationProperties.AutomationId="CollapsedExpanderContent">Content</TextBlock>
</controls:Expander>
<controls:Expander AutomationProperties.AutomationId="CollapsedExpander" AutomationProperties.Name="Expander2" IsExpanded="False" Margin="12" Width="{ThemeResource FlyoutThemeMaxWidth}">
<controls:Expander.Header>
<TextBlock Text="This expander is collapsed by default. This is a long title to test the header width. ext should be wrapping here." TextWrapping="Wrap" Margin="0,12,0,13"/>
</controls:Expander.Header>
<TextBlock AutomationProperties.AutomationId="CollapsedExpanderContent">Content</TextBlock>
</controls:Expander>

<controls:Expander AutomationProperties.Name="ExpanderWithButtons" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<ToggleButton>This is a toggle button in the header</ToggleButton>
</controls:Expander.Header>
<StackPanel>
<TextBlock TextWrapping="Wrap">Content. This is long content to test wrapping on the content section, this content should be wrapping.</TextBlock>
</StackPanel>
</controls:Expander>
<controls:Expander AutomationProperties.Name="ExpanderWithButtons" IsExpanded="False" Margin="12" MaxWidth="{ThemeResource FlyoutThemeMaxWidth}">
<controls:Expander.Header>
<ToggleButton>This is a toggle button in the header</ToggleButton>
</controls:Expander.Header>
<StackPanel>
<TextBlock TextWrapping="Wrap">Content. This is long content to test wrapping on the content section, this content should be wrapping after the control expands to max width.</TextBlock>
</StackPanel>
</controls:Expander>

<controls:Expander AutomationProperties.Name="ExpanderWithUpwardsDirection" ExpandDirection="Up" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<TextBlock>This expander will expand upwards</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>
<controls:Expander AutomationProperties.Name="ExpanderWithUpwardsDirection" ExpandDirection="Up" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<TextBlock Margin="0,0,0,1">This expander will expand upwards</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>

<controls:Expander IsEnabled="False" AutomationProperties.Name="ExpanderNotEnabled" ExpandDirection="Down" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<TextBlock>This expander is not enabled</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>
<controls:Expander IsEnabled="False" AutomationProperties.Name="ExpanderNotEnabled" ExpandDirection="Down" IsExpanded="False" Margin="12">
<controls:Expander.Header>
<TextBlock Margin="0,0,0,1">This expander is not enabled</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>

<local:TestControl IsTabStop="True" x:Name="CustomControl" AutomationProperties.Name="CustomControl" Margin="12">
<controls:Expander x:Name="ExpanderWithCustomEventsSource" ExpandDirection="Down" IsExpanded="False">
<controls:Expander.Header>
<TextBlock>This expander has a custom events source</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>
</local:TestControl>
</StackPanel>
<local:TestControl IsTabStop="True" x:Name="CustomControl" AutomationProperties.Name="CustomControl" Margin="12">
<controls:Expander x:Name="ExpanderWithCustomEventsSource" ExpandDirection="Down" IsExpanded="False">
<controls:Expander.Header>
<TextBlock Margin="0,0,0,1">This expander has a custom events source</TextBlock>
</controls:Expander.Header>
<StackPanel>
<TextBlock>Content</TextBlock>
</StackPanel>
</controls:Expander>
</local:TestControl>

</not_win:Grid>
<controls:Expander AutomationProperties.Name="ExpanderStretched" ExpandDirection="Down" IsExpanded="True" Margin="12" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right">
<controls:Expander.Header>
<TextBlock HorizontalAlignment="Right">This expander stretches along with its content</TextBlock>
</controls:Expander.Header>
<StackPanel HorizontalAlignment="Right">
<TextBlock>Header and Content is right aligned</TextBlock>
</StackPanel>
</controls:Expander>

<controls:Expander AutomationProperties.Name="ExpanderSetHeight" ExpandDirection="Down" IsExpanded="False" Margin="12" Height="150" MaxWidth="{ThemeResource FlyoutThemeMaxWidth}">
<controls:Expander.Header>
<TextBlock>This expander sets a fixed height</TextBlock>
</controls:Expander.Header>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock TextWrapping="Wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id lacinia tellus. Integer eu mollis leo, ornare ultricies neque. Sed diam lectus, varius sed justo vel, malesuada condimentum lorem. Proin porttitor quis enim a facilisis. Suspendisse vehicula imperdiet egestas. Suspendisse imperdiet, ipsum in commodo cursus, mi nisl volutpat nulla, in interdum mi nulla a nulla. Cras feugiat odio ac eros ullamcorper suscipit. Praesent ultricies ligula eget efficitur tristique. Donec imperdiet ultrices dolor sollicitudin bibendum. In hac habitasse platea dictumst. Fusce vel lacinia purus. Sed tempor est sed suscipit luctus. Aenean laoreet tellus vitae efficitur scelerisque. Sed suscipit risus ac nisl rhoncus hendrerit.</TextBlock>
</ScrollViewer>
</controls:Expander>

</StackPanel>

</not_win:ScrollViewer>
</UserControl>
29 changes: 26 additions & 3 deletions src/Uno.UI/Microsoft/UI/Xaml/Controls/ColorPicker/ColorSpectrum.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,6 +213,8 @@ protected override void OnKeyDown(KeyRoutedEventArgs args)

ColorPickerHsvChannel incrementChannel = ColorPickerHsvChannel.Hue;

bool isSaturationValue = false;

if (args.Key == VirtualKey.Left ||
args.Key == VirtualKey.Right)
{
Expand All @@ -223,8 +225,10 @@ protected override void OnKeyDown(KeyRoutedEventArgs args)
incrementChannel = ColorPickerHsvChannel.Hue;
break;

case ColorSpectrumComponents.SaturationHue:
case ColorSpectrumComponents.SaturationValue:
isSaturationValue = true;
goto case ColorSpectrumComponents.SaturationHue; // fallthrough is explicitly wanted
case ColorSpectrumComponents.SaturationHue:
incrementChannel = ColorPickerHsvChannel.Saturation;
break;

Expand All @@ -249,8 +253,10 @@ protected override void OnKeyDown(KeyRoutedEventArgs args)
incrementChannel = ColorPickerHsvChannel.Saturation;
break;

case ColorSpectrumComponents.HueValue:
case ColorSpectrumComponents.SaturationValue:
isSaturationValue = true;
goto case ColorSpectrumComponents.HueValue; // fallthrough is explicitly wanted
case ColorSpectrumComponents.HueValue:
incrementChannel = ColorPickerHsvChannel.Value;
break;
}
Expand Down Expand Up @@ -286,6 +292,23 @@ protected override void OnKeyDown(KeyRoutedEventArgs args)
ColorHelpers.IncrementDirection.Lower :
ColorHelpers.IncrementDirection.Higher;

// Image is flipped in RightToLeft, so we need to invert direction in that case.
// The combination saturation and value is also flipped, so we need to invert in that case too.
// If both are false, we don't need to invert.
// If both are true, we would invert twice, so not invert at all.
if ((FlowDirection == FlowDirection.RightToLeft) != isSaturationValue &&
(args.Key == VirtualKey.Left || args.Key == VirtualKey.Right))
{
if (direction == ColorHelpers.IncrementDirection.Higher)
{
direction = ColorHelpers.IncrementDirection.Lower;
}
else
{
direction = ColorHelpers.IncrementDirection.Higher;
}
}

ColorHelpers.IncrementAmount amount = isControlDown ? ColorHelpers.IncrementAmount.Large : ColorHelpers.IncrementAmount.Small;

Vector4 hsvColor = this.HsvColor;
Expand Down Expand Up @@ -801,7 +824,7 @@ private void UpdateEllipse()
// we inverted the direction of that axis in order to put more hue on the outside of the ring,
// so we need to do similarly here when positioning the ellipse.
if (m_componentsFromLastBitmapCreation == ColorSpectrumComponents.HueSaturation ||
m_componentsFromLastBitmapCreation == ColorSpectrumComponents.ValueHue)
m_componentsFromLastBitmapCreation == ColorSpectrumComponents.SaturationHue)
{
sThetaValue = 360 - sThetaValue;
sRValue = -sRValue - 1;
Expand Down
13 changes: 13 additions & 0 deletions src/Uno.UI/Microsoft/UI/Xaml/Controls/Expander/Expander.Properties.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,19 @@ public bool IsExpanded
true,
(s, e) => (s as Expander)?.OnIsExpandedPropertyChanged(e)));

public ExpanderTemplateSettings TemplateSettings
{
get => (ExpanderTemplateSettings)GetValue(TemplateSettingsProperty);
set => SetValue(TemplateSettingsProperty, value);
}

public static DependencyProperty TemplateSettingsProperty { get; } =
DependencyProperty.Register(
nameof(TemplateSettings),
typeof(ExpanderTemplateSettings),
typeof(Expander),
new PropertyMetadata(null));

public event TypedEventHandler<Expander, ExpanderExpandingEventArgs> Expanding;
public event TypedEventHandler<Expander, ExpanderCollapsedEventArgs> Collapsed;
}
Expand Down
75 changes: 69 additions & 6 deletions src/Uno.UI/Microsoft/UI/Xaml/Controls/Expander/Expander.cs
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
using Windows.UI.Xaml;
using Uno.Disposables;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Automation;
using Windows.UI.Xaml.Automation.Peers;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Markup;
using Windows.UI.Xaml.Hosting;

namespace Microsoft.UI.Xaml.Controls
{
public partial class Expander : ContentControl
{
private readonly string c_expanderHeader = "ExpanderHeader";
private readonly string c_expanderContent = "ExpanderContent";
private readonly string c_expanderContentClip = "ExpanderContentClip";

// Uno Doc: Added to dispose event handlers
private SerialDisposable _eventSubscriptions = new SerialDisposable();

public Expander()
{
// Uno Doc: Not supported
//__RP_Marker_ClassById(RuntimeProfiler::ProfId_Expander);

SetDefaultStyleKey(this);

SetValue(TemplateSettingsProperty, new ExpanderTemplateSettings());
}

// IUIElement
Expand All @@ -30,6 +38,10 @@ protected override AutomationPeer OnCreateAutomationPeer()

protected override void OnApplyTemplate()
{
// Uno Doc: Added to dispose event handlers
_eventSubscriptions.Disposable = null;
var registrations = new CompositeDisposable();

if (GetTemplateChild<Control>(c_expanderHeader) is ToggleButton toggleButton)
{
// We will do 2 things with the toggle button's peer:
Expand Down Expand Up @@ -66,8 +78,32 @@ protected override void OnApplyTemplate()
}
}

if (GetTemplateChild<Border>(c_expanderContentClip) is Border expanderContentClip)
{
var visual = ElementCompositionPreview.GetElementVisual(expanderContentClip);
visual.Clip = visual.Compositor.CreateInsetClip();
}

if (GetTemplateChild<Border>(c_expanderContent) is Border expanderContent)
{
expanderContent.SizeChanged += OnContentSizeChanged;
registrations.Add(() => expanderContent.SizeChanged -= OnContentSizeChanged);
}

UpdateExpandState(false);
UpdateExpandDirection(false);

// Uno Doc: Added to dispose event handlers
_eventSubscriptions.Disposable = registrations;
}

protected void OnContentSizeChanged(object sender, SizeChangedEventArgs args)
{
var templateSettings = TemplateSettings;

var height = args.NewSize.Height;
templateSettings.ContentHeight = height;
templateSettings.NegativeContentHeight = -1 * height;
}

protected void RaiseExpandingEvent(Expander container)
Expand All @@ -82,15 +118,27 @@ protected void RaiseCollapsedEvent(Expander container)

protected void OnIsExpandedPropertyChanged(DependencyPropertyChangedEventArgs args)
{
if (IsExpanded)
var isExpanded = IsExpanded;

if (isExpanded)
{
RaiseExpandingEvent(this);
}
else
{
RaiseCollapsedEvent(this);
// Available for a 'Collapsing' event
}

UpdateExpandState(true);

if (isExpanded)
{
// Available for an 'Expanded' event
}
else
{
RaiseCollapsedEvent(this);
}
}

protected void OnExpandDirectionPropertyChanged(DependencyPropertyChangedEventArgs args)
Expand All @@ -116,14 +164,29 @@ private void UpdateExpandDirection(bool useTransitions)
private void UpdateExpandState(bool useTransitions)
{
var isExpanded = IsExpanded;
var direction = ExpandDirection;

if (isExpanded)
{
VisualStateManager.GoToState(this, "Expanded", useTransitions);
if (direction == ExpandDirection.Down)
{
VisualStateManager.GoToState(this, "ExpandDown", useTransitions);
}
else
{
VisualStateManager.GoToState(this, "ExpandUp", useTransitions);
}
}
else
{
VisualStateManager.GoToState(this, "Collapsed", useTransitions);
if (direction == ExpandDirection.Down)
{
VisualStateManager.GoToState(this, "CollapseUp", useTransitions);
}
else
{
VisualStateManager.GoToState(this, "CollapseDown", useTransitions);
}
}

if (FrameworkElementAutomationPeer.FromElement(this) is AutomationPeer peer)
Expand Down
Loading

0 comments on commit 5510158

Please sign in to comment.