Windows store apps 顶级AppBar/NavigationBar教程

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

我想用mvvm的方式来做：

所有视图定义一个包含UserControl的应用程序栏。它包含绑定到ViewModel的水平ItemControl。此ViewModel包含创建导航按钮所需的所有内容。在每个页面上，我都会告诉ViewModel我的页面名称，它会给我一些按钮，当前页面的按钮用不同的颜色标记

但是现在当我导航时，它在NavigationHelper中的某个地方失败了，但实际上我无法判断出哪里出了问题，因为我尝试了一次又一次的修复

…我想要的只是一个导航栏如何工作的好教程

我下载了： 除了导航栏，这里什么都有

有没有关于你将如何做这件事的资料或例子

---

唯一“奇特”的想法是将其绑定到viewmodel，否则我会复制粘贴条的内容。其他任何东西都应该是一样的：一个用户控件AppBar，它可以导航到应用程序的其他页面/框架/视图。

第一次使用它可能会很棘手。由于要从MVVM viewmodel驱动导航，最简单的方法是使用itemscontrol使导航处于动态状态。我想您会有这样一个viewmodel：

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; } }
}

<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>

公共类TopNavItem
{
公共字符串标题{get；set；}
公共字符串字幕{get；set；}
公共类型Goto{get；set；}
DelegateCommand _GotoCommand=null；
公共DelegateCommand GotoCommand
{
得到
{
返回_GotoCommand？？？（_GotoCommand=newdelegatecommand）
(
o=>（Window.Current.Content作为框架）。导航（this.Goto），o=>true
));
}
}
}
公共类MainPageViewModel:BindableBase
{
公共MainPageViewModel（）
{
this.TopNavItems.Add（新的TopNavItem{Title=“Page 2”，SubTitle=“this is detail”，Goto=typeof（MainPage）}）；
this.TopNavItems.Add（新的TopNavItem{Title=“Page 3”，SubTitle=“this is detail”，Goto=typeof（MainPage）}）；
this.TopNavItems.Add（新的TopNavItem{Title=“Page 4”，SubTitle=“this is detail”，Goto=typeof（MainPage）}）；
}
ObservableCollection_TopNaviItems=新的ObservableCollection（）；
公共ObservableCollection TopNaviItems{get{return}
}

那么您的XAML应该是这样的：

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; } }
}

<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>

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

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; } }
}

<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>

---

祝你好运

看起来很不错！我将尝试一下，并在这里发布我的结果！thx到目前为止：）这看起来不错，但我不知道在Goto部分中放什么。我尝试了

App.RootFrame.Navigate（Type.GetType（“我的应用程序”+btn.Tag））带有button.Tag，其中包含我要打开的页面的名称。但这不起作用：（好的，Goto部分有一半清楚。我仍然不知道在DelegateCommand中放什么。它是一个占位符还是要保持这样？好的，它开始工作了。需要一些研究，得到了一个工作的DelegateCommand实现只是为了再次得到相同的错误。-NavigationHelper.cs（自动生成的文件）崩溃于此：
frameState[\u pageKey]=pageState；
，因为我的帧没有键：$Outcommented.Works now:）基本上你的解决方案是正确的，它帮助我->标记为anwer:）Thx！