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

use winui3 style

pull/4074/head
Jumar Macato 6 years ago
parent
1faa61c670
commit
ef2a96cae7
No known key found for this signature in database GPG Key ID: B19884DAC3A5BF3F
3 changed files with 126 additions and 82 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. 26
      samples/ControlCatalog/Pages/ProgressBarPage.xaml
  2. 54
      src/Avalonia.Controls/ProgressBar.cs
  3. 128
      src/Avalonia.Themes.Fluent/ProgressBar.xaml

26
samples/ControlCatalog/Pages/ProgressBarPage.xaml
View File

@ -1,29 +1,19 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ControlCatalog.Pages.ProgressBarPage">
<UserControl xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ControlCatalog.Pages.ProgressBarPage">
<StackPanel Orientation="Vertical" Spacing="4">
<TextBlock Classes="h1">ProgressBar</TextBlock>
<TextBlock Classes="h2">A progress bar control</TextBlock>
<StackPanel>
<CheckBox
x:Name="showProgress"
Margin="10,16,0,0"
Content="Show Progress Text" />
<StackPanel Orientation="Horizontal"
Margin="0,16,0,0"
HorizontalAlignment="Center"
Spacing="16">
<CheckBox x:Name="showProgress" Margin="10,16,0,0" Content="Show Progress Text" />
<CheckBox x:Name="isIndeterminate" Margin="10,16,0,0" Content="Toggle Indeterminate" />
<StackPanel Orientation="Horizontal" Margin="0,16,0,0" HorizontalAlignment="Center" Spacing="16">
<StackPanel Spacing="16">
<ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #hprogress.Value}" />
<ProgressBar IsIndeterminate="True"/>
<ProgressBar IsIndeterminate="{Binding #isIndeterminate.IsChecked}" ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #hprogress.Value}" />
</StackPanel>
<ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #vprogress.Value}" Orientation="Vertical" />
<ProgressBar Orientation="Vertical" IsIndeterminate="True" />
<ProgressBar IsIndeterminate="{Binding #isIndeterminate.IsChecked}" ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #vprogress.Value}" Orientation="Vertical" />
</StackPanel>
<StackPanel Margin="16">
<Slider Name="hprogress" Maximum="100" Value="40"/>
<Slider Name="vprogress" Maximum="100" Value="60"/>
<Slider Name="hprogress" Maximum="100" Value="40" />
<Slider Name="vprogress" Maximum="100" Value="60" />
</StackPanel>
</StackPanel>
</StackPanel>

54
src/Avalonia.Controls/ProgressBar.cs
View File

