Question

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.