Question

I am styling all WPF slider controls in my application, and I want them all to behave so that when the user is dragging the ‘thumb’, a Popup appears above the thumb (and follows it as the thumb is dragged), and the Popup displays a live update of new slider value.

How can I do this all in Xaml with no C#?

Thanks

Answer 1

You can style the thumb to display popup when its dragged this is for start it’s not finished as horizontalOffset is not bound (sample how to do that):

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