音量滑塊CustomControl

Question

我搜索了最後幾個小時的customcontrol看起來像這樣：http://i1-scripts.softpedia-static.com/screenshots/Volume-Slider-10188.png

這是一個簡單的滑塊，但這種規模不斷壯大右側是我的問題。

我不知道該怎麼做。

有沒有人有想法？

問候

Answer 1

可以定義爲三角形狀的幾何形狀和使用，作爲Track的OpacityMask。 Track在左邊有一個重複按鈕來減少值，在右邊有一個重複按鈕來增加它。您只需要將左側按鈕的背景與拇指背景一起綁定到滑塊背景。您還應該使拇指和中繼器的模板非常簡單，只顯示背景顏色。

下面是一個例子樣式：

<Style TargetType="{x:Type Slider}"> 
    <Setter Property="Background" Value="Gray"/> 
    <Setter Property="Height" Value="20"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
       <ControlTemplate.Resources> 
        <Style TargetType="{x:Type RepeatButton}"> 
         <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 Background="{TemplateBinding Background}"/> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
        <PathGeometry x:Key="Triangle"> 
         <PathFigure StartPoint="0,1"> 
          <LineSegment Point="1,1"/> 
          <LineSegment Point="1,0"/> 
          <LineSegment Point="0,1"/> 
         </PathFigure> 
        </PathGeometry> 
       </ControlTemplate.Resources> 
       <Grid> 
        <Grid> 
         <Grid.OpacityMask> 
          <DrawingBrush> 
           <DrawingBrush.Drawing> 
            <GeometryDrawing Brush="Black" Geometry="{StaticResource Triangle}"/> 
           </DrawingBrush.Drawing> 
          </DrawingBrush> 
         </Grid.OpacityMask> 
         <Track Name="PART_Track" Value="{TemplateBinding Value}"> 
          <Track.Thumb> 
           <Thumb Width="10" Background="{TemplateBinding Background}"> 
            <Thumb.Template> 
             <ControlTemplate TargetType="{x:Type Thumb}"> 
              <Border Background="{TemplateBinding Background}"/> 
             </ControlTemplate> 
            </Thumb.Template> 
           </Thumb> 
          </Track.Thumb> 
          <Track.DecreaseRepeatButton> 
           <RepeatButton Background="{TemplateBinding Background}" Command="Slider.DecreaseLarge"/> 
          </Track.DecreaseRepeatButton> 
          <Track.IncreaseRepeatButton> 
           <RepeatButton Background="Transparent" Command="Slider.IncreaseLarge"/> 
          </Track.IncreaseRepeatButton> 
         </Track> 
        </Grid> 
        <Path 
         Data="{StaticResource Triangle}" 
         Stretch="Fill" 
         Stroke="Black" 
         StrokeThickness="1"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

（這只是其中忽略了很多東西例如像所述Orientation一個例子）