Forum Xamarin.Forms

How to implement a complex slider in xamarin.forms

Hi,
I have a design that im trying to implement, and part of the design is this slider:

the user interraction should be disabled for it.
The yellow thumb should be set to a value from a remote query.
Any ideas how i can implement this view? I doesnt nessessarily have to be a slider... just something that functions like i described...

Best Answer

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    It seems a Grid

    3 columns and N rows
  • xeckucxeckuc Member ✭✭

    @JohnHardman said:
    @xeckuc

    If you want the Slider to support user interactions:

    As @AlessandroCaliaro said, use a Grid with 3 columns. Populate the Grid cells with appropriate Views to get the appearance that you want.

    Add the Slider as a child of the Grid, spanning all three columns, and set the various color properties of the Slider to Color.Transparent, with the exception of ThumbColor.

    Bind the YScaleProperty of the Slider to the value, using a ValueConverter to have the YScale go up in steps rather than on a linear scale.

    (I hasten to add that I haven't tested the above, but I would expect it to work).

    Note that getting accessibility to work for a Slider the way most users of accessibility options would want is currently painful in XF 4.8 (and 5.0 pre) as XF doesn't currently implement AutomationProperties.ValueProperty and the default accessibility handling for a Slider is nasty.

    If you don't want the Slider to support user interactions, you have more choices:

    You could use a Slider as above, but with IsEnabled = false.
    Or, you could use a Layout (probably AbsoluteLayout) with a BoxView being used to represent the slider's thumb.
    Or, you could use the drawing/shapes API to draw things exactly how you want them-

    With any of the options when not supporting user interactions, accessibility support would be different. I suspect the best thing to do (given current limitations in XF 4.8 and 5.0 pre) would be to not include any of the individual elements in the accessibility tree, but to include the Layout containing all of the elements instead. Use a dependency service, custom renderer, or an Effect to populate the native accessibility properties for the Layout, so that the value for the Layout is reported as a combination of the number of kw and the price per kw (if that is what the user would want to know) such as "200 kilowatts at 20 dollars per kilowatt, totaling 400 dollars" (you wouldn't put that in AutomationProperties.NameProperty or AutomationProperties.HelpTextProperty).

    Thanks for the answer! It really helped, i used the non-user responsive advice part and it worked like a charm...
    One thing though, (im not sure if i should open a new question for it?) is that i cant make the boxview move with a converter...and i think that im doing something wrong here:

         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                var val = double.Parse(parameter.ToString());
    
                return $"{val},-5,5,20";
            }
            catch
            {
                return "0.5,-5,5,20";
            }
        }
    

    this is the conversion function... it gets a value from parameter in XAML and converts it to LayoutBounds for the box view.

                    <BoxView
                        BackgroundColor="{StaticResource CurrentStepColorYellow}"
                        AbsoluteLayout.LayoutBounds="{Binding Converter={StaticResource TestStepWidgetConverter}, ConverterParameter='0.6'}"
                        AbsoluteLayout.LayoutFlags="XProportional"                        
                        />
    

    when i debug, it shows a correct value passing and returned, but the view doesnt respond and the boxview looks wrong.

  • JohnHardmanJohnHardman GBUniversity admin

    @xeckuc said:
    One thing though, (im not sure if i should open a new question for it?) is that i cant make the boxview move with a converter...and i think that im doing something wrong here:

         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                var val = double.Parse(parameter.ToString());
    
                return $"{val},-5,5,20";
            }
            catch
            {
                return "0.5,-5,5,20";
            }
        }
    

    this is the conversion function... it gets a value from parameter in XAML and converts it to LayoutBounds for the box view.

                    <BoxView
                        BackgroundColor="{StaticResource CurrentStepColorYellow}"
                        AbsoluteLayout.LayoutBounds="{Binding Converter={StaticResource TestStepWidgetConverter}, ConverterParameter='0.6'}"
                        AbsoluteLayout.LayoutFlags="XProportional"                        
                        />
    

    when i debug, it shows a correct value passing and returned, but the view doesnt respond and the boxview looks wrong.

    As the emphasis of the question is now how to position children in an AbsoluteLayout, I'd be tempted to start a new forum thread and post the entirety of the XAML relating to the AbsoluteLayout and the entirety of the converter.

Sign In or Register to comment.