atomui/samples/AtomUI.Demo.Desktop/ShowCase/ProgressBarShowCase.axaml
2024-07-30 10:14:09 +08:00

339 lines
24 KiB
XML

<UserControl
x:Class="AtomUI.Demo.Desktop.ShowCase.ProgressBarShowCase"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:atom="https://atomui.net"
xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
mc:Ignorable="d">
<showcase:ShowCasePanel>
<showcase:ShowCasePanel.Styles>
<Style Selector="atom|CircleProgress">
<Setter Property="Margin" Value="5"></Setter>
</Style>
<Style Selector="atom|DashboardProgress">
<Setter Property="Margin" Value="5"></Setter>
</Style>
<Style Selector="#CircleWithStep atom|StepsProgressBar">
<Setter Property="Margin" Value="5"></Setter>
</Style>
</showcase:ShowCasePanel.Styles>
<showcase:ShowCaseItem
Title="Progress bar"
Description="A standard progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" />
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar"
Description="A circular progress bar.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" />
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" Status="Exception" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" />
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Mini size progress bar"
Description="Appropriate for a narrow area.">
<WrapPanel Orientation="Horizontal" Width="180" HorizontalAlignment="Left">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" SizeType="Middle" />
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" ShowProgressInfo="False" SizeType="Middle" />
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="A smaller circular progress bar."
Description="A smaller circular progress bar.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" Status="Exception" SizeType="Middle" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" />
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Dynamic"
Description="A dynamic progress bar is better.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="{Binding ProgressValue}" Minimum="0" Maximum="100"/>
<atom:CircleProgress Value="{Binding ProgressValue}" Minimum="0" Maximum="100"/>
<StackPanel Orientation="Horizontal" Spacing="10">
<atom:Button SizeType="Small" Command="{Binding SubProgressValue}">Sub</atom:Button>
<atom:Button SizeType="Small" Command="{Binding AddProgressValue}">Add</atom:Button>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom text format"
Description="You can set a custom text by setting the format prop.">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" ProgressTextFormat="\{0\} Days" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" />
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Dashboard"
Description="By setting type=dashboard, you can get a dashboard style of progress easily. Modify gapDegree to set the degree of gap.">
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Left" />
<atom:DashboardProgress Value="60" Minimum="0" Maximum="100" DashboardGapPosition="Top" />
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" DashboardGapPosition="Right"
GapDegree="40" />
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" DashboardGapPosition="Bottom"
GapDegree="40" />
</WrapPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Progress bar with success segment"
Description="Show several parts of progress with different status.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" SuccessThreshold="30" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30" />
<atom:DashboardProgress Value="60" Minimum="0" Maximum="100" SuccessThreshold="30"
SuccessThresholdBrush="Chocolate" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Stroke Linecap"
Description="By setting strokeLinecap='butt', you can change the linecaps from round to butt, see stroke-linecap for more information.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" StrokeLineCap="Square" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Custom line gradient"
Description="Gradient encapsulation, circle and dashboard will ignore strokeLinecap when setting gradient.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="99" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" Status="Active" />
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="90" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:CircleProgress Value="93" Minimum="0" Maximum="100"
IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="90" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding TwoStopsGradientStrokeColor}" />
<atom:DashboardProgress Value="93" Minimum="0" Maximum="100" StrokeLineCap="Square"
IndicatorBarBrush="{Binding ThreeStopsGradientStrokeColor}" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Progress bar with steps"
Description="A progress bar with steps.">
<StackPanel Orientation="Vertical" Spacing="5">
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" />
<atom:StepsProgressBar Value="30" Minimum="0" Maximum="100" Steps="5" />
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="5" SizeType="Middle" />
<atom:StepsProgressBar Value="80" Minimum="0" Maximum="100" Steps="8" SizeType="Small" />
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="5"
StepsStrokeBrush="{Binding StepsChunkBrushes}" />
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar whit steps"
Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<StackPanel Orientation="Vertical" Spacing="5">
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
IndicatorThickness="20" />
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
IndicatorThickness="20" />
<atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20" Status="Exception" />
<atom:CircleProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20"
SuccessThreshold="30" />
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" StepCount="4" StepGap="8"
IndicatorThickness="20" />
<atom:DashboardProgress Value="70" Minimum="0" Maximum="100" StepCount="10" StepGap="8"
IndicatorThickness="20" />
<atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20" Status="Exception" />
<atom:DashboardProgress Value="77" Minimum="0" Maximum="100" StepCount="8" StepGap="10"
IndicatorThickness="20"
SuccessThreshold="30" />
</WrapPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Circular progress bar whit steps"
Description="A circular progress bar that support steps and color segments, default gap is 2px.">
<StackPanel Orientation="Vertical" Spacing="5" x:Name="CircleWithStep">
<StackPanel Orientation="Vertical" Spacing="5">
<StackPanel Orientation="Vertical" HorizontalAlignment="Left" Width="300">
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Large" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Middle" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" SizeType="Small" />
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" IndicatorThickness="20" />
</StackPanel>
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
<atom:CircleProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Large"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Middle"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" SizeType="Small"/>
<atom:DashboardProgress Value="50" Minimum="0" Maximum="100" Width="20" Height="20"/>
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Large"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Middle"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" SizeType="Small"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="20" ChunkWidth="20"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="3" ChunkHeight="30" ChunkWidth="20"/>
</WrapPanel>
</StackPanel>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Change progress value position"
Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" Width="300" PercentPosition="{Binding InnerEndPercentPosition}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Width="300" IndicatorBarBrush="#001342" PercentPosition="{Binding InnerEndPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Width="400" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Value="60" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}" SizeType="Small"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" PercentPosition="{Binding OutterCenterPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" PercentPosition="{Binding OutterStartPercentPosition}"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Change progress value position for StepsProgressBar"
Description="Change the position of the progress value, you can use percentPosition to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Middle"/>
<atom:StepsProgressBar Value="60" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="8" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="8" PercentPosition="End" Status="Exception"/>
<atom:StepsProgressBar Value="99" Minimum="0" Maximum="100" Steps="8" PercentPosition="Start"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary linear progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" SizeType="Small"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding OutterStartPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="55" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerCenterPercentPosition}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerStartPercentPosition}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Orientation="Vertical" PercentPosition="{Binding InnerEndPercentPosition}"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="Vertical progress bar"
Description="Ordinary step progress bar, supports position specification of additional areas">
<StackPanel Orientation="Horizontal" Spacing="10" Height="300">
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" PercentPosition="End"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="5" Orientation="Vertical"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="10" Orientation="Vertical" SizeType="Small"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
<atom:StepsProgressBar Value="55" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Center"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="6" Orientation="Vertical" PercentPosition="Start"/>
</StackPanel>
</showcase:ShowCaseItem>
<showcase:ShowCaseItem
Title="toggle disabled status"
Description="The progress bar is in the disabled state and uses the disabled style.">
<StackPanel Orientation="Vertical" Spacing="10">
<atom:ProgressBar Value="30" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="50" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="70" Minimum="0" Maximum="100" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:ProgressBar Value="100" Minimum="0" Maximum="100" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="30" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="50" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="70" Minimum="0" Maximum="100" Steps="10" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:StepsProgressBar Value="100" Minimum="0" Maximum="100" Steps="10" IsEnabled="{Binding ToggleStatus}"/>
<WrapPanel Orientation="Horizontal">
<atom:CircleProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:CircleProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:CircleProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
</WrapPanel>
<WrapPanel Orientation="Horizontal">
<atom:DashboardProgress Value="75" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
<atom:DashboardProgress Value="70" Minimum="0" Maximum="100" SizeType="Middle" Status="Exception" IsEnabled="{Binding ToggleStatus}"/>
<atom:DashboardProgress Value="100" Minimum="0" Maximum="100" SizeType="Middle" IsEnabled="{Binding ToggleStatus}"/>
</WrapPanel>
<atom:Button Margin="0, 10, 0, 0"
Text="{Binding ToggleDisabledText}"
Command="{Binding ToggleEnabledStatus}"/>
</StackPanel>
</showcase:ShowCaseItem>
</showcase:ShowCasePanel>
</UserControl>