Sliverlight的Slider样式--记录

最新推荐文章于 2020-12-28 20:47:12 发布
最新推荐文章于 2020-12-28 20:47:12 发布
阅读量495 收藏
点赞数
分类专栏： Silverlight & WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiustion/article/details/52658892
版权

方便日后项目中提取样式代码，记录在此博客中


样式代码如下：

<!-- Slider 样式 -->
<Style x:Key="SliderHorizontalThumb" TargetType="Thumb">
 <Setter Property="Background" Value="#FFFFFFFF"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="BorderBrush" Value="#41a3ef" />
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Thumb">
    <Grid>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver">
        <Storyboard>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
         <ColorAnimation Duration="0" To="#FFd4eff6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Pressed">
        <Storyboard>
         <ColorAnimation Duration="0" To="#FFd4eff6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Disabled">
        <Storyboard>
         <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="FocusStates">
       <VisualState x:Name="Focused">
        <Storyboard>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Unfocused"/>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1">
      <Grid Background="{TemplateBinding Background}" Margin="1">
       <Border x:Name="BackgroundAnimation" Background="#FFFFFF" Opacity="0"/>
       <Rectangle x:Name="BackgroundGradient" Fill="Transparent" />
      </Grid>
     </Border>
     <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="2" RadiusX="2"/>
     <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

<Style x:Key="SliderVerticalThumb" TargetType="Thumb">
 <Setter Property="Background" Value="#FFFFFF"/>
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="BorderBrush" Value="#41a3ef" />
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Thumb">
    <Grid>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver">
        <Storyboard>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
         <ColorAnimation Duration="0" To="#FFd4eff6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Pressed">
        <Storyboard>
         <ColorAnimation Duration="0" To="#FFd4eff6" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Disabled">
        <Storyboard>
         <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="FocusStates">
       <VisualState x:Name="Focused">
        <Storyboard>
         <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
        </Storyboard>
       </VisualState>
       <VisualState x:Name="Unfocused"/>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="2">
      <Grid Background="{TemplateBinding Background}" Margin="1">
       <Border x:Name="BackgroundAnimation" Background="#FFFFFF" Opacity="0"/>
       <Rectangle x:Name="BackgroundGradient" Fill="Transparent" />
      </Grid>
     </Border>
     <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="2" RadiusX="2"/>
     <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>  


<Style TargetType="Slider">
 <Setter Property="BorderThickness" Value="1"/>
 <Setter Property="Maximum" Value="10"/>
 <Setter Property="Minimum" Value="0"/>
 <Setter Property="Value" Value="0"/>
 <Setter Property="BorderBrush" Value="#41a3ef" />
 <Setter Property="IsTabStop" Value="False"/>
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Slider">
    <Grid x:Name="Root">
     <Grid.Resources>
      <ControlTemplate x:Key="RepeatButtonTemplate">
       <Grid x:Name="Root" Background="Transparent" Opacity="0"/>
      </ControlTemplate>
     </Grid.Resources>
     <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver"/>
       <VisualState x:Name="Disabled">
        <Storyboard>
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay">
          <DiscreteObjectKeyFrame KeyTime="0">
           <DiscreteObjectKeyFrame.Value>
            <Visibility>Visible</Visibility>
           </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>
         </ObjectAnimationUsingKeyFrames>
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ThumbDisabledOverlay">
          <DiscreteObjectKeyFrame KeyTime="0">
           <DiscreteObjectKeyFrame.Value>
            <Visibility>Visible</Visibility>
           </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>
         </ObjectAnimationUsingKeyFrames>
         <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay">
          <DiscreteObjectKeyFrame KeyTime="0">
           <DiscreteObjectKeyFrame.Value>
            <Visibility>Visible</Visibility>
           </DiscreteObjectKeyFrame.Value>
          </DiscreteObjectKeyFrame>
         </ObjectAnimationUsingKeyFrames>
        </Storyboard>
       </VisualState>
      </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
     <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="Auto"/>
       <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
      <Rectangle x:Name="TrackRectangle" Grid.ColumnSpan="3" Grid.Column="0" Fill="#FFFFFF" Height="4" Margin="5,0,5,0" RadiusY="1" RadiusX="1" Stroke="#41a3ef" StrokeThickness="{TemplateBinding BorderThickness}"/>
      <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Grid.ColumnSpan="3" Grid.Column="0" Fill="White" Height="3" Margin="5,0,5,0" Opacity=".55" RadiusY="1" RadiusX="1" Visibility="Collapsed"/>
      <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
      <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="18" IsTabStop="True" Width="11" Style="{StaticResource SliderHorizontalThumb}"/>
      <Rectangle x:Name="ThumbDisabledOverlay" Grid.Column="1" Fill="White" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="11"/>
      <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Height="18" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
     </Grid>
     <Grid x:Name="VerticalTemplate" Background="{TemplateBinding Background}" Visibility="Collapsed">
      <Grid.RowDefinitions>
       <RowDefinition Height="*"/>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <Rectangle Fill="#FFFFFF" Margin="0,5,0,5" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Stroke="#41a3ef" StrokeThickness="{TemplateBinding BorderThickness}" Width="4"/>
      <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Fill="White" Margin="0,5,0,5" Opacity=".55" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Visibility="Collapsed" Width="3"/>
      <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource RepeatButtonTemplate}" Width="18"/>
      <Thumb x:Name="VerticalThumb" Height="11" IsTabStop="True" Grid.Row="1" Width="18" Style="{StaticResource SliderVerticalThumb}" />
      <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource RepeatButtonTemplate}" Width="18"/>
     </Grid>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>


