我想在橢圓滑塊拇指頂部使用滑塊的實際值來實作文本塊。當 textblock 與 elipse 具有相同的寬度時,一切正常,但我需要增加 textblock 的寬度。
在 textloblock 的寬度改變后,橢圓的網格寬度也改變了,滑塊看起來不再合適了。
文本塊寬度 = 橢圓寬度文本塊寬度 = 橢圓寬度的滑塊圖片
文本塊寬度高于橢圓寬度 文本塊寬度更高
您知道如何避免圖 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>
uj5u.com熱心網友回復:
您必須將您的包裹TextBlock在 a 中Canvas以避免剪裁,并且您還需要不設定寬度TextBLock以使其獲得所需的大小。
這是您案例的作業代碼:
<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" MaxWidth="{Binding ElementName=ellipse, Path=ActualWidth}">
<Ellipse x:Name="ellipse" VerticalAlignment="Center" HorizontalAlignment="Center" Fill="Blue" Height="30" Width="30"/>
<Canvas Margin="0,0,0,80"
Height="{Binding ElementName=valueTextBlock, Path=ActualHeight}"
Width="{Binding ElementName=valueTextBlock, Path=ActualWidth}"
HorizontalAlignment="Center">
<TextBlock x:Name="valueTextBlock"
Background="Transparent"
Foreground="Black"
FontSize="24"
Text="{Binding Value, RelativeSource={RelativeSource AncestorType={x:Type Slider}}}"/>
</Canvas>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/315342.html
