Custom slider wp7

Question

I want to create a slider which looks like the last two on this image: http://www.java2s.com/Code/JavaImages/SliderTest.PNG But I want the values that are shown on top to be linearly changed, 10,100,1000,10000. And I want to let the user define these values.

When I created a style with hardcoded values it was ok:

                            <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="12"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="100m" Grid.Column="0" TextAlignment="Left"></TextBlock>
                                <TextBlock Text="500m" Grid.Column="1" TextAlignment="Center"></TextBlock>
                                <TextBlock Text="1km"  Grid.Column="2" TextAlignment="Center"></TextBlock>
                                <TextBlock Text="10km"  Grid.Column="3" TextAlignment="Center"></TextBlock>
                                <TextBlock Text="100km" Grid.Column="4" TextAlignment="Center"></TextBlock>
                                <TextBlock Text="All" Grid.Column="5" TextAlignment="Center" ></TextBlock>                                
                            </Grid>
                            <Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12"  IsHitTestVisible="False" Grid.Row="1"/>
                            <Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Opacity="0.2" Grid.Row="1"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Row="1"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}" Grid.Row="1"/>
                            <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="12"  Width="12" Grid.Row="1">
                                    <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>

But than I changed the grid defining the colums to this:

<Grid Name="separatorsGrid" DataContext="{Binding GridSeparator}" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3"/>

and added a dependency property to it:

     public static readonly DependencyProperty SeparatorProperty =
        DependencyProperty.Register("Separators", typeof(List<string>), typeof(CustomSlider), null);

      public static readonly DependencyProperty GridSeparatorProperty =
        DependencyProperty.Register("GridSeparator", typeof(Grid), typeof(CustomSlider), null);

    public CustomSlider()
    {
        DefaultStyleKey = typeof(CustomSlider);
    }

    public List<string> Separators
    {
        get{ return base.GetValue(SeparatorProperty) as List<string>; }
        set 
        {
            Grid maingrid = new Grid();
            foreach (string separator in value)
            {
                ColumnDefinition col = new ColumnDefinition();
                maingrid.ColumnDefinitions.Add(col);                    
            }

            int colNum = -1;
            foreach (string gridColumn in value)
            {
                colNum++;
                TextBlock textBlock = new TextBlock();
                textBlock.Text = gridColumn;
                Grid.SetRow(textBlock, 0);
                Grid.SetColumn(textBlock, colNum);
                maingrid.Children.Add(textBlock);  // This line makes all the difference.
            }
            base.SetValue(GridSeparatorProperty, maingrid); 
        }
    }

    public Grid GridSeparator
    {
        get { return base.GetValue(GridSeparatorProperty) as Grid; }
        set { base.SetValue(GridSeparatorProperty, value); }
    }

and for some reason this isn't working, the dependency property is not even called once. o.O or if someone has a similar solution for this that would be nice.

Thanks in advance

Answer 1

First of all, you never should put a code inside DependencyProperty getters and setters. It's not guaranteed that this code will be executed - in some cases there are direct manipulations occurs on dependency properties.

Also, when you have a binding, the source must be a public property.

And the last, how are you going to add elements and columns to a grid using DataContext of the Grid?