Question

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

Answer 1

我遇到了同样的问题，并花了一些时间进行搜索。与其他评论者一样，我的解决方案是旋转滑块。事实证明，在Forms中要做的事情相当棘手。旋转围绕中心点进行，并在任何定位之后应用，这就是为什么事物趋向于最终偏离目标（或离开屏幕）的原因。我最终使用了RelativeLayout来应用正确的大小和位置，并将其包装在ContentView中以使其易于使用。

像这样使用：

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

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

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

这是课程。

[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中基于父维度进行算术的方法。

对于Xamarin（和XAML而言）我还很陌生，所以以这种方式进行操作可能会产生负面影响，而我并不知道。欢迎任何批评。

Answer 2

这很有效。它仍然有很多令人讨厌的怪异之处，但是，它的核心工作是：具有垂直滑块，彼此并排对齐。

<AbsoluteLayout x:Name="slidersAbs" HeightRequest="300" HorizontalOptions="CenterAndExpand" WidthRequest="800">
    <Slider Rotation="-90" Minimum="0" Maximum="50" Value="0"
        AbsoluteLayout.LayoutBounds="0,.5,300,50" AbsoluteLayout.LayoutFlags="PositionProportional"/>
    <Slider Rotation="-90" Minimum="0" Maximum="80" Value="0"
        AbsoluteLayout.LayoutBounds=".5,.5,300,50" AbsoluteLayout.LayoutFlags="PositionProportional"/>
    <Slider Rotation="-90" Minimum="0" Maximum="100" Value="0"
        AbsoluteLayout.LayoutBounds="1,.5,300,50" AbsoluteLayout.LayoutFlags="PositionProportional"/>
</AbsoluteLayout>

我从实验中学到的一些东西：

我必须将WidthRequest设置为一个非常高的数字，以使滑块完全在水平方向上间隔开；在abs布局上放置边框可能有助于理清那里发生的事情。
您只会注意到排名（X，Y）是成比例的；如果您将高度/宽度设置为高，它会弄乱您在其他布局方法中遇到的方式，在这种布局方法中，高度和宽度会自我反转，但仍与屏幕成反比，这很混乱。旋转时根本无法使用宽度/高度比例。
您会认为疯狂的宽度和事物会导致某种滚动困境或其他冲突，但实际上效果很好。
我将“最大值”设置为50、80、100，因此很容易分辨出哪个是哪个。如您所愿，0放置在每个按钮的底部（而不是顶部-Rotation = 90将0置于顶部，-90修复此问题），最后一个滑块出现在右侧。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/slider https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout

Answer 3

我这样做。我认为是直观的，我不必担心坐标。 X和Y仍相对于所需的实际滑块左侧和顶部。请注意，SetLayoutBounds中的Rectangle边界有意交换了Height和Width。

  Slider thisfader = new Slider();
  //coordinates swapped to accomodate rotation
  AbsoluteLayout.SetLayoutBounds(thisfader, new Rectangle(X, Y + Height, Height, Width));
  thisfader.AnchorX = 0; 
  thisfader.AnchorY = 0; //these set the rotation anchor on top left
  thisfader.Rotation = -90;

  AbsoluteLayout.Children.Add(thisfader);

Answer 4

您还可以在此博客中查看android和iOS中xamarin形式的垂直滑块的完整源代码

https://xamarinexperience.blogspot.com/search?q=Vertical+slider enter image description here

Xamarin.forms中的垂直滑块？

4 个答案: