Slider not working after customization XAML

Question

I have a windows phone project(WPF) in which I use a Slider control for changing the volume of a media. The slider was working perfectly, but I had to customize the slider as per the project design. So I customized it, but after customisation the slider no longer works. It doesn't show the binded value, it doesn't seek(even though the binded functions for tap and manipulation are trigerred as it should). In short, after customization it appears like a static user control with no action.

Following is the code written in App.xaml to customize the slider:

    <ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
        <Rectangle Fill="Transparent"/>
    </ControlTemplate>

    <ControlTemplate x:Key="SliderThumbTemplate" TargetType="Thumb">
        <Image x:Name="ThumbImage" Source="ms-appx:///Images/PlayList/slider_knob.png" />
    </ControlTemplate>

    <Style x:Key="VolumeControlSliderStyle" TargetType="Slider">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="VerticalTrack" Fill="#7b5798" IsHitTestVisible="True" Margin="12,0" Grid.RowSpan="3" Width="17" RadiusX="5" RadiusY="5"/>
                        <Rectangle x:Name="VerticalFill" Fill="#b09bc1" IsHitTestVisible="True" Margin="12,9" Grid.Row="2" Width="5"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource PhoneSimpleRepeatButton}" MinWidth="0"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}" MinWidth="0"/>
                        <Thumb x:Name="VerticalThumb"  Height="1" Margin="0,-1,0,0" RenderTransformOrigin="0.5,0.5" Grid.Row="1" Template="{StaticResource SliderThumbTemplate}">
                            <Thumb.RenderTransform>
                                <ScaleTransform ScaleY="20" ScaleX="20"/>
                            </Thumb.RenderTransform>
                        </Thumb>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--Slider Style Ends-->

Following is the code in the UI XAML that declares the slider:

<Slider
    Minimum="0"
    Maximum="100"
    Style="{StaticResource VolumeControlSliderStyle}"
    Value="{Binding Source={StaticResource Locator}, Path=MusicPlaylist.Volume, Mode=TwoWay}"
    ManipulationMode="All"
    HorizontalAlignment="Center"
    ManipulationStarted="VolumeChanged"
    ManipulationDelta="VolumeChanged"
    ManipulationCompleted="VolumeChanged"
    Tapped="VolumeChanged"
    Orientation="Vertical"
    Margin="0,10,0,0"
    Height="150" />

It was all working fine till customization, but after customization the slider simply stays idle, it doesn't change value, doesn't seek and do nothing. However if I remove the Style, it simple works again, which makes me think the problem is with the style code(in XAML). But I can't determine what. Please help.

EDIT

I followed this tutorial for customization.

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

I think you have to modify the different parts of the track to get it to work as normal.

There are a few code examples on this post that could help.

edited May 23 '17 at 12:15

Community

1
1

answered Oct 19 '15 at 09:06

mrstebo

911
9
12

Can you please mention what is wrong with my customization and how to rectify it? – Harikrishnan Oct 19 '15 at 09:08
Track is not supported in Windows App projects. – Harikrishnan Oct 19 '15 at 09:16

score 0 · Accepted Answer · answered Oct 28 '15 at 10:52

0

I used Blend for Visual Studio to create a custom slider and discarded the above code. That solved the issue.

answered Oct 28 '15 at 10:52

Harikrishnan

7,765
13
62
113

Slider not working after customization XAML

2 Answers2