自定义滑块wp7

时间:2012-01-03 12:32:33

标签: windows-phone-7 styles custom-controls slider

我想在此图片上创建一个看起来像最后两个的滑块:http://www.java2s.com/Code/JavaImages/SliderTest.PNG 但我希望顶部显示的值线性变化,10,100,1000,10000。 我想让用户定义这些值。

当我使用硬编码值创建样式时,没关系:

                            <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>

但是我将定义colums的网格更改为:

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

并为其添加了依赖项属性:

     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); }
    }

由于某种原因,这不起作用,依赖属性甚至不被调用一次。 o.O或者如果某人有类似的解决方案,那就太好了。

提前致谢

1 个答案:

答案 0 :(得分:1)

首先,你永远不应该在DependencyProperty getter和setter中加入代码。不能保证执行此代码 - 在某些情况下,依赖项属性会发生直接操作。

此外,当您有绑定时,源必须是public属性。

最后,您如何使用DataContext的{​​{1}}将元素和列添加到网格中?