Get thumb position of slider from XAML / Slider Template

问题

How to get the slider's thumb position within the Style? I want to show the actual value at the position of the thumb. This would be possible by changing the width of the following textblock accordingly to the value. But how to get the position of the thumb?

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

The full style is shown here:

<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>

回答1:

I found the solution now. I use the ActualWidth of the decrease RepeatButton to get the position of the thumb. I only need a converter because of some offset but it works without any code behind.

Code:

<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>

Preview:

Example for custom slider

来源：https://stackoverflow.com/questions/19713905/get-thumb-position-of-slider-from-xaml-slider-template

标签

xaml

slider