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

ux improvement for range selector #964

Merged
merged 3 commits into from
Feb 23, 2017
Merged

ux improvement for range selector #964

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
78edd59
range slider thumb area is bigger to work better with touch
Feb 17, 2017
2746b5a
option for touch optimization as a DP
Feb 18, 2017
06c04fd
null checks for slider elements arrangement
Feb 21, 2017
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
1 change: 1 addition & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/RangeSelector/RangeSelectorPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
Text="{Binding RangeMin, ElementName=RangeSelectorControl, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:0.##}'}" />
<controls:RangeSelector x:Name="RangeSelectorControl"
Grid.Column="1"
IsTouchOptimized="True"
Maximum="{Binding Maximum.Value, Mode=TwoWay}"
Minimum="{Binding Minimum.Value, Mode=TwoWay}" />
<TextBlock Grid.Column="2"
Expand Down
59 changes: 59 additions & 0 deletions Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@ public class RangeSelector : Control
/// </summary>
public static readonly DependencyProperty RangeMaxProperty = DependencyProperty.Register(nameof(RangeMax), typeof(double), typeof(RangeSelector), new PropertyMetadata(1.0, RangeMaxChangedCallback));

/// <summary>
/// Identifies the IsTouchOptimized dependency property.
/// </summary>
public static readonly DependencyProperty IsTouchOptimizedProperty = DependencyProperty.Register(nameof(IsTouchOptimized), typeof(bool), typeof(RangeSelector), new PropertyMetadata(false, IsTouchOptimizedChangedCallback));

private const double Epsilon = 0.01;

private Border _outOfRangeContentContainer;
Expand Down Expand Up @@ -174,6 +179,8 @@ protected override void OnApplyTemplate()

IsEnabledChanged += RangeSelector_IsEnabledChanged;

ArrangeForTouch();

base.OnApplyTemplate();
}

Expand Down Expand Up @@ -562,6 +569,57 @@ private static void RangeMaxChangedCallback(DependencyObject d, DependencyProper
}
}

/// <summary>
/// Gets or sets a value indicating whether the control is optimized for touch use.
/// </summary>
/// <value>
/// The value for touch optimization.
/// </value>
public bool IsTouchOptimized
{
get
{
return (bool)GetValue(IsTouchOptimizedProperty);
}

set
{
SetValue(IsTouchOptimizedProperty, value);
}
}

private static void IsTouchOptimizedChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var rangeSelector = d as RangeSelector;
if (rangeSelector == null)
{
return;
}

rangeSelector.ArrangeForTouch();
}

private void ArrangeForTouch()
{
if (_containerCanvas == null)
{
return;
}

if (IsTouchOptimized)
{
_outOfRangeContentContainer.Height = _minThumb.Height = _maxThumb.Height = 44;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just check if these properties are not null

_minThumb.Width = _maxThumb.Width = 44;
_minThumb.Margin = _maxThumb.Margin = new Thickness(-20, 0, 0, 0);
}
else
{
_outOfRangeContentContainer.Height = _minThumb.Height = _maxThumb.Height = 24;
_minThumb.Width = _maxThumb.Width = 8;
_minThumb.Margin = _maxThumb.Margin = new Thickness(-8, 0, 0, 0);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could not think of a more elegant solution here, there is no relation between the two cases (44-> 24, 20->8), any thoughts?

}
}

private void SyncThumbs()
{
if (_containerCanvas == null)
Expand All @@ -574,6 +632,7 @@ private void SyncThumbs()

Canvas.SetLeft(_minThumb, relativeLeft);
Canvas.SetLeft(_activeRectangle, relativeLeft);
Canvas.SetTop(_activeRectangle, (_containerCanvas.ActualHeight - _activeRectangle.ActualHeight) / 2);

Canvas.SetLeft(_maxThumb, relativeRight);

Expand Down
21 changes: 8 additions & 13 deletions Microsoft.Toolkit.Uwp.UI.Controls/RangeSelector/RangeSelector.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,19 @@
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:RangeSelector">
<Grid Height="40">
<Grid x:Name="ControlGrid" Height="{TemplateBinding Height}">
<Grid.Resources>
<Style x:Key="SliderThumbStyle"
TargetType="Thumb">
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="-20" />
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{ThemeResource SystemControlForegroundAccentBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Width="40" Height="40" Background="Transparent">
<Grid Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="Transparent">
<Border Width="8"
Height="24"
HorizontalAlignment="Center"
Expand All @@ -38,8 +35,7 @@
</Style>
</Grid.Resources>

<Border x:Name="OutOfRangeContentContainer"
Height="40"
<Border x:Name="OutOfRangeContentContainer"
Margin="12,0"
Background="Transparent">
<Rectangle x:Name="BackgroundElement"
Expand All @@ -49,14 +45,13 @@
<Canvas x:Name="ContainerCanvas"
Margin="12,0"
Background="Transparent">
<Rectangle x:Name="ActiveRectangle"
Canvas.Top="19"
<Rectangle x:Name="ActiveRectangle"
Height="2"
Fill="{TemplateBinding Foreground}" />
<Thumb x:Name="MinThumb"
AutomationProperties.Name="Min thumb"
Background="{TemplateBinding Foreground}"
IsTabStop="True"
IsTabStop="True"
Style="{StaticResource SliderThumbStyle}"
TabIndex="0" />
<Thumb x:Name="MaxThumb"
Expand Down