Question

我需要扩展一个滑块以避开它的控制。那有可能吗？如果不是我怎么能实现这一目标？请帮助。

例如，我的滑块的高度为50，但拇指必须在控件外开始-50px并且高度为100。

这里黄色是滑块控件，红色是拇指现在我需要拇指伸展将橙色部分添加到同一个拇指。

由于

Answer 1

如果您可以使用WPF控件构建UI，那么您可以定义一个新的ControlTemplate ......它确实没有什么不同。以下是...总是从实现默认ControlTemplate开始，以便您的对象最初看起来“正常”。然后只需找到要更改的部分......并进行更改：

enter image description here

这一个的诀窍是Thumb 不不会超出控制范围，而是整个控件被放大。现在默认的ControlTemplate非常大，我不会在这里添加所有的XAML。从默认的@VimalCK开始添加一个链接（不要忘记包含Resources），然后添加这些更改（希望我记得我改变了所有内容：

    <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="SnapsToDevicePixels" Value="true" />
        <Setter Property="OverridesDefaultStyle" Value="true" />
        <Setter Property="Height" Value="200" />
        <Setter Property="Width" Value="14" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Grid>
                        <Ellipse x:Name="Ellipse" StrokeThickness="1" Height="14" 
                            VerticalAlignment="Bottom">
                            ...  <!--Use default XAML here-->
                        </Ellipse>
                        <Rectangle Height="200" Width="2" Stroke="Red" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后在HorizontalSlider ControlTemplate内，将TrackBackground Border定义更改为：

<Border x:Name="TrackBackground" VerticalAlignment="Bottom" Margin="0,0,0,5" 
    CornerRadius="2" Height="4" Grid.Row="1" BorderThickness="1">
    ...  <!--Use default XAML here-->
</Border>

然后将其与Height这样使用：

<Slider Height="210" Maximum="100" Minimum="0" TickPlacement="BottomRight"
VerticalAlignment="Bottom" />

我想我记录了我所做的所有更改...如果没有，您可能需要在某些内容上设置Height或VerticalAlignment到Bottom ...方式，只是实验，直到你得到你想要的。探索如何定义默认ControlTemplate是学习WPF的好方法。

Answer 2

Microsoft提供的WPF控件具有MSDN中提供的默认样式和模板，您可以根据自己的要求对其进行修改。对于滑块控件样式和模板，请访问以下链接

http://msdn.microsoft.com/en-us/library/ms753256(v=vs.110).aspx

Answer 3

通过Canvas Control包裹拇指并设置ClipToBOunds =＆＃34; False＆＃34;像这样

 <Style x:Key="SliderThumbStyle"
        TargetType="{x:Type Thumb}">
         <Setter Property="SnapsToDevicePixels"
           Value="true" />
         <Setter Property="OverridesDefaultStyle"
           Value="true" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Thumb}">
                     <Canvas>
                         <Border Width="16" Height="16" Canvas.Top="-3" ClipToBounds="False" Background="Black" />
                     </Canvas>
                  </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

WPF：SliderControl外的滑块拇指

3 个答案: