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

原文:重新想象 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 / ;

        }

        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>

OK
[源码下载]

重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider的更多相关文章

重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree
原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...
重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager
原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...
重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试
原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...
重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding
原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...
重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom
原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...
重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示
原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...
重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView
原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView [源码下载] 重新想象 Windows 8 Store Apps (11) - ...
重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom
原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...
重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础
原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础 [源码下载] 重新想象 Windows 8 Store Apps (9) - 控件之 Sc ...
重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid
原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...

随机推荐

检测用户是否具有administrator权限（OpenThreadToken，OpenProcessToken，GetTokenInformation，AllocateAndInitializeSid和EqualSid）
检测用户是否具有administrator权限const SECURITY_NT_AUTHORITY: TSIDIdentifierAuthority = (Value: (0, 0, 0, 0, 0 ...
JAVA编程心得-JAVA实现CRC-CCITT(XMODEM)算法
CRC即循环冗余校验码(Cyclic Redundancy Check):是数据通信领域中最常用的一种差错校验码,其特征是信息字段和校验字段的长度可以任意选定. 1 byte checksum CRC ...
Citrix 服务器虚拟化之三十一 XenApp 6.5负载均衡
Citrix 服务器虚拟化之三十一 XenApp 6.5负载均衡说明: 环境基于实验三十 1.准备一台Windows Server 2008 R2的虚拟机名为XenAPP2,然后加入域k ...
字符串转换为整数”123“->123
字符串转换为整数"123"->123 题目描写叙述: 输入一个由数字组成的字符串.把它转换成整数并输出. 比如:输入字符串"123".输出整数123. 给 ...
使用函数指针和多态代替冗长的if-else或者switch-case
在编程中,if-else和switch-case是很常见的分支结构,很少在程序中不用这些控制语句.但是不能否认,在一些场景下,由于分支结构过分长,导致代码不美观且不容易维护,在<重构>一书 ...
Git中的merge命令实现和工作方式
想象一下有例如以下情形:代码库中存在两个分支,而且每一个分支都进行了改动.最后你想要将当中的一个分支合并到其它的分支中.个人博客网址 http://swinghu.github.com/ 那么要问合并 ...
Android 推断当前的界面是否是桌面的方法
在开发桌面飘浮控件的时候,须要通过service查看当前是不是桌面,从而控制漂浮窗的显现与消失,以下的代码就是推断是否是桌面的方法 /** * 推断当前界面是否是桌面 */ private boole ...
ByteBuffer和String的互相转换
import java.nio.ByteBuffer; import java.nio.CharBuffer; import java.nio.charset.Charset; import java ...
FZU2179（数位dp）
传送门:Chriswho 题意:求区间[1,n]内能整除自己本身各位数字的数的个数. 分析:这题跟CF 55D Beautiful numbers一样的,一个数能被它的所有非零数位整除,则能被它们的最 ...
(step 8.2.13)hdu 1524(A Chess Game)
题目大意 : 在一个有向无环图顶点上面有几个棋子, 2个人轮流操作, 每次操作就是找一个棋子往它能够移动的地方移动一格, 不能操作的人输. 输入第一行为一个 N , 表示有 N 个顶点 0 -& ...

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

重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider的更多相关文章

随机推荐

热门专题