背水一戰 Windows 10 (34) - 控制項（進度類）: RangeBase, Slider, ProgressBar, ProgressRing

背水一戰 Windows 10 之控制項（進度類）: RangeBase, Slider, ProgressBar, ProgressRing ...

作者：webabcd

介紹
背水一戰 Windows 10 之控制項（進度類）

RangeBase
Slider
ProgressBar
ProgressRing

示例
1、RangeBase(基類) 的示例
Controls/ProgressControl/RangeBaseDemo.xaml

<Page
    x:Class="Windows10.Controls.ProgressControl.RangeBaseDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ProgressControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <TextBlock Name="lblMsg" Margin="5" />
            
            <!--
                Slider - 滑動條控制項，繼承自 RangeBase，下麵介紹 RangeBase 的相關知識點
                    Minimum - 範圍控制項的最小值（double 類型）
                    Maximum - 範圍控制項的最大值（double 類型）
                    Value - 範圍控制項的當前值（double 類型）
                    SmallChange - 小變化步長（double 類型），按鍵盤的“上/下/左/右”鍵
                    LargeChange - 大變化步長（double 類型），按鍵盤的“PageUp/PageDown”鍵（經測試無效，另外 Home 鍵和 End 鍵是可用的）
                    ValueChanged - 範圍控制項的當前值發生變化後觸發的事件
            -->

            <Slider Name="slider" Width="200" Margin="5" HorizontalAlignment="Left" Foreground="Orange" Background="Red" Style="{StaticResource MySliderStyle}"
                    Minimum="1000" Maximum="2000" Value="1500" SmallChange="10" LargeChange="100" ValueChanged="slider_ValueChanged">
            </Slider>

        </StackPanel>
    </Grid>
</Page>

Controls/ProgressControl/RangeBaseDemo.xaml.cs

/*
 * RangeBase(基類) - 範圍控制項基類（繼承自 Control, 請參見 /Controls/BaseControl/ControlDemo/）
 */

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;

namespace Windows10.Controls.ProgressControl
{
    public sealed partial class RangeBaseDemo : Page
    {
        public RangeBaseDemo()
        {
            this.InitializeComponent();
        }

        private void slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {
            // RangeBaseValueChangedEventArgs
            //     OldValue - 範圍控制項的之前的值
            //     NewValue - 範圍控制項的當前的值
            lblMsg.Text = $"slider old value:{e.OldValue}, slider new value:{e.NewValue}";
        }
    }
}

2、Slider 的示例
Controls/ProgressControl/SliderDemo.xaml

<Page
    x:Class="Windows10.Controls.ProgressControl.SliderDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ProgressControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">

        <Grid.Resources>
            <local:MyThumbToolTipValueConverter x:Key="MyThumbToolTipValueConverter" />
        </Grid.Resources>

        <!--
            Slider - 滑動條控制項
                Header - 可以設置一個純文本，不能命中測試，空 Header 的話不會占用任何空間
                HeaderTemplate - 可以將 Header 設置為任何 xaml，且支持命中測試
                Orientation - 滑動條的佈局方向
                    Horizontal - 水平放置
                    Vertical - 垂直放置
                IsDirectionReversed - 值的增加方向為左到右或下到上則為 false（預設值），反之為 true
                IsThumbToolTipEnabled - 是否在 thumb 旁顯示當前值的提示
                ThumbToolTipValueConverter - 在 thumb 旁顯示當前值的提示時所使用的 Converter
                TickPlacement - 如何顯示刻度線，Windows.UI.Xaml.Controls.Primitives.TickPlacement枚舉（None, TopLeft, BottomRight, Outside, Inline）
                TickFrequency - 刻度線的間隔
                StepFrequency - 每一步的間隔
                SnapsTo - 貼靠方式
                    StepValues - 按 StepFrequency 做 Snap（預設值）
                        通過滑鼠拖動或滑鼠點擊控制 Slider 時，其值是 StepFrequency 的整倍數（註：鍵盤控制時，步長來自於基類 RangeBase 的 SmallChange, LargeChange）
                    Ticks - 按 TickFrequency 做 Snap
                        通過滑鼠拖動或滑鼠點擊控制 Slider 時，其值是 TickFrequency 的整倍數（註：鍵盤控制時，步長來自於基類 RangeBase 的 SmallChange, LargeChange）
        
            註：可以通過 Foreground, Background 來設置 Slider 的部分狀態的顏色，更多的樣式設置還是要去修改控制項模板
        -->
        <StackPanel Margin="10 0 10 10">

            <Slider Margin="5" Width="100" Value="20" HorizontalAlignment="Left" Foreground="Orange" Background="Red" Style="{StaticResource MySliderStyle}"
                    Header="Slider" />

            <Slider Margin="5" Height="100" HorizontalAlignment="Left" Foreground="Orange" Background="Red" Style="{StaticResource MySliderStyle}"
                    Orientation="Vertical" IsDirectionReversed="True" 
                    IsThumbToolTipEnabled="True" ThumbToolTipValueConverter="{StaticResource MyThumbToolTipValueConverter}">
                <Slider.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="Slider" Foreground="Red" />
                    </DataTemplate>
                </Slider.HeaderTemplate>
            </Slider>

            <Slider Margin="5" Width="800" Minimum="0" Maximum="800" HorizontalAlignment="Left"  Foreground="Orange" Background="Red" Style="{StaticResource MySliderStyle}"
                    TickPlacement="Inline" TickFrequency="80" 
                    StepFrequency="100" SnapsTo="StepValues" />

        </StackPanel>
    </Grid>
