重新想象 Windows 8 Store Apps (4)

hyytaojunming

　　[源码下载]




重新想象 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












　　
2、ProgressBar 的 Demo
ProgressBarDemo.xaml

















　　
3、Slider 的 Demo
SliderDemo.xaml


















　　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













































































































































































































　　
OK
[源码下载]