如何在 UWP 中修复“没有任何空格的滑块刻度开始和结束位置”

Question

在 UWP 中，Slider TickBars 从头到尾占用额外的空间。我希望它与滑块的开始和结束边缘对齐。 如何在 UWP 中修复“滑块刻度开始和结束位置没有任何空格”？

在 xaml 中使用 TickFrequency 设置滑块。在 TickBar Grid.ColumnSpan="3" Grid.RowSpan="3".

in xaml:
<Slider Style="{StaticResource CustomSlider}" 
    RelativePanel.Below="NarrowText"
    Width="404"
    HorizontalAlignment="Left"
    VerticalAlignment="Stretch"
    Minimum="0"
    Maximum="3"
    TickFrequency="1"
    TickPlacement="Outside"
    ValueChanged="Slider_ValueChanged"
    Value="{x:Bind _viewModel.SliderValue, Mode=TwoWay}">
</Slider>

in style:
<TickBar 
    x:Name="TopTickBar" 
    Grid.ColumnSpan="3" 
    Grid.RowSpan="3" 
    Fill="{ThemeResource SliderTickBarFill}" 
    Height="14" 
    HorizontalAlignment="Stretch"  
    VerticalAlignment="Center" 
    Visibility="Visible"
/>

我希望滑块的开始和结束边缘应与刻度条（矩形）对齐（相同位置）。

在 TickBar 中应用边距会导致与拇指对齐不匹配。 Thumb in 1st position Thumb in 2nd positionThumb in 3rd positionThumb in 4th position

Answer 1

如何在 UWP 中修复“滑块刻度开始和结束位置没有任何空格”

如果要修复滑块刻度的开始和结束位置而没有任何空格，则需要重新编写滑块样式并编辑TopTickBar,BottomTickBar,HorizontalInlineTickBar边距，请参考以下样式部分。

<TickBar x:Name="TopTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderTickBarFill}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Bottom"
Margin="-4,0,-4,4"
Grid.ColumnSpan="3" />
<TickBar x:Name="HorizontalInlineTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderInlineTickBarFill}"
Height="{ThemeResource SliderTrackThemeHeight}"
Grid.Row="1"
Margin="-4,0,-4,0"
Grid.ColumnSpan="3" />
<TickBar x:Name="BottomTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderTickBarFill}"
Height="{ThemeResource SliderOutsideTickBarThemeHeight}"
VerticalAlignment="Top"
Margin="-4,4,-4,0"
Grid.Row="2"
Grid.ColumnSpan="3" />

对于您的场景，您只能像下面这样修改TopTickBar 样式

<TickBar x:Name="TopTickBar"
Visibility="Collapsed"
Fill="{ThemeResource SliderTickBarFill}"
Height="14"
VerticalAlignment="Bottom"
Margin="-4,0,-4,-8"
Grid.ColumnSpan="3" />