程式師世界 >> 編程語言 >> .NET網頁編程 >> 關於.NET >> Windows 8 Store Apps學習(4) 提示控件和范圍控件

Windows 8 Store Apps學習(4) 提示控件和范圍控件

編輯：關於.NET

提示控件: ProgressRing; 范圍控件: ProgressBar, Slider

介紹

重新想象 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="VerticalTrackRect">   
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}"/>   
                                        </ObjectAnimationUsingKeyFrames>   
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="HorizontalThumb">   
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}"/>   
                                        </ObjectAnimationUsingKeyFrames>   
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="HorizontalThumb">   
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}"/>   
                                        </ObjectAnimationUsingKeyFrames>   
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="VerticalThumb">   
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}"/>   
                                        </ObjectAnimationUsingKeyFrames>   
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="VerticalThumb">   
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}"/>   
                                        </ObjectAnimationUsingKeyFrames>   
                                    </Storyboard>   
                                </VisualState>   
                            </VisualStateGroup>   
                            <VisualStateGroup x:Name="FocusStates">   
                                <VisualState x:Name="Focused">   
                                    <Storyboard>   
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 

Storyboard.TargetName="FocusVisualWhiteHorizontal"/>   
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 

Storyboard.TargetName="FocusVisualBlackHorizontal"/>   
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 

Storyboard.TargetName="FocusVisualWhiteVertical"/>   
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" 

Storyboard.TargetName="FocusVisualBlackVertical"/>   
                                    </Storyboard>   
                                </VisualState>   
                                <VisualState x:Name="Unfocused"/>   
                            </VisualStateGroup>   
                        </VisualStateManager.VisualStateGroups>   
                        <Grid x:Name="HorizontalTemplate" Background="Transparent">   
                            <Grid.ColumnDefinitions>   
                                <ColumnDefinition Width="Auto"/>   
                                <ColumnDefinition Width="Auto"/>   
                                <ColumnDefinition Width="*"/>   
                            </Grid.ColumnDefinitions>   
                            <Grid.RowDefinitions>   
                                <RowDefinition Height="17"/>   
                                <RowDefinition Height="Auto"/>   
                                <RowDefinition Height="32"/>   
                            </Grid.RowDefinitions>   
                            <!--   
                            原滑動條進度的整體背景，通過修改使其具有圓角效果   
                            <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Grid.Row="1"/>   
                            -->   
                            <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Grid.Row="1" RadiusX="5" 

RadiusY="5"/>   
                            <!--   
                            原滑動條進度的 Loaded 背景，通過修改使其具有圓角效果（需要增加一個 HorizontalBorderCustom 做輔助，詳見後）   
                            <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1"/>   
                            -->   
                            <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Foreground}" Grid.Row="1" RadiusX="5" RadiusY="5"/>   
                            <TickBar x:Name="TopTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" 

Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,0,0,2" Visibility="Collapsed" VerticalAlignment="Bottom"/>   
                            <TickBar x:Name="HorizontalInlineTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" 

Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Visibility="Collapsed"/>   
                            <TickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" 

Height="{StaticResource SliderOutsideTickBarThemeHeight}" Margin="0,2,0,0" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/>   
                            <Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}" 

StrokeThickness="{TemplateBinding BorderThickness}" />   
                            <!--   
                            HorizontalBorderCustom 是新增的，通過其來實現滑動條進度的 Loaded 的圓角效果   
                            -->   
                            <Rectangle x:Name="HorizontalBorderCustom" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}" 

StrokeThickness="{TemplateBinding BorderThickness}" Fill="{TemplateBinding Foreground}" RadiusX="5" RadiusY="5" Width="0"/>   
                            <Thumb x:Name="HorizontalThumb" Background="{StaticResource SliderThumbBackgroundThemeBrush}" Grid.Column="1" 

DataContext="{TemplateBinding Value}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Width="{StaticResource 

SliderTrackThemeHeight}"/>   
                            <Rectangle x:Name="FocusVisualWhiteHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" 

StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>   
                            <Rectangle x:Name="FocusVisualBlackHorizontal" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" 

StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>   
                        </Grid>   
                        <Grid x:Name="VerticalTemplate" Background="Transparent" Visibility="Collapsed">   
                            <Grid.ColumnDefinitions>   
                                <ColumnDefinition Width="17"/>   
                                <ColumnDefinition Width="Auto"/>   
                                <ColumnDefinition Width="17"/>   
                            </Grid.ColumnDefinitions>   
                            <Grid.RowDefinitions>   
                                <RowDefinition Height="*"/>   
                                <RowDefinition Height="Auto"/>   
                                <RowDefinition Height="Auto"/>   
                            </Grid.RowDefinitions>   
                            <Rectangle x:Name="VerticalTrackRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.RowSpan="3"/>   
                            <Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" Fill="{TemplateBinding Foreground}" Grid.Row="2"/>   
                            <TickBar x:Name="LeftTickBar" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" HorizontalAlignment="Right" 

Margin="0,0,2,0" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderOutsideTickBarThemeHeight}"/>   
                            <TickBar x:Name="VerticalInlineTickBar" Grid.Column="1" Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}" 

Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderTrackThemeHeight}"/>   
                            <TickBar x:Name="RightTickBar" Grid.Column="2" Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}" 

HorizontalAlignment="Left" Margin="2,0,0,0" Grid.RowSpan="3" Visibility="Collapsed" Width="{StaticResource SliderOutsideTickBarThemeHeight}"/>   
                            <Rectangle x:Name="VerticalBorder" Grid.Column="1" Grid.RowSpan="3" Stroke="{TemplateBinding BorderBrush}" 

StrokeThickness="{TemplateBinding BorderThickness}"/>   
                            <Thumb x:Name="VerticalThumb" Background="{StaticResource SliderThumbBackgroundThemeBrush}" Grid.Column="1" 

DataContext="{TemplateBinding Value}" Height="{StaticResource SliderTrackThemeHeight}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Width="{StaticResource 

SliderTrackThemeHeight}"/>   
                            <Rectangle x:Name="FocusVisualWhiteVertical" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" 

StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>   
                            <Rectangle x:Name="FocusVisualBlackVertical" Grid.ColumnSpan="3" IsHitTestVisible="False" Opacity="0" Grid.RowSpan="3" 

StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>   
                        </Grid>   
                    </Grid>   
                </ControlTemplate>   
            </Setter.Value>   
        </Setter>   
    </Style>   
</ResourceDictionary>

[源碼下載]：http://files.cnblogs.com/webabcd/Windows8.rar