</Page>

Controls/ProgressControl/SliderDemo.xaml.cs

/*
 * Slider - 滑動條控制項（繼承自 RangeBase, 請參見 /Controls/ProgressControl/RangeBaseDemo.xaml）
 * Thumb - 可由用戶拖動的控制項（Slider 內的可拖動部分就是一個 Thumb 控制項）
 */

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace Windows10.Controls.ProgressControl
{
    public sealed partial class SliderDemo : Page
    {
        public SliderDemo()
        {
            this.InitializeComponent();
        }
    }

    // 為 Slider 的 ThumbToolTipValueConverter 提供 Converter
    public sealed class MyThumbToolTipValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            // 在 thumb 旁顯示的當前值的後面加一個百分號
            return value + "%";
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return null;
        }
    }
}

3、ProgressBar 的示例
Controls/ProgressControl/ProgressBarDemo.xaml

<Page
    x:Class="Windows10.Controls.ProgressControl.ProgressBarDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ProgressControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                ProgressBar - 進度條控制項
                    IsIndeterminate - 是否是無法確定進度的進度條
                    ShowPaused - 顯示暫停狀態
                    ShowError - 顯示錯誤狀態
            
                註：可以通過 Foreground, Background 來設置 ProgressBar 的部分狀態的顏色，更多的樣式設置還是要去修改控制項模板
            -->

            <ProgressBar IsIndeterminate="True" Width="200" HorizontalAlignment="Left" 
                         Foreground="Orange" Background="Red"
                         ShowPaused="{Binding IsChecked, ElementName=radPaused}"
                         ShowError="{Binding IsChecked, ElementName=radError}" />

            <ProgressBar IsIndeterminate="False" Width="200" Minimum="0" Maximum="100" Value="50"  HorizontalAlignment="Left" Margin="0 20 0 0"  
                         Foreground="Orange" Background="Red"
                         ShowPaused="{Binding IsChecked, ElementName=radPaused}"
                         ShowError="{Binding IsChecked, ElementName=radError}"/>

            <StackPanel Orientation="Horizontal" Margin="0 20 0 0">
                <RadioButton x:Name="radRunning" GroupName="ProgressState" Content="Running" IsChecked="True"/>
                <RadioButton x:Name="radPaused" GroupName="ProgressState" Content="Paused"/>
                <RadioButton x:Name="radError" GroupName="ProgressState" Content="Error"/>
            </StackPanel>

        </StackPanel>
    </Grid>
</Page>

Controls/ProgressControl/ProgressBarDemo.xaml.cs

/*
 * ProgressBar - 進度條控制項（繼承自 RangeBase, 請參見 /Controls/ProgressControl/RangeBaseDemo.xaml）
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.ProgressControl
{
    public sealed partial class ProgressBarDemo : Page
    {
        public ProgressBarDemo()
        {
            this.InitializeComponent();
        }
    }
}

4、ProgressRing 的示例
Controls/ProgressControl/ProgressRingDemo.xaml

<Page
    x:Class="Windows10.Controls.ProgressControl.ProgressRingDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.ProgressControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="Transparent">
        <StackPanel Margin="10 0 10 10">

            <!--
                ProgressRing - 進度圈控制項
                    IsActive - 是否顯示
            -->
            <ProgressRing Margin="5" Foreground="White" Width="200" Height="200" HorizontalAlignment="Left" 
                          IsActive="{Binding IsChecked, ElementName=chkIsActive}"/>

            <CheckBox Name="chkIsActive" Margin="5" Content="IsActive" IsChecked="True" />
            
        </StackPanel>
    </Grid>
</Page>

Controls/ProgressControl/ProgressRingDemo.xaml.cs

/*
 * ProgressRing - 進度圈控制項（繼承自 Control, 請參見 /Controls/BaseControl/ControlDemo/）
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.ProgressControl
{
    public sealed partial class ProgressRingDemo : Page
    {
        public ProgressRingDemo()
        {
            this.InitializeComponent();
        }
    }
}

OK
[源碼下載]