在拇指前/後使用不同顏色的控制模板滑塊

Question

我想創建一個自定義滑塊，在拇指前後有不同的顏色 - 我已設法實現該功能。問題是，它是這樣的：click。

我想達到的目的是讓灰色邊框隱藏在拇指下方 - 在中間。但是，當我嘗試在DecreaseSliderButtonStyle邊框中設置負邊距時，它會重疊拇指。

有一個代碼：http://pastebin.com/5pcqHmDX（我覺得XAML格式看起來更好的引擎收錄）

在此先感謝。

Answer 1

請嘗試以下方式：

<Style x:Key="DecreaseSliderButtonStyle" TargetType="{x:Type RepeatButton}"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="IsTabStop" Value="false"/> 
    <Setter Property="Focusable" Value="false"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type RepeatButton}"> 
       <Border Height="18" Background="DimGray" CornerRadius="0,6,6,0" Margin="0,0,0,0" /> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 




<Style x:Key="SliderThumbStyle" TargetType="Thumb"> 
    <Setter Property="SnapsToDevicePixels" Value="true"/> 
    <Setter Property="OverridesDefaultStyle" Value="false"/> 
    <Setter Property="Height" Value="18"/> 
    <Setter Property="Width" Value="18"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Thumb"> 
       <Grid> 
        <Border CornerRadius="9,0,0,9" 
          Background="DimGray"/> 
        <Ellipse Stroke="Black" 
          StrokeThickness="1" 
          Name="Ellipse" 
          Fill="Orange"></Ellipse> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

如果你看到拇指和灰色區域之間的接縫線，此setter增加滑塊的風格：

<Setter Property="UseLayoutRounding" Value="True"/> 

您可能需要處理當數值非常接近Maximum時，拇指邊框的圓角半徑將其舍入。