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();
}
}
}

控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing的更多相关文章

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

    [源码下载] 背水一战 Windows 10 (34) - 控件(进度类): RangeBase, Slider, ProgressBar, ProgressRing 作者:webabcd 介绍背水一 ...

  2. 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)

    [源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...

  3. 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page

    [源码下载] 背水一战 Windows 10 (77) - 控件(控件基类): ContentControl, UserControl, Page 作者:webabcd 介绍背水一战 Windows ...

  4. 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

    [源码下载] 背水一战 Windows 10 (76) - 控件(控件基类): Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中 ...

  5. 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, VerticalAlignment

    [源码下载] 背水一战 Windows 10 (75) - 控件(控件基类): FrameworkElement - 基础知识, 相关事件, HorizontalAlignment, Vertical ...

  6. 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件

    [源码下载] 背水一战 Windows 10 (74) - 控件(控件基类): UIElement - 与 CanDrag 相关的事件, 与 AllowDrop 相关的事件 作者:webabcd 介绍 ...

  7. 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作

    [源码下载] 背水一战 Windows 10 (73) - 控件(控件基类): UIElement - 拖放的基本应用, 手动开启 UIElement 的拖放操作 作者:webabcd 介绍背水一战 ...

  8. 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性

    [源码下载] 背水一战 Windows 10 (72) - 控件(控件基类): UIElement - UIElement 的位置, UIElement 的布局, UIElement 的其他特性 作者 ...

  9. 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁)

    [源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...

随机推荐

  1. FragmentPagerAdapter+ViewPager实现Tab切换效果

    1.Activity  加载布局文件,获取Viewpager控件   给ViewPager填充适配器. import android.app.ActionBar; import android.app ...

  2. 使用RMAN DUPLICATE...FROM ACTIVE DATABASE创建物理standby database

    Applies to: Oracle Server - Enterprise Edition - Version 11.1.0.6 to 11.2.0.4 [Release 11.1 to 11.2] ...

  3. Splunk及splunkforward简单部署配置

    部署环境 操作系统 服务器操作系统版本:CentOS release 6.5 (Final) 2.6.32-431.el6.x86_64 软件 软件版本:splunk-6.4.0 tar: splun ...

  4. Mysql 只导出数据,不包含表结构

    mysqldump -u${user} -p${passwd} --no-create-info --database ${dbname} --table ${tablename} > ${ta ...

  5. SQL行转列

    目的:将相同条件的多行值合并到同一列, 1.创建测试表: CREATE TABLE [dbo].[TB_01]( ) NULL, ) NULL, [SDATE] [datetime] NULL ) O ...

  6. (转)在Windows上以服务方式运行 MSOPenTech/Redis

    ServiceStack.Redis 使用教程里提到Redis最好还是部署到Linux下去,Windows只是用来做开发环境,现在这个命题发生改变了,在Windows上也可以部署生产环境的Redis, ...

  7. linux 下安装jdk及配置jdk环境图解

    linux 下安装jdk及配置jdk环境图解 一:先检測是否已安装了JDK 运行命令: # rpm -qa|grep jdk  或   # rpm -q jdk  或  #find / -name j ...

  8. UML类图的简单梳理

    依赖关系 Dependency Class Car{} Class Person{ int a; static int b public void buy(Car c){ int c; .... } ...

  9. 性能测试的过程(jmeter)

    一.web性能测试的准备工作 1.项目背景 访问地址 访问环境:windows 2.需求 并发登陆的性能(要求多少个用户登录) 3.场景 60秒内运行100个线程 线程在20.50.100并发下的表现 ...

  10. SUSE 图形化界面/How to enable/disable AS Java Safe Mode

    vncserver 不同的用户使用不同的图形化环境变量 比如sidadm用户要启动configtools.sh 需要sidadm来启动图形化 如何将java切换成safe mode 2125707 - ...