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 i开发者_如何学JAVAs selected in the parent menu.
I'm open for suggestions.
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.
精彩评论