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

2023年12月17日 182次阅读

如何在样式中获取滑块的拇指位置？我想在拇指的位置显示实际值.通过相应地更改下一个文本块的宽度,可以实现这一点.但是如何获得拇指的位置？

<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来获取拇指的位置.我只需要一个转换器,因为有一些偏移,但它的工作没有任何代码.

码：

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

预习：

点赞