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

随机推荐

为什么EXE文件出现了不该出现的“盾牌”
下载了一个小程序,它的功能并不需要管理员权限.但是在Win7下面它的图标上出现了一个“小盾牌”,这意味着运行它需要提升权限……果然,双击时弹出了UAC对话框.用二进制编辑器打开这个EXE,发现它没有内 ...
Delphi中WebBrowser自动填表模板
unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...
Oracle 验证IOT表数据存储在主键里
iot表测试: 在create table语句后面使用organization index,就指定数据表创建结构是IOT.但是在不指定主键Primary Key的情况下,是不允许建表的. create ...
c# listview导出excel文件
首先在工程中需要添加对Microsoft Excel office 11.0 object的引用生成excel的类代码如下 using System; using System.Collection ...
怎样在Android实现桌面清理内存简单Widget小控件
怎样在Android实现桌面清理内存简单Widget小控件我们常常会看到类似于360.金山手机卫士一类的软件会带一个widget小控件,显示在桌面上,上面会显示现有内存大小,然后会带一个按键功能来一 ...
PYQT4 + Python2.6 + eric4-4.2.2a的安装全过程
PYQT4 + Python2.6 + eric4-4.2.2a的安装全过程 - beike - ITeye技术网站 PYQT4 + Python2.6 + eric4-4.2.2a的安装全过程博客 ...
java--ThreadPool线程池简单用法
package com.threadPool; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent. ...
小侃#pragma
#pragma是一个编译器指令. ================================================================ #pragma comment(li ...
Servlet：通过初始参数实现权限访问某个文件、页面
目录结构 src 目录下com.xieyuan包MyServlet.java文件(Servlet文件) package com.xieyuan; import java.awt.Color; impo ...
mysql登录报错 ERROR 1045 (28000)
1.现象: [root@localhost ~]# mysql -u root -p Enter password: ERROR 1045 (28000): Access denied for us ...

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

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

随机推荐

热门专题