Get thumb pointer from XAML / Slider template

How to get slider position in style? I want to show the actual value in the position of the thumb. This would be possible by changing the width of the next text block according 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>

Here's the full style:

<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>
+4
source share
1 answer

I have found a solution now. I use ActualWidth Reducing RepeatButton to get thumb position. I only need a converter because of some bias, but it works without code.

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

+2
source

All Articles