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

Question

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

vertical bar (start & end) takes some space with slider

使用xaml中的T​​ickFrequency设置滑块。在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"
/>

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

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" />