CODEWITHSUNDEEP
c#wpfsliderwindows-store-apps
Ron
Ron

Reputation: 4095

Changing Slider's Height

I have a slider. When I set its height, the selection border changes but the slider height is still the same (22px).

Here's a screenshot: enter image description here

I believe that I need to change some properties in the default style but I couldnt understand what - I want to make the height dynamic - if I change to 200 it will be 200, if I change to 158 it will be 158 and so on...

I succeed to change the height to something specific by changing the HorizontalThumb Height to specific height (changed to different height than what I set)

Upvotes: 1

Views: 2977

Answers (1)

Farhan Ghumra
Farhan Ghumra

Reputation: 15296

UPDATE 2

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition x:Name="SliderRow" />
        <RowDefinition Height="0.5*" />
        <RowDefinition Height="0.1524*" />
    </Grid.RowDefinitions>
    <Button Click="Button_Click_1" Content="Mail" Visibility="Collapsed" />
    <Slider Height="{Binding Path=ActualHeight,ElementName=SliderRow}" Style="{StaticResource MyCustomSlider}"/>
</Grid>

UPDATE 1

Ok, I got what you want. You want to increase the track height as well when you increase height of slider itself. Then you need to customize the slider. I replaced {StaticResource SliderTrackThemeHeight} with {TemplateBinding Height}, so when slider's height is increased the slider track will also be increased.

Style

<Style TargetType="Slider" x:Key="MyCustomSlider">
    <Setter Property="Background" Value="{StaticResource SliderTrackBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource SliderBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource SliderBorderThemeThickness}" />
    <Setter Property="Foreground" Value="{StaticResource SliderTrackDecreaseBackgroundThemeBrush}" />
    <Setter Property="ManipulationMode" Value="None" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.Resources>
                        <Style TargetType="Thumb" x:Key="SliderThumbStyle">
                            <Setter Property="BorderThickness" Value="1" />
                            <Setter Property="BorderBrush" Value="{StaticResource SliderThumbBorderThemeBrush}" />
                            <Setter Property="Background" Value="{StaticResource SliderThumbBackgroundThemeBrush}" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Border Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPressedBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalBorder"
                                                            Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalBorder"
                                                            Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderDisabledBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreaseDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbDisabledBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalInlineTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BottomTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LeftTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalInlineTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkInlineDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RightTickBar"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTickMarkOutsideDisabledForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackDecreasePointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect"
                                                            Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderTrackPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBackgroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
                                                            Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SliderThumbPointerOverBorderThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhiteHorizontal"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlackHorizontal"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhiteVertical"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlackVertical"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalTemplate" Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="17" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="32" />
                        </Grid.RowDefinitions>

                        <Rectangle x:Name="HorizontalTrackRect"
                            Fill="{TemplateBinding Background}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="HorizontalDecreaseRect"
                            Fill="{TemplateBinding Foreground}"
                            Grid.Row="1" />
                        <TickBar x:Name="TopTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Height="{StaticResource SliderOutsideTickBarThemeHeight}"
                            VerticalAlignment="Bottom"
                            Margin="0,0,0,2"
                            Grid.ColumnSpan="3" />
                        <TickBar x:Name="HorizontalInlineTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}"
                            Height="{TemplateBinding Height}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <TickBar x:Name="BottomTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Height="{StaticResource SliderOutsideTickBarThemeHeight}"
                            VerticalAlignment="Top"
                            Margin="0,2,0,0"
                            Grid.Row="2"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="HorizontalBorder"
                            Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}"
                            Grid.Row="1"
                            Grid.ColumnSpan="3" />
                        <Thumb x:Name="HorizontalThumb"
                        Background="{StaticResource SliderThumbBackgroundThemeBrush}"
                        Style="{StaticResource SliderThumbStyle}"
                        DataContext="{TemplateBinding Value}"
                        Height="{TemplateBinding Height}"
                        Width="{TemplateBinding Height}"
                        Grid.Row="1"
                        Grid.Column="1" />
                        <Rectangle x:Name="FocusVisualWhiteHorizontal"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="FocusVisualBlackHorizontal"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                    </Grid>

                    <Grid x:Name="VerticalTemplate" Visibility="Collapsed" Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="17" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="17" />
                        </Grid.ColumnDefinitions>

                        <Rectangle x:Name="VerticalTrackRect"
                            Fill="{TemplateBinding Background}"
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <Rectangle x:Name="VerticalDecreaseRect"
                            Fill="{TemplateBinding Foreground}"
                            Grid.Column="1"
                            Grid.Row="2" />
                        <TickBar x:Name="LeftTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Width="{StaticResource SliderOutsideTickBarThemeHeight}"
                            HorizontalAlignment="Right"
                            Margin="0,0,2,0"
                            Grid.RowSpan="3" />
                        <TickBar x:Name="VerticalInlineTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickMarkInlineBackgroundThemeBrush}"
                            Width="{TemplateBinding Height}"
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <TickBar x:Name="RightTickBar"
                            Visibility="Collapsed"
                            Fill="{StaticResource SliderTickmarkOutsideBackgroundThemeBrush}"
                            Width="{StaticResource SliderOutsideTickBarThemeHeight}"
                            HorizontalAlignment="Left"
                            Margin="2,0,0,0"
                            Grid.Column="2"
                            Grid.RowSpan="3" />
                        <Rectangle x:Name="VerticalBorder"
                            Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}"                                
                            Grid.Column="1"
                            Grid.RowSpan="3" />
                        <Thumb x:Name="VerticalThumb"
                        Background="{StaticResource SliderThumbBackgroundThemeBrush}"
                        Style="{StaticResource SliderThumbStyle}"
                        DataContext="{TemplateBinding Value}"
                        Width="{TemplateBinding Height}"
                        Height="{TemplateBinding Height}"
                        Grid.Row="1"
                        Grid.Column="1" />
                        <Rectangle x:Name="FocusVisualWhiteVertical"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="1.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                        <Rectangle x:Name="FocusVisualBlackVertical"
                            IsHitTestVisible="False"
                            Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                            StrokeEndLineCap="Square"
                            StrokeDashArray="1,1"
                            Opacity="0"
                            StrokeDashOffset="0.5"
                            Grid.RowSpan="3"
                            Grid.ColumnSpan="3" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage

<Slider Height="72" VerticalAlignment="Center" HorizontalAlignment="Center" Width="500" Style="{StaticResource MyCustomSlider}"/>

Slider's track height is assigned via standard style & resource. Its key is SliderTrackThemeHeight and default is 11. So you need to write below line in App.xaml ONLY and whenever you want to change it you can access the resource and change it.

<x:Double x:Key="SliderTrackThemeHeight">50</x:Double>

You can set from code behind like this.

Application.Current.Resources["SliderTrackThemeHeight"] = YOUR_DYNAMIC_VALUE;

Slider styles and templates - MSDN

Upvotes: 2

Related Questions