@ -25,20 +25,19 @@ namespace Avalonia.Controls
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(ContainerAnimationStartPosition),
p => p.ContainerAnimationStartPosition,
(p, o) => p.ContainerAnimationStartPosition = o);
(p, o) => p.ContainerAnimationStartPosition = o, 0d);
public static readonly DirectProperty<ProgressBar, double> ContainerAnimationEndPositionProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(ContainerAnimationEndPosition),
p => p.ContainerAnimationEndPosition,
(p, o) => p.ContainerAnimationEndPosition = o);
(p, o) => p.ContainerAnimationEndPosition = o, 0d);
public static readonly DirectProperty<ProgressBar, double> Container2AnimationStartPositionProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(Container2AnimationStartPosition),
p => p.Container2AnimationStartPosition,
(p, o) => p.Container2AnimationStartPosition = o);
(p, o) => p.Container2AnimationStartPosition = o, 0d);
public static readonly DirectProperty<ProgressBar, double> Container2AnimationEndPositionProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
@ -46,14 +45,17 @@ namespace Avalonia.Controls
p => p.Container2AnimationEndPosition,
(p, o) => p.Container2AnimationEndPosition = o);
public static readonly DirectProperty<ProgressBar, double> ContainerAnimationMidPositionProperty =
public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(ContainerAnimationMidPosition),
p => p.ContainerAnimationMidPosition,
(p, o) => p.ContainerAnimationMidPosition = o);
nameof(Container2Width),
p => p.Container2Width,
(p, o) => p.Container2Width = o);
public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(ContainerWidth),
p => p.ContainerWidth,
(p, o) => p.ContainerWidth = o);
public static readonly DirectProperty<ProgressBar, Geometry> ClipRectProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, Geometry>(
@ -113,15 +115,6 @@ namespace Avalonia.Controls
set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
}
public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(Container2Width),
p => p.Container2Width,
(p, o) => p.Container2Width = o);
@ -131,15 +124,7 @@ namespace Avalonia.Controls
get => _Container2Width;
set => SetAndRaise(Container2WidthProperty, ref _Container2Width, value);
}
public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
AvaloniaProperty.RegisterDirect<ProgressBar, double>(
nameof(ContainerWidth),
p => p.ContainerWidth,
(p, o) => p.ContainerWidth = o);
private double _ContainerWidth;
public double ContainerWidth
{
@ -153,14 +138,7 @@ namespace Avalonia.Controls
get => _container2AnimationEndPosition;
set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
}
private double _containerAnimationMidPosition;
public double ContainerAnimationMidPosition
{
get => _containerAnimationMidPosition;
set => SetAndRaise(ContainerAnimationMidPositionProperty, ref _containerAnimationMidPosition, value);
}
private Geometry _clipRect;
public Geometry ClipRect
{
@ -212,13 +190,11 @@ namespace Avalonia.Controls
ContainerWidth = barIndicatorWidth;
Container2Width = barIndicatorWidth2;
ContainerAnimationStartPosition = barIndicatorWidth * -1.0; // Position at -100%
ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
ContainerAnimationMidPosition = dim * 0.2;
var padding = Padding;
var rectangle = new RectangleGeometry(

128
src/Avalonia.Themes.Fluent/ProgressBar.xaml
View File

@ -20,9 +20,13 @@
<Border x:Name="ProgressBarRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
<Border Clip="{TemplateBinding ClipRect}">
<Grid>
<Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
<Rectangle Width="{TemplateBinding ContainerWidth}" x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
<Rectangle Width="{TemplateBinding Container2Width}" x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
<Grid x:Name="DeterminateRoot">
<Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
</Grid>
<Grid x:Name="IndeterminateRoot">
<Rectangle x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
<Rectangle x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
</Grid>
</Grid>
</Border>
</Border>
@ -52,29 +56,44 @@
</Setter.Value>
</Setter>
</Style>
<Style Selector="ProgressBar:indeterminate /template/ Border#PART_Indicator">
<Setter Property="IsVisible" Value="False" />
<!-- FadeInAnimation mockup-->
<Style Selector="ProgressBar /template/ Grid#DeterminateRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.197" />
</Transitions>
</Setter>
</Style>
<Style Selector="ProgressBar /template/ Grid#IndeterminateRoot">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.197" />
</Transitions>
</Setter>
</Style>
<Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator">
<Style Selector="ProgressBar /template/ Grid#DeterminateRoot">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="ProgressBar /template/ Grid#IndeterminateRoot">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator2">
<Style Selector="ProgressBar:indeterminate /template/ Grid#DeterminateRoot">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="ProgressBar:indeterminate /template/ Grid#IndeterminateRoot">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
<Style.Animations>
<Animation Duration="0:0:2" IterationCount="Infinite">
<KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="1" />
<KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:1.5" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="1" />
<KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="0" />
<KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
</KeyFrame>
</Animation>
</Style.Animations>
@ -82,19 +101,78 @@
<Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
<Style.Animations>
<Animation Duration="0:0:2" IterationCount="Infinite">
<KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="1" />
<KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:0.75" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="1" />
<KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
<Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
<Setter Property="Opacity" Value="0" />
<KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationEndPosition}" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
<Style.Animations>
<Animation Duration="0:0:2" IterationCount="Infinite">
<KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
<Style.Animations>
<Animation Duration="0:0:2" IterationCount="Infinite">
<KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</KeyFrame>
<KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
<Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationEndPosition}" />
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator">
<Setter Property="Width" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator2">
<Setter Property="Width" Value="{Binding $parent[ProgressBar].Container2Width}" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator">
<Setter Property="Height" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
</Setter.Value>
</Setter>
</Style>
<Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator2">
<Setter Property="Height" Value="{Binding $parent[ProgressBar].Container2Width}" />
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform Y="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
</Setter.Value>
</Setter>
</Style>
</Styles>

Write Preview
Loading…
Cancel
Save