Wpf UI Control that mimicks iphone vertical menu?

Question

Hi community,

I'm wondering if there is a Wpf control or example that mimics the iphone navigation in its vertical menu. (ex. http://davidcann.com/iphone/). The part that actually interests me is the horizontal scrolling of a new menu once an option is selected in the parent menu.

I'm open for suggestions.

Answer 1

Sounds like a fun project to work on! I do not know of an existing WPF control.

Did you want to mimic the menu's inertia when you flick? If not, it seems like you could just use a listbox where the listitem is just your text + the image in a grid. When you click the listitem, then start a storyboard animation to make another listbox translate to the left. I sort of simulated a really simplistic version without any clipping here, in Blend:

<Window.Resources>
 <Storyboard x:Key="OnSelected1">
  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="next_menu" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
   <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-309"/>
  </DoubleAnimationUsingKeyFrames>
 </Storyboard>
</Window.Resources>
<Window.Triggers>
 <EventTrigger RoutedEvent="Selector.Selected" SourceName="listBoxItem">
  <BeginStoryboard Storyboard="{StaticResource OnSelected1}"/>
 </EventTrigger>
</Window.Triggers>
<Grid x:Name="LayoutRoot">
 <ListBox x:Name="main_menu" HorizontalAlignment="Left" Margin="8,8,0,8" Width="296">
  <ListBoxItem x:Name="listBoxItem" Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
 </ListBox>
 <ListBox x:Name="next_menu" HorizontalAlignment="Right" Margin="0,8,-302,8" Width="298" RenderTransformOrigin="0.5,0.5">
  <ListBox.RenderTransform>
   <TransformGroup>
    <ScaleTransform/>
    <SkewTransform/>
    <RotateTransform/>
    <TranslateTransform/>
   </TransformGroup>
  </ListBox.RenderTransform>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
  <ListBoxItem Content="ListBoxItem"/>
 </ListBox>
</Grid>

My apologies in advance if this isn't what you're really looking for.