c# - 带有图像或路径的自定义 slider

Question

我想重新设计我的 WP7 应用程序中的 slider 。我在使用默认模板时遇到问题

我做了类似这样的东西，但我无法将拇指“绑定(bind)”到该值。

      <Style x:Key="ThumbStyle1" TargetType="Thumb">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid >
                        <Path Data="M13.832941,48.001114 L-0.00066526519,15.584446 L-0.1685528,3.1627214 L46.375076,3.1882343 L46.59383,15.594595 L33.375225,48.063122 z" Fill="#FF6D6D74" Margin="-0.668,2.662,0.906,-0.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="tempoSliderControlTemplate" TargetType="Slider" >
        <Grid>
            <Rectangle Fill="#FF6D6D74" Margin="25,0,25,0" Stroke="Black"/>
            <Thumb x:Name="VerticalThumb" Width="50" Height="50" Style="{StaticResource ThumbStyle1}" RenderTransformOrigin="0.5,0.5" CacheMode="BitmapCache"/>
        </Grid>
    </ControlTemplate> 

上下移动它。

Answer 1

您的 slider 模板非常缺乏行为。它自己绘制，但没有触发器来定义对用户点击/拖动等的 react 。

如果您想自定义 slider 的外观，我建议您从原始模板开始并对其进行自定义。为此，请下载应用程序 Show Me The Templates! ，将模板提取到您的项目中，然后开始自定义缩略图。

我希望这对您有所帮助。

编辑:这是错误的。这仅适用于 WPF。在 Silverlight 中，我推荐的工具是 Blend，或者您可以在模板上使用 Visual Studio 的“提取到资源”功能: Link

编辑 编辑:我修改了内置 slider 模板以包含您的拇指样式，作为您应该进行小调整而不是“推倒重来”的系统类型的引用。

<Grid>
    <Grid.Resources>
        <Style x:Key="ThumbStyle1" TargetType="Thumb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid >
                            <Path Data="M13.832941,48.001114 L-0.00066526519,15.584446 L-0.1685528,3.1627214 L46.375076,3.1882343 L46.59383,15.594595 L33.375225,48.063122 z" Fill="#FF6D6D74" Margin="-0.668,2.662,0.906,-0.562" Stretch="Fill" Stroke="Black" UseLayoutRounding="False"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SliderStyle1" TargetType="Slider">
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Maximum" Value="10"/>
            <Setter Property="Minimum" Value="0"/>
            <Setter Property="Value" Value="0"/>
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid x:Name="Root">
                            <Grid.Resources>
                                <ControlTemplate x:Key="RepeatButtonTemplate">
                                    <Grid x:Name="Root" Background="Transparent" Opacity="0"/>
                                </ControlTemplate>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ThumbDisabledOverlay">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="VerticalTrackRectangleDisabledOverlay">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                    <VisualState x:Name="Unfocused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="HorizontalTemplate" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle x:Name="TrackRectangle" Grid.ColumnSpan="3" Grid.Column="0" Fill="#FFE6EFF7" Height="3" Margin="5,0,5,0" RadiusY="1" RadiusX="1" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}"/>
                                <Rectangle x:Name="HorizontalTrackRectangleDisabledOverlay" Grid.ColumnSpan="3" Grid.Column="0" Fill="White" Height="3" Margin="5,0,5,0" Opacity=".55" RadiusY="1" RadiusX="1" Visibility="Collapsed"/>
                                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
                                <Thumb x:Name="HorizontalThumb" Grid.Column="1" Height="18" IsTabStop="True" Width="11"/>
                                <Rectangle x:Name="ThumbDisabledOverlay" Grid.Column="1" Fill="White" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="11"/>
                                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}"/>
                            </Grid>
                            <Grid x:Name="VerticalTemplate" Background="{TemplateBinding Background}" Visibility="Collapsed">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Rectangle Fill="#FFE6EFF7" Margin="0,5,0,5" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Stroke="#FFA3AEB9" StrokeThickness="{TemplateBinding BorderThickness}" Width="3"/>
                                <Rectangle x:Name="VerticalTrackRectangleDisabledOverlay" Fill="White" Margin="0,5,0,5" Opacity=".55" RadiusY="1" Grid.Row="0" RadiusX="1" Grid.RowSpan="3" Visibility="Collapsed" Width="3"/>
                                <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource RepeatButtonTemplate}"/>
                                <Thumb x:Name="VerticalThumb" Height="11" IsTabStop="True" Grid.Row="1" Width="18" Style="{StaticResource ThumbStyle1}"/>
                                <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource RepeatButtonTemplate}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
    <Slider Style="{StaticResource SliderStyle1}" Orientation="Vertical" HorizontalAlignment="Left" />

</Grid>