Xamarin.forms 滑块 ThumImage 隐藏在最大值上

Question

我正在使用滑块控件并将三角形设置为缩略图。在极左值或最小值上，图像正确显示。但是在将它拖到最大值时它会隐藏在最大值上。 <Slider.ThumbImageSource> <OnPlatform x:TypeArguments="FileImageSource"> <On Platform="UWP" Value="Assets/Images/Triangle.png"/> </OnPlatform> </Slider.ThumbImageSource>

Answer 1

当您在 Xamarin.uwp 中将此滑块控件与缩略图一起使用时，没有水平限制。但是，原始的拇指效果很好。

您可以创建自定义控件以使用 original Thumb style 覆盖 Thumb Image style。

变化：

<Thumb x:Name="HorizontalThumb"
              Background="{ThemeResource SystemControlForegroundAccentBrush}"
              Style="{StaticResource SliderThumbStyle}"
              DataContext="{TemplateBinding Value}"
              Height="24"
              Width="8"
              Grid.Row="0"
              Grid.RowSpan="3"
              Grid.Column="1"
              AutomationProperties.AccessibilityView="Raw" />
                            <Thumb x:Name="HorizontalImageThumb"
                                    Visibility="Collapsed"
                                    Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                    Style="{StaticResource SliderThumbImageStyle}"
                                    DataContext="{TemplateBinding Value}"
                                    Tag="{Binding ThumbImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                                    Height="24"
                                    Width="24"
                                    Grid.Row="0"
                                    Grid.RowSpan="3"
                                    Grid.Column="1"
                                    AutomationProperties.AccessibilityView="Raw" />

收件人：

   <Thumb
                                x:Name="HorizontalThumb"
                                Grid.Row="0"
                                Grid.RowSpan="3"
                                Grid.Column="1"
                                Width="24"
                                Height="24"
                                AutomationProperties.AccessibilityView="Raw"
                                Style="{StaticResource SliderThumbImageStyle}"
                                Background="{ThemeResource SystemControlForegroundAccentBrush}"
                                DataContext="{TemplateBinding Value}"
                                Tag="{Binding ThumbImageSource, RelativeSource={RelativeSource TemplatedParent}}"
                                />

并且评论用于交换拇指的方法。

protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();

        Thumb = GetTemplateChild("HorizontalThumb") as Thumb;
        ImageThumb = GetTemplateChild("HorizontalImageThumb") as Thumb;

        //SwapThumbs(this);

        OnReady();
    }

并添加下面的代码以使用此属性更改控件使用的默认样式。

public MySlider()
    {
        this.DefaultStyleKey = typeof(MySlider);
    }

然后评论Xamarin.uwp的MainPage.cs中的代码。

LoadApplication(new App43.App());

终于可以在Xamarin.uwpMainPage.xaml中使用这个控件了。

<local:MySlider ThumbImageSource="Assets/pig.jpg"/>

结果：

我已经在GitHub上上传了我的示例，您可以下载App43文件夹以供参考。 https://github.com/WendyZang/Test.git

Xamarin.forms 滑块 ThumImage 隐藏在最大值上

Xamarin.forms Slider ThumImage hides on Maximum value

xaml

xamarin.forms

xamarin.uwp