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

最新推荐文章于 2024-11-13 12:02:52 发布
最新推荐文章于 2024-11-13 12:02:52 发布
阅读量72 收藏
点赞数
文章标签： ui
原文链接：http://www.cnblogs.com/lonelyxmas/p/3587942.html
版权
重新想象 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 - 进度圈控件


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



OK
[源码下载]

posted on 2014-03-08 15:08 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/3587942.html

Flex之组建样式CSS（3全部可用4可用一部分）1
JavaMan
01-19 2319
flex 组件样式（1）themeColor主题颜色：如果对色彩样式配置不想过多的去设置的话，themeColor是一个选择。它可以让你选择一种基本色彩，然后组件的边框，外观等色彩将会以此色彩为基础构成一组缺省的样式，组件均可使用此样式属性。Application组件样式属性backgroundImage背景图使用Embed(source="");来应用backgroundColor背景色backgroundGradientColors 背景渐进色这个属性要设置2个色彩，渐进起始色和渐进结束色，中间以逗号分
重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试...
weixin_30326745的博客
03-08 71
重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试[源码下载] 重新想象 Windows 8 Store Ap...
重新想象 Windows 8 Store Apps (16)
萌萌的It人 www.itmmd.com
04-04 770
[源码下载] 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 作者：webabcd介绍重新想象 Windows 8 Store Apps 之 控件基础 DependencyProperty - 依赖属性 AttachedProperty - 附加属性 控件的继承关系 路由事件和
安卓控件集合
wy504903657的博客
05-23 6122
第一部分 个性化控件View 一ListView 二ActionBar 三Menu 四ViewPager Gallery 五GridView 六ImageView 七ProgressBar 八TextView 九ScrollView 十TimeView 十一TipView 十二FlipView 十三ColorPickView 十四GraphView 十五UI Style 十六其他 第二部分 工具库
Android高手速成1--第一部分 个性化控件(View) - Aways.Online
qq906786621的专栏
08-19 697
Android高手速成1--第一部分 个性化控件(View) - Aways.Online 时间 2014-06-19 15:09:47  博客园精华区 原文  http://www.cnblogs.com/huwei0814/p/3796659.html 主题 安卓开发 第一部分 个性化控件(View) 主要介绍那些不错个性化的View，包括ListView
Android-UI 开源控件
ccp1994的专栏
03-05 3249
第一部分 个性化控件(View) 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。 、其他 一、
https://github.com/Trinea/android-open-project
qq_24129545的博客
07-27 3325
https://github.com/Trinea/android-open-project 标签： android开源 转自：https://github.com/Trinea/android-open-project   转载日期：2016年7月27日 Android开源项目分类汇总 目前包括： Android开源项目第一篇——个性
android 各类开源项目整理 包括 个性化控件 工具库 完整优秀项目
qq_36355271的博客
04-17 2618
注 内容来自github 社区 目前包括： Android 开源项目第一篇——个性化控件(View)篇包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipVi...
Android开源经典项目
Tamic （大白）
09-13 5787
Android开源项目大全，包括经典个人博客，组织和开源项目
Android UI个性style开源组件
陈万洲的专栏
02-10 3556
一、ListView 1. android-pulltorefresh 一个强大的拉动刷新开源项目，支持各种控件下拉刷新，ListView、ViewPager、WevView、ExpandableListView、GridView、ScrollView、Horizontal ScrollView、Fragment上下左右拉动刷新，比下面johannilsson那个只支持ListView的强大...
Android资源代码 源码 整理 Github开源项目下载地址
wengsheng147的专栏
03-26 5715
第一部分 个性化控件(View) 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。 一、L
Windows自动化框架实现(0) - 知识准备
heyingxin006的博客
03-16 1547
（一）Windows GUI自动化测试常用工具 Tool Comment 主要封装框架 AutoIT Win32应用 Windows API Pywinauto 一个python库，PC端自动化工具 Windows API, UI Automation UI Automation ...
整理的Android资源代码 源码 整理 Github开源项目下载地址
源码分享的博客
11-02 9264
主要介绍那些不错个性化的View，捡代码论坛整理提供。包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。手机游戏源码,网站源码,棋牌游戏源码,IT视频教程,应用程序源码。整理的Android资源代码 源码 整理 Github开源项目下载地址
Vue Element-UI 选择隐藏表格中的局部字段信息
制定持续可量化的目标，不断坚持。
11-08 511
Vue Element-UI 选择隐藏表格中的局部字段信息
【鸿蒙开发】第四章 ArkTS语言UI范式-基础语法
wsy18201533604的博客
11-11 619
ArkTS定义了声明式UI描述自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法属性方法等共同构成了UI开发的主体。ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。ArkTS提供了渲染控制的能力。
ArkTS--应用状态
qq_63946637的博客
11-10 614
本文旨在帮助大家学习鸿蒙中的LocalStorage和AppStorage
Java基础-组件及事件处理（上）
最新发布
来自想要赚大钱的小周同学
11-13 1502
学习目标：了解java Swing及Swing的两个顶级容器JFrame和JDlalog
Python & PyQt5 实现 .his 文件批量转 Excel 工具
qq_36224726的博客
11-12 467
本文提供了一个完整的.his文件批量转换为 Excel 工具，并通过动态美化、进度显示、多线程等技术提升了用户体验。希望该工具能为您的数据处理工作提供便利。
C#窗体控件详解：状态栏与常用控件
此外，还提到了控件的分类，用户界面控件和非用户界面控件的差异，以及如何设置控件的快捷访问键和使用容器控件来组织其他控件。" 状态栏控件在C#中通常由StatusStrip类实现，它在Visual Studio 2003中称为Status...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值