Xamarin.forms Slider ThumImage 隐藏在最大值

Posted 2023-03-25

【中文标题】Xamarin.forms Slider ThumImage 隐藏在最大值

【英文标题】：Xamarin.forms Slider ThumImage hides on Maximum value

【发布时间】：2020-02-08 03:46:37

【问题描述】：

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

【参考方案1】：

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

您可以创建一个自定义控件来使用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.uwp MainPage.xaml 中使用此控件。

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

结果：

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

【讨论】：

谢谢@wendyzang。我检查了您的解决方案，这正是我的要求。但我在可移植代码而不是 uwp 代码上使用滑块控件。我也必须在 android 和 ios 之间共享相同的代码。但我也在尝试使用 SliderRenderer 类来进行特定于平台的更改。

@mayank.karki 您可以在自定义渲染器中执行此操作。