从 XAML/Slider Template 获取滑块的拇指位置

Get thumb position of slider from XAML / Slider Template(从 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>

此处显示完整样式:

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

推荐答案

我现在找到了解决方案.我使用减少RepeatButton 的ActualWidth 来获取拇指的位置.由于一些偏移，我只需要一个转换器，但它可以在没有任何代码的情况下工作.

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.

代码:

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

预览:

这篇关于从 XAML/Slider Template 获取滑块的拇指位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！