Xamarin.forms 中的垂直滑块? [英] Vertical slider in Xamarin.forms?

问题描述

我正在尝试在 Xamarin.forms 中实现垂直滑块.我知道我需要分别在 ios 和 android 中创建渲染类.对于 ios，我的渲染器似乎工作正常.对于 android 我正在关注链接 https://forums.xamarin.com/discussion/69933/垂直滑块.然而，上面链接中提供的解决方案给我留下了一个没有拇指的滑块.有没有办法在 Xamarin.forms 中为 android 实现垂直滑块?

I am trying to implement Vertical slider in Xamarin.forms. I know for that I need to create render classes in ios and android respectively. For ios, my renderer seems to be working fine. For android I am following the link https://forums.xamarin.com/discussion/69933/vertical-slider. However the solution provided in above link left me with a slider with no thumb. Is there any way to implement vertical slider for android in Xamarin.forms?

推荐答案

我遇到了同样的问题，花了一些时间搜索.与其他评论者一样，我的解决方案是旋转滑块.事实证明，这是在 Forms 中做的相当挑剔的事情.旋转是围绕中心点进行的，并在任何定位之后应用，这就是为什么事情往往会偏离目标(或屏幕外......).我最终使用了一个 RelativeLayout 来应用正确的大小和位置，并将其包裹在一个 ContentView 中，以使其美观且易于使用.

I had the same issue, and spent some time searching. My solution, as other commenters, was to rotate the slider. As it turns out that is quite the finicky thing to do in Forms. The rotation is around the center point and is applied after any positioning, which is why things tend to end up off target (or off screen..). I ended up using a RelativeLayout to apply the correct size and position and wrapped it up in a ContentView to make it nice and easy to use.

像这样使用:

... 
xmlns:components="clr-namespace:YourNamespace.Components" 
...
<components:VerticalContentView>
    <Slider />
</components:VerticalContentView>

VerticalContentView 可以像任何其他 ContentView 一样使用.添加到它的任何视图都将旋转 -90 度.可以使用 ContentRotation 属性自定义旋转.

The VerticalContentView can be used like any other ContentView. Any view added to it will be rotated by -90 degrees. The rotation can be customized by using the ContentRotation property.

请注意，任何视图都可以旋转，而不仅仅是滑块.

Note that any view can be rotated, not just a slider.

这是课程.

[ContentProperty("VerticalContent")]
public class VerticalContentView : ContentView
{
    public View VerticalContent 
    { 
        get => (View)GetValue(ContentProperty); 
        set => SetValue(ContentProperty, Verticalize(value)); 
    }

    public double ContentRotation { get; set; } = -90;

    private View Verticalize(View toBeRotated)
    {
        if (toBeRotated == null)
            return null;

        toBeRotated.Rotation = ContentRotation;
        var result = new RelativeLayout();

        result.Children.Add(toBeRotated,
        xConstraint: Constraint.RelativeToParent((parent) =>
        {
            return parent.X - ((parent.Height - parent.Width) / 2);
        }),
        yConstraint: Constraint.RelativeToParent((parent) =>
        {
            return (parent.Height / 2) - (parent.Width / 2);
        }),
        widthConstraint: Constraint.RelativeToParent((parent) =>
        {
            return parent.Height;
        }),
        heightConstraint: Constraint.RelativeToParent((parent) =>
        {
            return parent.Width;
        }));

        return result;
    }
}

它在 C# 中，因为我发现无法根据 XAML 中的父维度进行算术运算.

It's in C# as I found no way of doing arithmetic based on parent dimensions in XAML.

我对 Xamarin(以及一般的 XAML)非常陌生，因此这样做可能会产生我不知道的负面影响.欢迎任何批评.

I'm pretty new to Xamarin (and XAML in general), so there might be negative effects of doing it this way that I am not aware of. Any criticisms are welcome.

这篇关于Xamarin.forms 中的垂直滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！