Создание всплывающего индикатора положения на элементе управления WPF Slider

Question

Я стилизую все элементы управления ползунка WPF в своем приложении и хочу, чтобы все они вели себя так, чтобы при перетаскивании пользователем большого пальца над большим пальцем появлялось всплывающее окно (и следовало за ним при перетаскивании большого пальца), и во всплывающем окне отображается текущее обновление нового значения ползунка.

Как я могу сделать все это в Xaml без C #?

Спасибо

Answer 1

Вы можете настроить большой палец для отображения всплывающего окна, когда его перетаскивают, это для начала, оно не закончено, так как горизонтальный_смещение не привязано ( пример, как это сделать ):

<Style x:Key="HorizontalSliderThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Height" Value="22"/>
        <Setter Property="Width" Value="11"/>
        <Setter Property="Foreground" Value="Gray"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Canvas SnapsToDevicePixels="true">
                        <Canvas.RenderTransform>
                            <TranslateTransform X="5.5" Y="11"/>
                        </Canvas.RenderTransform>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed" />
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Path x:Name="Background" Data="{StaticResource SliderThumbOuterBorderGeometry}" Fill="{StaticResource HorizontalSliderThumbNormalBackground}" />                       
                        <Path x:Name="InnerBorder" Data="{StaticResource SliderThumbMiddleBorderGeometry}" Stroke="White" />                    
                        <Path x:Name="OuterBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="#FF929292"/>
                            <Popup x:Name="tooltip" Grid.Row="0" PopupAnimation="Fade" Placement="Right" 
                            PlacementRectangle="20,25,40,30" Margin="0" 
                            VerticalOffset="-60" 
                            HorizontalOffset="-60"  >
                              <Border Background="Black" CornerRadius="5">
                                    <TextBlock Text="Sample Text" FontSize="12" Foreground="White" />
                                </Border>
                            </Popup>
                    </Canvas>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="Foreground" Value="Blue">
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbHoverBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbHoverBorder}"/>
                        </Trigger>
                        <Trigger Property="IsDragging" Value="true">
                            <Setter TargetName="tooltip" Property="IsOpen" Value="true" />
                            <Setter Property="Fill" TargetName="Background" Value="{StaticResource HorizontalSliderThumbPressedBackground}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="{StaticResource HorizontalSliderThumbPressedBorder}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Fill" TargetName="Background" Value="#FFF4F4F4"/>
                            <Setter Property="Stroke" TargetName="InnerBorder" Value="{x:Null}"/>
                            <Setter Property="Data" TargetName="OuterBorder" Value="{StaticResource SliderThumbDisabledGeometry}"/>
                            <Setter Property="Stroke" TargetName="OuterBorder" Value="#FFAEB1AF"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>