重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider
作者:webabcd
介绍
重新想象 Windows 8 Store Apps 之提示控件
- ProgressRing - 进度圈控件
重新想象 Windows 8 Store Apps 之范围控件
- ProgressBar - 进度条控件
- Slider - 滑动条控件
示例
1、ProgressRing 的 Demo
ProgressRingDemo.xaml
<Page x:Class="XamlDemo.Controls.ProgressRingDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" 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="120 0 0 0"> <!-- ProgressRing - 进度圈控件 IsActive - 是否显示 --> <ProgressRing IsActive="{Binding IsChecked, ElementName=chkRunning}" Width="200" Height="200" HorizontalAlignment="Left" /> <CheckBox Name="chkRunning" Content="Running" IsChecked="True" /> </StackPanel> </Grid> </Page>
2、ProgressBar 的 Demo
ProgressBarDemo.xaml
<Page x:Class="XamlDemo.Controls.ProgressBarDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" 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="120 0 0 0"> <!-- ProgressBar - 进度条控件 IsIndeterminate - 是否是无法确定进度的进度条 Minimum - 进度条的最小值 Maximum - 进度条的最大值 Value - 进度条的当前值 ShowPaused - 显示暂停状态 ShowError - 显示错误状态 ValueChanged - 进度条的当前值发生变化后所触发的事件 --> <ProgressBar IsIndeterminate="True" Width="200" HorizontalAlignment="Left" 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" 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>
3、Slider 的 Demo
SliderDemo.xaml
<Page x:Class="XamlDemo.Controls.SliderDemo" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:XamlDemo.Controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:myControls="using:MyControls" mc:Ignorable="d"> <Grid Background="Transparent"> <Grid.Resources> <local:MyThumbToolTipValueConverter x:Key="MyThumbToolTipValueConverter" /> </Grid.Resources> <!-- Slider - 滑动条控件 Value - 滑动条的值 SmallChange - 按键盘左右键时,滑动条的值的变化量 Orientation - 滑动条的布局方向,Horizontal:水平放置,Vertical:垂直放置 IsDirectionReversed - 增加值方向为左到右或下到上则为 false,反之为 true IsThumbToolTipEnabled - 是否在 thumb 旁显示当前值的提示 ThumbToolTipValueConverter - 在 thumb 旁显示当前值的提示时所使用的 Converter Minimum - 最小值 Maximum - 最大值 ValueChanged - 当前值发生变化后所触发的事件 TickPlacement - 如何显示刻度线,Windows.UI.Xaml.Controls.Primitives.TickPlacement枚举(None, TopLeft, BottomRight, Outside, Inline) TickFrequency - 刻度线的间隔 StepFrequency - 每一步的间隔 SnapsTo - 按 TickFrequency 做 Snap 还是按 StepFrequency 做 Snap,Windows.UI.Xaml.Controls.Primitives.SliderSnapsTo枚举 StepValues - 按 StepFrequency 做 Snap(默认值) Ticks - 按 TickFrequency 做 Snap --> <StackPanel Margin="120 0 0 0"> <Slider Width="100" SmallChange="2" Value="20" HorizontalAlignment="Left" /> <Slider Height="100" Orientation="Vertical" IsDirectionReversed="True" HorizontalAlignment="Left" IsThumbToolTipEnabled="True" ThumbToolTipValueConverter="{StaticResource MyThumbToolTipValueConverter}" /> <Slider Width="800" Minimum="0" Maximum="800" StepFrequency="100" HorizontalAlignment="Left" TickPlacement="Inline" TickFrequency="80" SnapsTo="StepValues" /> <!--自定义 Slider 使其具有圆角效果,类似 ios 的滑动条(具体实现参考 MyControls 项目中的 MySlider)--> <myControls:MySlider Width="100" HorizontalAlignment="Left" /> </StackPanel> </Grid> </Page>
SliderDemo.xaml.cs
/* * Slider - 滑动条控件 * Thumb - 可由用户拖动的控件(Slider 内的可拖动部分就是一个 Thumb 控件) */ using System; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Data; namespace XamlDemo.Controls { 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) { // 在 Slider 的值后面加一个百分号 return value + "%"; } public object ConvertBack(object value, Type targetType, object parameter, string language) { return null; } } }
4、自定义 Slider 使其具有圆角效果
MyControls/MySlider.cs
/* * 改变 Slider 的样式,使其具有圆角效果,类似 ios 的滑动条 */ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Primitives; using Windows.UI.Xaml.Shapes; namespace MyControls { public class MySlider : Slider { // 原 loaded 背景(Slider 中已加载部分的背景) private Rectangle _loadedBackground; // 由于用原 loaded 背景实现圆角有一些问题,所以新增了一个 Rectangle 来辅助 private Rectangle _loadedBackgroundCustom; private Thumb _thumb; public MySlider() : base() { this.DefaultStyleKey = typeof(MySlider); } protected override void OnValueChanged(double oldValue, double newValue) { base.OnValueChanged(oldValue, newValue); _loadedBackgroundCustom.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left; // loaded 背景的宽度为原 loaded 背景的宽度加上 thumb 宽度的二分之一 _loadedBackgroundCustom.Width = _loadedBackground.Width + _thumb.Width / 2; } protected override void OnApplyTemplate() { base.OnApplyTemplate(); _loadedBackground = GetTemplateChild("HorizontalDecreaseRect") as Rectangle; _loadedBackgroundCustom = GetTemplateChild("HorizontalBorderCustom") as Rectangle; _thumb = GetTemplateChild("HorizontalThumb") as Thumb; } } }
MyControls/themes/MySlider.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyControls">
<Style TargetType="local:MySlider">
<Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource SliderBorderThemeThickness}"/>
<Setter Property="Foreground" Value="{StaticResource SliderTrackDecreaseBackgroundThemeBrush}"/>
<Setter Property="ManipulationMode" Value="None"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MySlider">
<Grid Margin="{TemplateBinding Padding}">
<Grid.Resources>
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource SliderThumbBorderThemeBrush}"/>
<Setter Property="Background" Value="{StaticResource SliderThumbBackgroundThemeBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<!--
将原来的用 Border 实现的 thumb 改为用 Ellipse 来实现,从而实现圆形的 thumb
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
-->
<Ellipse Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="HorizontalBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="VerticalBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="VerticalThumb">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="TopTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalInlineTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BottomTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="LeftTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalInlineTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="RightTickBar">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalTrackRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalDecreaseRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName