I am using the XamNumericSlider and defined the slider & thumb as such:
<ig:XamNumericSlider x:Name="Slider1" MaxValue="40" Value="{Binding MyValue, Mode=TwoWay}" TrackClickAction="LargeChange" LargeChange="10"> <ig:XamNumericSlider.Thumb> <ig:XamSliderNumericThumb x:Name="myThumb" TrackFillBrush="Red" IsDragEnabled="true"> </ig:XamSliderNumericThumb> </ig:XamNumericSlider.Thumb></ig:XamNumericSlider>
This is a branded app so I want to use my own colors and not rely on phone theme colors. Currenly the border of the thumb as well as the thumb color when sliding is blue since that is the color for my phone's theme.
How can I change both the thumb border as well as the background color when sliding to a specific color?
Hi,
For changing both the thumb border as well as the background in when sliding you should define a new style for the Thumb and set it in the slider with the property ThumbStyle.
For example:
<SolidColorBrush x:Key="thumbBackgroundBrush" Color="Yellow" /> <SolidColorBrush x:Key="thumbBorderBrush" Color="Orange"/> <SolidColorBrush x:Key="thumbActiveBorderBrush" Color="White"/> <SolidColorBrush x:Key="thumbPressedBrush" Color="Pink" /> <SolidColorBrush x:Key="thumbPressedBorderBrush" Color="Blue"/> <Style x:Key="XamSliderThumbBaseStyle1" TargetType="ig:XamSliderThumbBase"> <Setter Property="Background" Value="{StaticResource thumbBackgroundBrush}"/> <Setter Property="BorderBrush" Value="{StaticResource thumbBorderBrush}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ig:XamSliderThumbBase"> <Grid x:Name="RootElement"> <ToolTipService.ToolTip> <ToolTip x:Name="ThumbToolTip" ContentTemplate="{TemplateBinding ToolTipTemplate}" Visibility="{TemplateBinding ToolTipVisibility}"/> </ToolTipService.ToolTip> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="OrientationStates"> <VisualState x:Name="Horizontal"/> <VisualState x:Name="Vertical"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Unfocused"> <Storyboard> <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="dragElem"/> <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="verticalDragElem"/> </Storyboard> </VisualState> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="dragElem"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="verticalDragElem"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ActiveStates"> <VisualState x:Name="Inactive"/> <VisualState x:Name="Active"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="normalElem" Storyboard.TargetProperty="Stroke"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource thumbActiveBorderBrush}" /> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="verticalnormalElem" Storyboard.TargetProperty="Stroke"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource thumbActiveBorderBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="HorizontalThumb" Height="90" Width="90" Margin="-45,0,45,0" Background="Transparent"> <Grid x:Name="HorizontalThumbContent" Height="36" Width="20"> <Rectangle x:Name="normalElem" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle x:Name="dragElem" Fill="{StaticResource thumbPressedBrush}" Stroke="{StaticResource thumbPressedBorderBrush}" StrokeThickness="1" Opacity="0" RadiusX="3" RadiusY="3"/> </Grid> </Grid> <Grid x:Name="VerticalThumb" Visibility="Collapsed" Height="90" Width="90" Margin="0,-45,0,45" Background="Transparent"> <Grid x:Name="VerticalThumbContent" Height="20" Width="36"> <Rectangle x:Name="verticalnormalElem" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> <Rectangle x:Name="verticalDragElem" Fill="{StaticResource thumbPressedBrush}" Stroke="{StaticResource thumbPressedBorderBrush}" StrokeThickness="1" RadiusX="3" RadiusY="3"/> </Grid> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
To use the style just set it in the ThumbStyle property:
<ig:XamNumericSlider x:Name="Slider1" MaxValue="40" Value="{Binding MyValue, Mode=TwoWay}" TrackClickAction="LargeChange" LargeChange="10" ThumbStyle="{StaticResource XamSliderThumbBaseStyle1}"> <ig:XamNumericSlider.Thumb> <ig:XamSliderNumericThumb x:Name="myThumb" TrackFillBrush="Red" IsDragEnabled="true"> </ig:XamSliderNumericThumb> </ig:XamNumericSlider.Thumb> </ig:XamNumericSlider>
Regards,Luis.