我想实现textblock与实际值的滑块上的elipse滑块拇指。当textblock有相同的widht作为elipse一切正常工作,但我需要增加textblock的宽度。
在文本块的宽度改变后,椭圆的网格宽度也改变了,滑块看起来不再合适。
- textblock width = elipse width textblock width = elipse width的滑块图片
1.文本块宽度大于椭圆宽度texblock width higher
你知道如何避免图2中的情况吗?
滑块滑块样式:
<Thumb x:Name="SliderThumb">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid Background="Transparent">
<Ellipse VerticalAlignment="Center" HorizontalAlignment="Center" Fill="Blue" Height="30" Width="30"/>
<TextBlock Width="60" TextAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,80"
HorizontalAlignment="Center" Background="Transparent" Foreground="Black" FontSize="24"
Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
编辑:根据问题编辑完整代码,文本居中。
主窗口:
<Grid>
<ContentControl Height="70" Width="400">
<Slider x:Name="slider2" IsMoveToPointEnabled="True" Tag="mm" Maximum="210" Width="300" VerticalAlignment="Bottom" Grid.Row="0" Style="{StaticResource Horizontal_Slider}"/>
</ContentControl>
</Grid>
滑块样式:
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Height="10" Background="Red"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Height="10" Background="Blue" SnapsToDevicePixels="True" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid MaxWidth="{Binding ElementName=ellipseThumb, Path=ActualWidth}" Background="Transparent">
<Ellipse x:Name="ellipseThumb" Fill="Blue" Height="30"Width="30"/>
<Canvas Margin="0,0,0,100" ClipToBounds="False"
Height="{Binding ElementName=valueTextBlock, Path=ActualHeight}"
Width="{Binding ElementName=valueTextBlock, Path=ActualWidth}">
<TextBlock
Background="Transparent"
Foreground="{TemplateBinding Background}"
FontSize="24">
<Run Text="{Binding Value,StringFormat={}{0:F2}, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
<Run Text="{Binding Tag, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
</TextBlock>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="CustomSlider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="DecreaseSlider" Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="SliderThumb" Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="IncreaseSlider" Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource CustomSlider}" />
</Trigger>
</Style.Triggers>
</Style>
1条答案
按热度按时间1dkrff031#
您必须将
TextBlock
Package 在Canvas
中以避免剪切,并且您还需要不设置TextBLock
的宽度以使其获得所需的大小。以下是您案例的工作代码:
更新
下面是
Thumb
的一个更好的样式,具有更好的对齐我已经将
TextBlock
Package 在Border
中,以允许它有余量。**注:**为了测试,我将
TextBlock
的Foreground
颜色设置为黑色。