상단 AppBar/NavigationBar에 대한 자습서

Question

Windows 뉴스 앱이나 음식/건강 앱과 같은 탐색 모음을 만들려고했는데 하단에서 스 와이프하거나 오른쪽 클릭을하면 나타납니다.

알레보기는 UserControl이 포함 된 ApplicationBar을 정의

나는 그것에게 MVVM 방향을하고 싶었다. 이것은 ViewModel에 바인딩 된 수평 ItemControl을 포함합니다. 이 ViewModel에는 탐색 버튼을 만드는 데 필요한 모든 요소가 포함되어 있습니다. 모든 페이지에서 ViewModel에 내 페이지의 이름을 말하면 현재 페이지의 버튼에 다른 색상으로 표시된 버튼이 있습니다.

하지만 지금은

내가 원하는 ..all

좋은 튜토리얼입니다 ... 그것은 NavigationHelper 어딘가에 실패 실제로 내가 수정을 시도하기 때문에 잘못 및 수정 사항을 해결하기 위해 수정 무엇을 말할 수 없다 탐색 할 때 내비게이션 막대가 작동하는 방법.

나는 다운로드 : http://code.msdn.microsoft.com/windowsapps/ 그리고 탐색 바를 제외한 모든 것이있다.

모든 소스 또는 이와 유사한 방법을 사용하는 예일 수 있습니다.

유일한 환상적인 아이디어는 뷰 모델에 바인딩하는 것입니다. 그렇지 않으면 바의 내용을 복사하여 붙여 넣기 때문입니다. 다른 것은 동일해야합니다 : 앱의 다른 페이지/프레임 /보기로 이동하는 UserControl-AppBar.

Answer 1

처음 까다로울 수 있습니다. MVVM viewmodel에서 nav를 구동하려는 경우 itemscontrol을 사용하여 nav를 동적으로 유지하는 것이 가장 쉽습니다. 난 당신이 뷰 모델과 같은 것 상상 :

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> 

이 믿거 나 말거나, 그게입니다. 그 결과는 다음과 같습니다

행운을 빕니다!