[源码下载]

背水一战 Windows 10 (34) - 控件(进度类): 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
[源码下载]

背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing的更多相关文章

  1. 背水一战 Windows 10 (27) - 控件(文本类): TextBlock

    [源码下载] 背水一战 Windows 10 (27) - 控件(文本类): TextBlock 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) TextBlock 示例 ...

  2. 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog

    [源码下载] 背水一战 Windows 10 (37) - 控件(弹出类): MessageDialog, ContentDialog 作者:webabcd 介绍背水一战 Windows 10 之 控 ...

  3. 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu

    [源码下载] 背水一战 Windows 10 (36) - 控件(弹出类): ToolTip, Popup, PopupMenu 作者:webabcd 介绍背水一战 Windows 10 之 控件(弹 ...

  4. 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout

    [源码下载] 背水一战 Windows 10 (35) - 控件(弹出类): FlyoutBase, Flyout, MenuFlyout 作者:webabcd 介绍背水一战 Windows 10 之 ...

  5. 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch

    [源码下载] 背水一战 Windows 10 (33) - 控件(选择类): ListBox, RadioButton, CheckBox, ToggleSwitch 作者:webabcd 介绍背水一 ...

  6. 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox

    [源码下载] 背水一战 Windows 10 (32) - 控件(选择类): Selector, ComboBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(选择类) Sel ...

  7. 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, AppBarButton, AppBarToggleButton

    [源码下载] 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButt ...

  8. 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox

    [源码下载] 背水一战 Windows 10 (30) - 控件(文本类): AutoSuggestBox 作者:webabcd 介绍背水一战 Windows 10 之 控件(文本类) AutoSug ...

  9. 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

随机推荐

  1. 电容与EMC-电容不同功能时对整板EMC的作用

    一般我们的pcb板的器件有很多种类,但是值得特别关注的,很多人都会说是BGA.接口.IC.晶振之类,因为这些都是layout功能模块以及设计难点.然而数量上占绝对优势的器件却是阻容器件,之前围殴阻抗时 ...

  2. Pandas-数据整理

    Pandas包对数据的常用整理功能,相当于数据预处理(不包括特征工程) 目录 丢弃值 drop() 缺失值处理 isnull() & notnull() dropna() fillna() 值 ...

  3. Auto CAD 2013的故障解决方法

    一.问题的提出 Auto CAD 2013在使用过程中出现了错误:“安全系统(软件锁许可管理器) 不起作用或未正确安装.” 二.问题的分析 网络上很多地方转载了这么一个方法: 1) 启动Windows ...

  4. 获取IE代理服务器信息

    “局域网设置”里有自动配置.代理服务器的设置项目,在进行网络通讯相关的开发时,需要使用到它们,下边介绍如何将这些设置信息读取出来. 当“使用自动配置脚本”不使用时,使用WinHttpGetIEProx ...

  5. C#&#160;实现远程控制软件的关键技术

    一.服务器端多线程Socket技术    用TcpListener进行侦听,接受客户端连接,有客户端连进来后开启处理线程处理数据,代码如下:    using System; using System ...

  6. 09 - 删除vtkDataObject中的ShouldIReleaseData() and ReleaseDataFlag 方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.下面列出来的就是其中的一些方法: ShouldIReleaseData() SetReleaseDataF ...

  7. Docker(四):Docker基本网络配置

    1.Libnetwork Libnetwork提出了新的容器网络模型简称为CNM,定义了标准的API用于为容器配置网络. CNM三个重要概念: 沙盒:一个隔离的网络运行环境,保存了容器网络栈的配置,包 ...

  8. Typora 使用说明

    目录 Typora是一款超简洁的markdown编辑器,具有如下特点: 完全免费,目前已支持中文 跨平台,支持windows,mac,linux 支持数学公式输入,图片插入 极其简洁,无多余功能 界面 ...

  9. 我永远爱着OOP——第二单元作业总结

    第二单元的电梯真是愉♂快呢,多线程编程作为java编程OOP中的重要组成部分,通过这一个单元的学习,我也是有了很多全新的认识 那么下面就先例行一下公事 三次作业分析 第五次作业 设计分析 实现的电梯是 ...

  10. Vim和Neovim安装YouCompleteMe

    确定支持Python,Vim一般支持,Neovim默认不支持 Vim的就不介绍方法了,很多系统都不一样.Neovim添加Python支持 pip install setuptools pip inst ...