Question

我尝试创建一个类似于Windows新闻应用程序或Food / Health-App的导航栏，从底部或右键单击时显示。

我想用mvvm-way做这个：

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

但是现在当我导航它在NavigationHelper中的某个地方失败但实际上我无法告诉我出了什么问题，因为我尝试修复并修复了修复...

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

我下载了这个： http://code.msdn.microsoft.com/windowsapps/ 除了导航栏之外别无其他。

任何来源或可能是您如何做这样的事情的一个例子？

唯一的＃34;幻想＆＃34;想法是将它绑定到视图模型，否则我会复制粘贴条形图的内容。其他任何东西应该是相同的：UserControl-AppBar导航到应用程序的其他页面/框架/视图。

Answer 1

第一次这可能很棘手。由于您想要从MVVM视图模型中驱动导航，最简单的方法是使用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; } }
}

然后你的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>

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

enter image description here

祝你好运！

顶级应用栏/导航栏的教程

1 个答案: