Custom Vertical Slider Control

How-to Discussions
1

Hi, I am starting out trying to build a custom vertical slider. For now I’ve tried to just get the basic behaviour to work by modifying the example from https://www.fusetools.com/docs/fuse/controls/rangecontrol

Here is what I’ve been able to cobble together in MainView.ux so far, and the questions are below that…

<App>
	<ClientPanel Background="0.8,0.8,0.8,1">
		<StackPanel Background="#0f0">
			<RangeControl ux:Class="CustomSlider" Padding="16,2,16,2" Margin="2" Background="#f00" Alignment="Bottom" Height="400" Width="35">
			    <LinearRangeBehavior Orientation="Vertical" />
				    <Panel>
				        <Circle ux:Name="thumb" Alignment="Top" Color="#ffffff" Width="28" Height="28" />
				    </Panel>
				    <Rectangle Layer="Background" Color="#aaaaaa" CornerRadius="45" />
			    <ProgressAnimation>
			        <Move Target="thumb" Y="1" RelativeTo="ParentSize" />
			    </ProgressAnimation>
			</RangeControl>

			<CustomSlider />
		</StackPanel>

	</ClientPanel>
</App>

Questions:

  1. The code below almost works when I have Alignment=“Top” for the Circle element - except that the circle falls slightly below the bottom of the slider… How can I get it to fit within the bounds of the rectangle properly as it does with the regular horizontal example?

  2. I would actually like to have the “thumb” (i.e. the Circle element) start at the bottom of the slider rather than at the top but if I just change the alignment to Alignment=“Bottom”, then the slider seems to go from the bottom of the screen to the bottom of the slider… Is there a way to make that work?

  3. I am currently hard-coding the width and height of the RangeControl element so that the “thumb” fits inside of it. Is there a way to have the width automatically adjust to fit the thumb instead?

Thanks for any help you could provide!

2

  1. The example used a combination of Padding and Anchor to do this. In your example switch your padding to 2,16,2,16 for the vertical layout, and add Anchor="50%,50%" to the thumb.

  2. The top-to-bottom range is unfortunately hard-coded now. I’ll make a feature request to make that configurable.

However, you could just transform the whole thing with a <Rotation DegreesX="180"/>. Whether this works depends on what exactly is in your final control (it flips the visuals, but if they are symmetrical it won’t matter).

  1. You can simply remove the Width from the CustomSlider class. If you then do <CustomSlider Alignment="Center"/> you’ll find the control collapses to the size of the thumb.
3

Thanks - that seems to have solved all the problems I was having. Luckily for me, I do expect the slider to be symmetrical so the workaround for 2) does work for me.

However, just to see what happened, I also tested it with Alignment=“VerticalCenter” and that definitely would appear to be a problem that may not be fixable with a workaround. That is, if someone wanted a vertical slider to start in the middle and allow the user to either move the thumb toward the top of the slider or toward the bottom, I think that would require a change to the framework to work. I don’t know how common of a use-case that might be, but it’s probably worth fixing at some point…

Anyway, for completeness in case this helps out someone else in the future, here is the working code I’ve got after incorporating your suggestions:

<App>
	<ClientPanel Background="0.8,0.8,0.8,1">
		<StackPanel Background="#0f0">
			<RangeControl ux:Class="CustomSlider" Padding="2,16" Margin="2" Background="#f00" Alignment="Bottom" Height="400">
				<Rotation DegreesX="180"/>
			    <LinearRangeBehavior Orientation="Vertical" />
				    <Panel>
				        <Circle ux:Name="thumb" Anchor="50%,50%" Alignment="Top" Color="#fff" Width="28" Height="28" />
				    </Panel>
				    <Rectangle Layer="Background" Color="#aaaaaa" CornerRadius="45" />
			    <ProgressAnimation>
			        <Move Target="thumb" Y="1" RelativeTo="ParentSize" />
			    </ProgressAnimation>
			</RangeControl>

			<CustomSlider Alignment="Center"/>
		</StackPanel>

	</ClientPanel>
</App>