windows-phone-8 - Windows Phone 8で双方向スライダーまたは範囲スライダーを使用するには?

Question

Windows phone 8 単一のスライダーに 2 つの調整コントロールを使用する方法は? 次の URL は iphon Range Slider の例です。wp8 でこれを実行したい ( http://www.cocoacontrols.com/controls/rangeslider )

Answer 1

WP8/WP7 で使用する場合は、Blend に移動し、スタイルを変更し、CustomStyle に新しい Rectangle を追加します

  <Style x:Key="CustomSlider" TargetType="Slider">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Maximum" Value="10"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0"/>
        <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.1"              Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
                                        <DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                            <Rectangle x:Name="HorizontalTrack" Height="12" IsHitTestVisible="False" Margin="0,22,0,10" Fill="#FF75B3C1"/>
                            <Rectangle x:Name="HorizontalFill" Height="12" IsHitTestVisible="False" Margin="0,22,0,10" Fill="#FFEE887E">
                                <Rectangle.Clip>
                                    <RectangleGeometry Rect="0, 0, 6, 12"/>
                                </Rectangle.Clip>
                            </Rectangle>
                            <Rectangle x:Name="HorizontalCenterElement" HorizontalAlignment="Left" Height="24" Margin="0,10,0,0" Width="12" Fill="#FFBAB9C3">
                                <Rectangle.RenderTransform>
                                    <TranslateTransform/>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <Rectangle x:Name="HorizontalCenterElement1" HorizontalAlignment="Left" Height="24" Margin="369,44,0,34" Width="12" Fill="#FFBAB9C3">
                                <Rectangle.RenderTransform>
                                    <TranslateTransform/>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                        <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                            <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12"/>
                            <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12">
                                <Rectangle.Clip>
                                    <RectangleGeometry Rect="0, 0, 12, 6"/>
                                </Rectangle.Clip>
                            </Rectangle>
                            <Rectangle x:Name="VerticalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" Height="12" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
                                <Rectangle.RenderTransform>
                                    <TranslateTransform/>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

スライダーを使用して範囲を指定する組み込みのコントロールはありません。また、主要なコンポーネント ベンダーから入手できるものもありません。

ただし、http://windowsphone7.vectorform.com/2010/11/04/custom-range-slider-for-wp7/で、あなたが求めていることを行うように見えるサードパーティのコントロールを見つけました