Vertical slider in Xamarin.forms?

Question

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?

Answer 1

I do this way. I think is intuitive and I don't have to worry about coordinates. X and Y are still relative to the wanted actual Left and Top of the Slider. Note the Rectangle bounds in SetLayoutBounds has Height and Width swapped on purpose.

  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 2

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.

Use like this:

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

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.

This is the class.

[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;
    }
}

It's in C# as I found no way of doing arithmetic based on parent dimensions in 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.

Answer 3

This works, sort of. It still has a lot of irritating weirdness to it, but, does the core job of: Has vertical sliders, align next to each other.

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

Some things I've gleaned from experimentation:

1. I had to set that WidthRequest to an insanely high number to get the sliders to space out horizontally at all; putting a border on the abs layout might help sort out what's going on there.
2. You'll notice only the Position (X,Y) is Proportional; if you let the height/width be, it freaks out the way you were running into in other layout approaches, where height and width invert themselves but are still proportional to the screen in the inverse, it's a mess. You just can't use width/height proportional when rotated, at all.
3. You'd think the insane width and things would cause some kind of scrolling dilemma or other conflict but it actually works perfectly.
4. I've set the Maximum to 50, 80, 100 so it's easy to tell which is which. As you'd hope, 0 is placed at the bottom of each (not the top - Rotation=90 puts 0 at top, -90 fixes this), and the last slider appears on the right.

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 4

You can also check this blog for complete source code of vertical sliders in xamarin forms in android and iOS

https://xamarinexperience.blogspot.com/search?q=Vertical+slider