从XAML /滑块模板获取滑块的拇指位置

时间:2013-10-31 18:21:05

标签: c# xaml slider

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

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

1 个答案:

答案 0 :(得分:2)

我现在找到了解决方案。我使用减少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