Qiustion
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Sliverlight动画-太阳升起落下
07-27
这是一个SL做的太阳从海面升起落下的动画，开发环境VS2010+SL5，如果是SL4的环境的话，可以把代码拷过去。
JQuery.lightSlider轻量级幻灯片效果
ICode联盟
11-14 149
下载地址 使用方法引用相关文件 HTML First Slide Lorem ipsum Cupidatat quis pariatur anim. Second Slide Lorem ipsum Excepteur amet adipisicing fugiat velit nisi. ... js调用$(document).ready(function() { $("#lightSlider").lightSlider(); });相关设置 公共方法 dd
react 引入轮播插件_react轮播图组件react-slider-light详解
weixin_42317115的博客
12-28 1437
本文主要和大家分享react轮播图组件react-slider-light详解，希望能帮助到大家。react-slider-lighta lightweight Slider component built with react.一个轻量级的 react 轮播组件Table of ContentsFeatures特性Demos演示Getting Started快速开始InstallUseDevel...
精通Silverlight——12.4.6 Slider拖动条控件
Silverlight
04-24 4104
Silder控件的外观与GridThumb控件类似。实际上，Silder就是由一个可拖动的Thumb控件和一个矩形条组成的。Silder控件的声明方式如下所示。  运行效果如图所示。尽管程序可以正常运行，但是Thumb是不可以拖动的，还需要设置Silder的Range属性指定拖动范围。默认情况下，Silder控件水平显示，可以通过设置Silder的几个属性来设置垂直
react轮播图组件react-slider-light
weixin_34342207的博客
02-22 1075
首先说一下，如果大家喜欢可直接收藏我这个项目的github地址。https://github.com/951565664/... 因为有可能github上版本更新了，但是这边就不更新了。如果有什么问题，可以随时问，建议不要QQ或者私信，直接上github提issues，能把问题记录下来，方便其他人查找。 react-slider-li...
AphalinaBoard - Sliverlight forum
04-11
first sliverlight forum ever in the world
SliverLight TreeView 虚线样式
11-24
SliverLight TreeView 虚线样式
mac sliverlight
06-10
mac sliverlight
sliverlight项目
11-12
sliverlight资源 项目类型
WPF Expander更改样式
热门推荐
Qiustion的专栏
04-23 1万+
WPF 控件Expander其实是
WPF后台代码中应用样式资源
Qiustion的专栏
05-05 7531
初学WPF，关于如何在后台中寻找
WPF第三方控件DXperience的dxn:NavBarControl添加样式
Qiustion的专栏
04-15 4202
把第三方控件DXNavBar修改成这效果
修改TabControl的样式(SilverLight)
Qiustion的专栏
06-05 2988
主程序文件： <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sdk="http://schemas.microsoft.com/winfx/200
WPF 控件如何绑定资源中的数据
Qiustion的专栏
05-05 2104
关于如何在xaml中的控件
WPF ScrollViewer一些记录
Qiustion的专栏
04-25 1428
WPF的
VS2010事件命令行，行里含中文时，生成出错
Qiustion的专栏
04-23 1372
在搭建Silverlight项目时，其中需要用到构建事件，事件命令行写法如下： 执行的结果却是提示“错误”。 开始还以为是VS版本问题，重装了后，仍然没能解决，后来想起做Python时，也出现过在Cmd窗口下输入命令无法执行，可能跟Cmd窗口的配置有关，尝试把cmd还原为Windows默认值。删除注册表里的： HKEY_CURRENT_USER\Console\%SystemRoot%
改变HyperlinkButton的下划线(Silverlight)
Qiustion的专栏
09-17 1252
HyperlinkButton默认下划线效果如左图所示，跟字非常吻合，不清晰，于是修改HyperlinkButton的样式调整下划线的位置 微软的原样式只是增加TextBlock，利用TextBlock的TextDecorations="Underline"来显示下划线，这效果显示得字重叠，下划线不清晰。 以下是微软生成的部分代码： ... ...
利用Path路径设计的按钮图标(Silverlight)
Qiustion的专栏
09-14 1238
实现简单的按钮图标，鼠标移上时显示框，本样式只专注于图案，文字要另外调整ContentPresenter的位置 <ColorAnimation Duration="0:0:0.5" To="#FF5FADD
html中用sliverlight，sliverlight能把xaml嵌入进去吗？
最新发布
06-14
是的，Silverlight 可以将 XAML ...在 Silverlight 中，可以使用 XAML 声明用户界面，并使用 C# 或其他 .NET 语言编写代码逻辑。...这样，用户就可以在浏览器中运行 Silverlight 应用程序，并与 XAML 用户界面进行交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值