顶部应用栏/导航栏教程

Question

我尝试在 Windows 新闻应用程序或食品/健康应用程序中创建一个导航栏，从底部滑动或右键单击时出现。

我想用 mvvm 方式来做：

所有视图都定义了一个包含 UserControl 的 ApplicationBar。这包含一个绑定到 ViewModel 的水平 ItemControl。此 ViewModel 包含创建导航按钮所需的所有内容。在每个页面上，我都会告诉 ViewModel 我的页面名称，它会为我提供带有不同颜色标记的当前页面按钮的按钮。

但是现在当我导航时，它在 NavigationHelper 的某个地方失败了，但实际上我不知道出了什么问题，因为我尝试了修复和修复来修复修复...

..我想要的只是一个很好的教程，导航栏是如何工作的。

我下载了这个： http://code.msdn.microsoft.com/windowsapps/ 除了导航栏之外什么都没有。

您将如何做这样的事情的任何来源或示例？

唯一的“奇特”想法是将其绑定到视图模型，否则我会复制粘贴栏的内容。其他任何东西都应该是相同的：导航到应用程序的其他页面/框架/视图的 UserControl-AppBar。

Answer 1

第一次可能会很棘手。由于您想从您的 MVVM 视图模型中驱动导航，因此最简单的方法是让您的导航是动态的，使用 itemscontrol。我想你会有这样的视图模型：

public class TopNavItem
{
    public string Title { get; set; }
    public string SubTitle { get; set; }
    public Type Goto { get; set; }

    DelegateCommand<object> _GotoCommand = null;
    public DelegateCommand<object> GotoCommand
    {
        get
        {
            return _GotoCommand ?? (_GotoCommand = new DelegateCommand<object>
            (
                o => (Window.Current.Content as Frame).Navigate(this.Goto), o => true
            ));
        }
    }
}

public class MainPageViewModel : BindableBase
{
    public MainPageViewModel()
    {
        this.TopNavItems.Add(new TopNavItem { Title = "Page 2", SubTitle = "This is detail", Goto = typeof(MainPage) });
        this.TopNavItems.Add(new TopNavItem { Title = "Page 3", SubTitle = "This is detail", Goto = typeof(MainPage) });
        this.TopNavItems.Add(new TopNavItem { Title = "Page 4", SubTitle = "This is detail", Goto = typeof(MainPage) });
    }

    ObservableCollection<TopNavItem> _TopNavItems = new ObservableCollection<TopNavItem>();
    public ObservableCollection<TopNavItem> TopNavItems { get { return _TopNavItems; } }
}

那么您的 XAML 将是这样的：

<Page.TopAppBar>
    <AppBar Background="Green" BorderBrush="DarkBlue">
        <Grid>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding TopNavItems}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Margin="20,20,0,20"
                                    Command="{Binding GotoCommand}"
                                    Style="{StaticResource TextBlockButtonStyle}">
                                <Grid Width="200"
                                      Height="200"
                                      Background="White">
                                    <Grid VerticalAlignment="Bottom">
                                        <Grid.Background>
                                            <SolidColorBrush Opacity=".5" Color="Black" />
                                        </Grid.Background>
                                        <StackPanel Margin="10,10,20,20">
                                            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{Binding Title}" />
                                            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding SubTitle}" />
                                        </StackPanel>
                                    </Grid>
                                </Grid>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </AppBar>
</Page.TopAppBar>

信不信由你，就是这样。它看起来像这样：

祝你好运！