WPF Slider滑動條的顏色修改方法

2019-10-29 21:01:23

字體：大中小

來源：轉載

供稿：網友

效果如下：

WPF,Slider,滑動條

鄙人雖然開發WPF有些時間，但之前一直是一些簡單Template和Style改改之類的工作，并沒有深入研究過。此次為了完成工作，首先也是網上搜了半天，沒有找到合適的代碼直接拷貝（搜索能力待提高），干脆就直接靜下心來琢磨琢磨。

一開始在界面上就放了Slider，撓撓頭，怎么修改Template才能達到效果呢？后來想到了Blend，之前一直聽說很強大的界面設計工具，但是一直沒有用過，就趁此機會就簡單運用了一下。Blend中很牛逼的就是編輯模板，通過創建模板副本，可以看到Slider結構

WPF,Slider,滑動條

結合代碼發現，Thumb左右兩邊的ReapeatButton的寬度會隨著Thumb的位置會變化。那問題就變得簡單很多，修改左RepeatButton的Template就可以達到目的，核心代碼如下。

    <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}">      <Setter Property="Template">        <Setter.Value>          <ControlTemplate TargetType="{x:Type RepeatButton}">            <Border Background="{TemplateBinding Background}"                 Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">              <!--軌跡，設置Background-->              <Border Margin="0,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}"                   VerticalAlignment="center" Height="4.0" />            </Border>          </ControlTemplate>        </Setter.Value>      </Setter>    </Style>

