從XAML /滑塊模板中獲取滑塊的大拇指位置

如何獲取滑塊在樣式中的拇指位置？我想在拇指位置顯示實際值。這可以通過將以下文本塊的寬度相應地更改爲該值來實現。但如何獲得拇指的位置？從XAML /滑塊模板中獲取滑塊的大拇指位置

<TextBlock Grid.Column="0" Width="THUMB POSITION" HorizontalAlignment="Right" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>

完整的樣式如下所示：

<Style x:Key="MyCustomStyleForSlider" TargetType="{x:Type Slider}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/> 
         <ColumnDefinition Width="Auto"/> 
        </Grid.ColumnDefinitions> 
        <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock> 
        <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Minimum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock> 
        <TextBlock Grid.Column="2" Grid.Row="1" Text="{Binding Path=Maximum, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock> 
        <TickBar Grid.Column="1" x:Name="TopTick" Visibility="Visible" Fill="LightGray" Placement="Top" Height="6" Grid.Row="1"/> 
        <TickBar Grid.Column="1" x:Name="BottomTick" Visibility="Collapsed" Fill="Green" Placement="Bottom" Height="4" Grid.Row="0"/> 
         <Border x:Name="TrackBackground" BorderThickness="1" CornerRadius="1" Margin="5,0" VerticalAlignment="Center" Height="4.0" Grid.Row="1" > 
          <Canvas Margin="-6,-1"> 
           <Rectangle Visibility="Visible" x:Name="PART_SelectionRange" Height="4.0" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Stroke="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" StrokeThickness="1.0"/> 
          </Canvas> 
         </Border> 

         <Track x:Name="PART_Track" Grid.Row="1" Grid.Column="1"> 
          <Track.DecreaseRepeatButton> 
          <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" BorderBrush="Transparent" Background="Transparent" Foreground="Transparent" Command="{x:Static Slider.DecreaseLarge}"/> 
          </Track.DecreaseRepeatButton> 
          <Track.IncreaseRepeatButton> 
          <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" Background="Transparent" Foreground="Transparent" BorderBrush="Transparent" Command="{x:Static Slider.IncreaseLarge}"/> 
          </Track.IncreaseRepeatButton> 
          <Track.Thumb> 
           <!--<Thumb x:Name="Thumb" Background="Black"/>--> 
          <Thumb x:Name="Thumb" Style="{StaticResource CustomThumbForSlider}" Background="Black"/> 
          </Track.Thumb> 

        </Track> 
        </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2013-10-31 user2799180

我找到了解決辦法了。我使用RepeatButton減少的ActualWidth來獲得拇指的位置。我只需要一個轉換器，因爲它有一些偏移量，但它的工作原理沒有任何代碼。

代碼：

<TextBlock Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="#3B3833" 
HorizontalAlignment="Left" Width="{Binding Path=ActualWidth, ElementName=leftToggle, 
Converter={StaticResource SliderConverter}, ConverterParameter=140}" Text="{Binding 
Path=Value, RelativeSource={RelativeSource TemplatedParent}}"></TextBlock>

前瞻：

Example for custom slider

來源

2013-11-01 07:41:05 user2799180

從XAML /滑塊模板中獲取滑塊的大拇指位置

回答

相關問題