Reputation: 4227
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
Upvotes: 0
Views: 2271
Reputation: 2711
Despite this question is quite old, but there is an easy way to do that with Slider properties itself
<Slider AutoToolTipPlacement="BottomRight"
AutoToolTipPrecision="2"/>
Upvotes: 0
Reputation: 2677
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>
Upvotes: 1