完整代碼(只是考慮水平的Slider)：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  <SolidColorBrush x:Key="SliderThumb.Static.Foreground" Color="#FFE5E5E5"/>  <SolidColorBrush x:Key="SliderThumb.MouseOver.Background" Color="Gray"/>  <SolidColorBrush x:Key="SliderThumb.MouseOver.Border" Color="#FF7Eb4EA"/>  <SolidColorBrush x:Key="SliderThumb.Pressed.Background" Color="Gray"/>  <SolidColorBrush x:Key="SliderThumb.Pressed.Border" Color="Gray"/>  <SolidColorBrush x:Key="SliderThumb.Disabled.Background" Color="#FFF0F0F0"/>  <SolidColorBrush x:Key="SliderThumb.Disabled.Border" Color="#FFD9D9D9"/>  <SolidColorBrush x:Key="SliderThumb.Static.Background" Color="#989898"/>  <ControlTemplate x:Key="SliderThumbHorizontalTop" TargetType="{x:Type Thumb}">    <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">      <Path x:Name="grip" Data="M 0,6 C0,6 5.5,0 5.5,0 5.5,0 11,6 11,6 11,6 11,18 11,18 11,18 0,18 0,18 0,18 0,6 0,6 z"          Fill="{StaticResource SliderThumb.Static.Background}"          Stretch="Fill" SnapsToDevicePixels="True"          Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>    </Grid>    <ControlTemplate.Triggers>      <Trigger Property="IsMouseOver" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>      </Trigger>      <Trigger Property="IsDragging" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>      </Trigger>      <Trigger Property="IsEnabled" Value="false">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>      </Trigger>    </ControlTemplate.Triggers>  </ControlTemplate>  <ControlTemplate x:Key="SliderThumbHorizontalBottom" TargetType="{x:Type Thumb}">    <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">      <Path x:Name="grip" Data="M 0,12 C0,12 5.5,18 5.5,18 5.5,18 11,12 11,12 11,12 11,0 11,0 11,0 0,0 0,0 0,0 0,12 0,12 z"          Fill="{StaticResource SliderThumb.Static.Background}"         Stretch="Fill"          SnapsToDevicePixels="True"          Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>    </Grid>    <ControlTemplate.Triggers>      <Trigger Property="IsMouseOver" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/>      </Trigger>      <Trigger Property="IsDragging" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>      </Trigger>      <Trigger Property="IsEnabled" Value="false">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>      </Trigger>    </ControlTemplate.Triggers>  </ControlTemplate>  <SolidColorBrush x:Key="SliderThumb.Track.Background" Color="#b6b6b6"/>  <SolidColorBrush x:Key="SliderThumb.Track.DecreaseBackground" Color="#45db5e"/>  <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">    <Setter Property="OverridesDefaultStyle" Value="true"/>    <Setter Property="Background" Value="Transparent"/>    <Setter Property="Focusable" Value="false"/>    <Setter Property="IsTabStop" Value="false"/>  </Style>  <Style x:Key="DecreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">    <Setter Property="Template">      <Setter.Value>        <ControlTemplate TargetType="{x:Type RepeatButton}">          <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">            <Border Margin="1,0,-1,0" Background="{StaticResource SliderThumb.Track.DecreaseBackground}"                 VerticalAlignment="center" Height="4.0" />          </Border>        </ControlTemplate>      </Setter.Value>    </Setter>  </Style>  <Style x:Key="IncreaseBtn" TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource RepeatButtonTransparent}">    <Setter Property="Template">      <Setter.Value>        <ControlTemplate TargetType="{x:Type RepeatButton}">          <Border Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>        </ControlTemplate>      </Setter.Value>    </Setter>  </Style>  <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">    <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">      <Path x:Name="grip" Data="M0 512C0 229.230208 229.805588 0 512 0 794.769792 0 1024 229.805588 1024 512 1024 794.769792 794.194412 1024 512 1024 229.230208 1024 0 794.194412 0 512Z"            StrokeThickness="1" Fill="{StaticResource SliderThumb.Static.Background}" Stroke="{Binding Path=Fill, RelativeSource={x:Static RelativeSource.Self}}"           Width="18" Height="{Binding Path=Width, RelativeSource={x:Static RelativeSource.Self}}"           Stretch="Fill" SnapsToDevicePixels="True" UseLayoutRounding="True" VerticalAlignment="Center"/>    </Grid>    <ControlTemplate.Triggers>      <Trigger Property="IsMouseOver" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/>      </Trigger>      <Trigger Property="IsDragging" Value="true">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/>      </Trigger>      <Trigger Property="IsEnabled" Value="false">        <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/>        <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/>      </Trigger>    </ControlTemplate.Triggers>  </ControlTemplate>  <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"           BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">      <Grid>        <Grid.RowDefinitions>          <RowDefinition Height="15"/>          <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>          <RowDefinition Height="15"/>        </Grid.RowDefinitions>        <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0"                Visibility="Collapsed"/>        <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2"                Visibility="Collapsed"/>        <Border x:Name="TrackBackground" BorderBrush="{StaticResource SliderThumb.Track.Background}"             BorderThickness="1" Background="{Binding Path=BorderBrush, RelativeSource={x:Static RelativeSource.Self}}"             Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">          <Canvas HorizontalAlignment="Stretch" Margin="0,-1">            <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"                  Height="{Binding Path=Height, ElementName=TrackBackground}" Visibility="Hidden"/>          </Canvas>        </Border>        <Track x:Name="PART_Track" Grid.Row="1">          <Track.DecreaseRepeatButton>            <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource DecreaseBtn}"/>          </Track.DecreaseRepeatButton>          <Track.IncreaseRepeatButton>            <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource IncreaseBtn}"/>          </Track.IncreaseRepeatButton>          <Track.Thumb>            <Thumb x:Name="Thumb" Focusable="False" Height="20" OverridesDefaultStyle="True"                 Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center"                 Width="{Binding Path=Height, RelativeSource={x:Static RelativeSource.Self}}"/>          </Track.Thumb>        </Track>      </Grid>    </Border>    <ControlTemplate.Triggers>      <Trigger Property="TickPlacement" Value="TopLeft">        <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>        <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/>        <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/>      </Trigger>      <Trigger Property="TickPlacement" Value="BottomRight">        <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>        <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/>        <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/>      </Trigger>      <Trigger Property="TickPlacement" Value="Both">        <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>        <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>      </Trigger>      <Trigger Property="IsSelectionRangeEnabled" Value="true">        <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>      </Trigger>    </ControlTemplate.Triggers>  </ControlTemplate>  <Style x:Key="SliderStyle" TargetType="{x:Type Slider}">    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>    <Setter Property="Background" Value="Transparent"/>    <Setter Property="BorderBrush" Value="Transparent"/>    <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>  </Style></ResourceDictionary>

其實最重要的還是控件的結構，只要對此很熟悉，做出理想的控件應該不難。

總結

以上所述是小編給大家介紹的WPF Slider滑動條的顏色修改方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！

注：相關教程知識閱讀請移步到c#教程頻道。

上一篇：C#實現文章添加內鏈的方法

下一篇：.NET Core開發之配置詳解