WinRT的cumstom滑塊風格

Question

我想爲我的Win 8.1應用程序設計一個滑塊。爲此，我用TargetType「Slider」創建了一個新的樣式。

<Style x:Key="SliderThumbStyle" TargetType="Thumb"> 
    <Setter Property="Background" Value="{StaticResource ThumbBackgroundThemeBrush}" /> 
    <Setter Property="BorderThickness" Value="1" /> 
    <Setter Property="IsTabStop" Value="False" /> 
    <Setter Property="BorderBrush" Value="{StaticResource ThumbBorderThemeBrush}" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Thumb"> 
       <Grid> 
        <Border BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Background="{TemplateBinding Background}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style TargetType="Slider"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Slider"> 
       <Grid> 
        <Border Height="45" 
          VerticalAlignment="Stretch" 
          Background="Transparent" /> 
        <Grid x:Name="MainDisplay" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="13" /> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="13" /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <Ellipse Grid.Row="0" Grid.Column="0" Height="13" Width="13" Stroke="#7B838A" StrokeThickness="3"/> 
         <Rectangle Grid.Row="0" 
            Grid.Column="1" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Center" 
            Stretch="Fill" 
            Fill="#7B838A" 
            Height="3"/> 
         <Ellipse Grid.Row="0" Grid.Column="2" Height="13" Width="13" Stroke="#7B838A" StrokeThickness="3"/> 
        </Grid> 
        <Canvas> 
         <Thumb x:Name="PART_Thumb" 
           Background="#D7DEE5" 
           Style="{StaticResource SliderThumbStyle}" 
           Width="160" 
           Height="45" 
           Opacity="0.5" 
           Canvas.ZIndex="-1" 
           VerticalAlignment="Center"/> 
        </Canvas> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

在我的網頁我使用滑塊是這樣的：

<Slider VerticalAlignment="Bottom" /> 

到目前爲止好滑塊看起來像我想要的。 但滑塊被凍結，「拇指」停留在左側，我無法移動它。 這是爲什麼發生？我需要改變，我可以移動滑塊？

非常感謝

Answer 1

這是因爲滑塊預計某些元素存在，因此代碼可以參考它們。在你的內部網格中，需要兩個Rectangle元素和一個Thumb作爲最小值。這使代碼可以通過重新調整矩形來移動Thumb。元素名稱必須特定於此才能工作。

如果您查看generic.xaml並搜索TargetType =「Slider」，則可以檢查默認樣式並查找確切的名稱。

我修改了你的Style，現在可以移動Thumb了。我不確定它在外觀上是否仍然符合您的要求，但您應該可以從這裏進行修改。

<Style TargetType="Slider"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Slider"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 

         <Ellipse Grid.Column="0" Height="13" Width="13" Stroke="#7B838A" StrokeThickness="3" /> 

         <Grid Name="HorizontalTemplate" Grid.Column="1"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition Width="*" /> 
          </Grid.ColumnDefinitions> 

          <Rectangle Name="HorizontalTrackRect" 
             Grid.Column="0" 
             Grid.ColumnSpan="3" 
             HorizontalAlignment="Stretch" 
             VerticalAlignment="Center" 
             Stretch="Fill" 
             Fill="#7B838A" 
             Height="3" /> 

          <Thumb Name="HorizontalThumb" 
            Grid.Column="1" 
            Background="#D7DEE5" 
            Style="{StaticResource SliderThumbStyle}" 
            Width="160" 
            Height="45" 
            Opacity="0.5" /> 

          <Rectangle Name="HorizontalDecreaseRect" 
             Grid.Column="0" 
             Fill="Red" 
             Height="3" /> 

         </Grid> 
         <Ellipse Grid.Column="2" Height="13" Width="13" Stroke="#7B838A" StrokeThickness="3" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>