重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范圍控件: ProgressBar, Slider 原文:重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范圍控件: ProgressBar, Slider

[源碼下載]

重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范圍控件: ProgressBar, Slider

作者：webabcd


介紹
重新想象 Windows 8 Store Apps 之提示控件

• ProgressRing - 進(jìn)度圈控件

重新想象 Windows 8 Store Apps 之范圍控件

• ProgressBar - 進(jìn)度條控件
• Slider - 滑動(dòng)條控件

示例
1、ProgressRing 的 Demo
ProgressRingDemo.xaml

<Pagex: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 - 進(jìn)度圈控件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

<Pagex: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 - 進(jìn)度條控件IsIndeterminate - 是否是無(wú)法確定進(jìn)度的進(jìn)度條Minimum - 進(jìn)度條的最小值Maximum - 進(jìn)度條的最大值Value - 進(jìn)度條的當(dāng)前值ShowPaused - 顯示暫停狀態(tài)ShowError - 顯示錯(cuò)誤狀態(tài)ValueChanged - 進(jìn)度條的當(dāng)前值發(fā)生變化后所觸發(fā)的事件--><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

<Pagex: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 - 滑動(dòng)條控件Value - 滑動(dòng)條的值SmallChange - 按鍵盤左右鍵時(shí)，滑動(dòng)條的值的變化量Orientation - 滑動(dòng)條的布局方向，Horizontal:水平放置，Vertical:垂直放置IsDirectionReversed - 增加值方向?yàn)樽蟮接一蛳碌缴蟿t為 false，反之為 trueIsThumbToolTipEnabled - 是否在 thumb 旁顯示當(dāng)前值的提示ThumbToolTipValueConverter - 在 thumb 旁顯示當(dāng)前值的提示時(shí)所使用的 ConverterMinimum - 最小值Maximum - 最大值ValueChanged - 當(dāng)前值發(fā)生變化后所觸發(fā)的事件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（默認(rèn)值）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 的滑動(dòng)條（具體實(shí)現(xiàn)參考 MyControls 項(xiàng)目中的 MySlider）--><myControls:MySlider Width="100" HorizontalAlignment="Left" /></StackPanel></Grid> </Page>

SliderDemo.xaml.cs

/** Slider - 滑動(dòng)條控件* Thumb - 可由用戶拖動(dòng)的控件（Slider 內(nèi)的可拖動(dòng)部分就是一個(gè) 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 提供 Converterpublic sealed class MyThumbToolTipValueConverter : IValueConverter{public object Convert(object value, Type targetType, object parameter, string language){// 在 Slider 的值后面加一個(gè)百分號(hào)return value + "%";}public object ConvertBack(object value, Type targetType, object parameter, string language){return null;}} }

4、自定義 Slider 使其具有圓角效果
MyControls/MySlider.cs

/** 改變 Slider 的樣式，使其具有圓角效果，類似 ios 的滑動(dòng)條*/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 背景實(shí)現(xiàn)圓角有一些問(wèn)題，所以新增了一個(gè) Rectangle 來(lái)輔助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

<ResourceDictionaryxmlns="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"><!--將原來(lái)的用 Border 實(shí)現(xiàn)的 thumb 改為用 Ellipse 來(lái)實(shí)現(xiàn)，從而實(shí)現(xiàn)圓形的 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><!--原滑動(dòng)條進(jìn)度的整體背景，通過(guò)修改使其具有圓角效果<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"/><!--原滑動(dòng)條進(jìn)度的 Loaded 背景，通過(guò)修改使其具有圓角效果（需要增加一個(gè) 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 是新增的，通過(guò)其來(lái)實(shí)現(xiàn)滑動(dòng)條進(jìn)度的 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>

OK
[源碼下載]

posted on 2014-03-08 15:08 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3587942.html

總結(jié)

以上是生活随笔為你收集整理的重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。