Wheel Selector?

How-to Discussions
1

Hey, I was just wondering if Fuse has built in support for this type of selector, and if not, if anyone has made a working one? I know how to do drop-down selectors and whatnot, but a wheel selector would just be perfect for what I am trying to do. Here’s an example of what they look like.

Ios_4_iphone_picker_example_layout

2

Hello! I don’t think Fuse has a built-in component, but I’ve made something like that:

<DockPanel ux:Name="_OptionSelectorView" Visibility="Hidden">
  <WhileTrue Value="{OptionSelectorVisibility}">
	<Change _OptionSelectorViewBackground.Opacity="0.75" Duration="0.25" />
	<Move Target="_OptionSelectorViewSelector" Y="-0.5" RelativeTo="ParentSize" Duration="0.5" Easing="ExponentialInOut" />
	<Change _OptionSelectorView.Visibility="Visible" />
  </WhileTrue>
  <DockPanel Height="50%" Y="100%" ux:Name="_OptionSelectorViewSelector" Background="White" ClipToBounds="True">
	<Panel Width="100%" Height="50" Alignment="Top" Background="#FFFFFF00">
	  <Text ux:Name="_optionSelectorButton" Font="SFProRegular" TextColor="#40CC4E" FontSize="20" Alignment="CenterRight" X="-20">Ok</Text>
	  <Clicked>
		<Callback Handler={processOptionSelector} />
	  </Clicked>
	  <WhilePressed>
		<Change Target="_optionSelectorButton.Color" Value="Black" DurationBack="0.1" />
	  </WhilePressed>
	</Panel>
	<Panel Width="80%" Height="100%" X="10%" Alignment="Bottom" Background="White">
	  <LinearNavigation ActiveIndex="{OptionSelectorCurrentOption}">
		<NavigationMotion Overflow="Elastic" GotoDuration="0" />
	  </LinearNavigation>
		<SwipeNavigate SwipeDirection="Up" LengthNode="_LengthNode" />
	  <Each Items="{OptionSelectorOptions}">
		<Option OptionTitle="{title}">
		  <WhileString Value="{OptionSelectorCurrentOption}" Equals="{runner}">
			<Clicked>
			  <Callback Handler={processOptionSelector} />
			</Clicked>
		  </WhileString>
		</Option>
	  </Each>
	</Panel>
  </DockPanel>
  <Rectangle ux:Name="_OptionSelectorViewBackground" Width="100%" Height="120%" Background="Black" Opacity="0" Clicked="{closeOptionSelector}" />
</DockPanel>

That UX snippet requires some JS to work, but hope that gives you some kind of an idea how to make one.

3

Oh yeah I forgot to paste the Option class:

<Panel Width="100%" Height="30" Background="White" Alignment="Center" ux:Class="Option">
	<string ux:Property="OptionTitle" />
    <Clicked>
			<NavigateTo Target="this"/>
		</Clicked>
    <EnteringAnimation Scale="0.1">
      <Move Y="-8" RelativeTo="Size" Easing="QuadraticOut" />
      <Scale Factor="-0.2" />
    </EnteringAnimation>
    <ExitingAnimation Scale="0.1">
      <Move Y="8" RelativeTo="Size" Easing="QuadraticOut" />
      <Scale Factor="-0.2" />
    </ExitingAnimation>
    <WhileActive>
      <Change _optionText.Color="#000000FF" />
    </WhileActive>
    <Text ux:Name="_optionText" Font="SFProLight" FontSize="20" TextAlignment="Center" Alignment="Center" Color="#00000033">{Property OptionTitle}</Text>
</Panel>
4

Thanks! I also found another thread that had a similar one. This should be a good start.