Question

It must be simple but I can’t figure it out. How to change the height of slider control in windows phone? No matter how large value I set for Height it remains as it is

<Slider Width="100" Height="600" />

Answer 1

Open the page in Expression Blend

1. Right click on Slider Control on Page .
2. Select Edit Template and Select Edit Current/ Edit a copy as you wish.
3. Change width values in Scale sub tab of Render Tab for the properties HorizontalTrack, HorizontalFill,HorizontalThumb in Expression Blend
   and you will see the difference.

Save the page and get back to Visual Studio and your custom template will be added to page resources.

I have attached the image for Expression Blend .

And the result will be like

Template code :- which might be of help for you.

<phone:PhoneApplicationPage.Resources>
    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>
<Style x:Key="SliderStyle1" TargetType="Slider">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Background="Transparent">
                    <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="12"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform ScaleY="2.9"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                            <Rectangle.RenderTransform>
                                <CompositeTransform ScaleY="2.9"/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12" Margin="0,22,0,50" Width="12" RenderTransformOrigin="0.5,0.5">
                            <Thumb.RenderTransform>
                                <CompositeTransform ScaleY="4.65"/>
                            </Thumb.RenderTransform>
                            <Thumb.Template>
                                <ControlTemplate>
                                    <Canvas Background="{StaticResource PhoneForegroundBrush}" Height="12" Width="12">
                                        <Rectangle Fill="Transparent" Height="84" IsHitTestVisible="True" Canvas.Left="-24" Canvas.Top="-22" Width="60"/>
                                    </Canvas>
                                </ControlTemplate>
                            </Thumb.Template>
                        </Thumb>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And usage it in control like:-

 <Slider Margin="0,49,56,348" HorizontalAlignment="Right" Width="360" Style="{StaticResource SliderStyle1}" />