【问题标题】:Custom slider wp7自定义滑块 wp7
【发布时间】:2012-01-06 16:13:46
【问题描述】:

我想创建一个看起来像这张图片上最后两个的滑块: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>

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

<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 或者如果有人对此有类似的解决方案,那就太好了。

提前致谢

【问题讨论】:

  • 您在Grid 中设置Separators 的位置? &lt;Grid Name="separatorsGrid" Separators={Binding ...} DataContext="{Binding GridSeparator}"...
  • 你不需要,在分隔符中设置分配给网格的 Gridseparator 属性。
  • 请提供一些测试项目进行测试
  • depositfiles.com/files/l7tghmbzp。明天我会写哪里有问题

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


【解决方案1】:

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

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

最后,您将如何使用DataContextGrid 将元素和列添加到网格?

【讨论】:

  • "最后,您将如何使用 Grid 的 DataContext 将元素和列添加到网格中?"这也是我要问的。
  • 但我看到你做到了:D 目前我不知道如何,但我会审查它。非常感谢!
  • 查看我的项目。我为此使用了 GetTemplateChild。 depositfiles.com/files/l7tghmbzp
  • 是的,你需要检查它并清理一些错误的东西;)
猜你喜欢
  • 1970-01-01
  • 2023-04-05
  • 2016-01-28
  • 1970-01-01
  • 2012-01-09
  • 2016-09-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多