背水一战 Windows 10 (34) - 控件（进度类）: RangeBase, Slider, ProgressBar, ProgressRing

2022-12-05 23:18:58

介绍
背水一战 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
[源码下载]

码农公寓

相关文章