2016-04-10 15 views
0

私は、下部にハンバーガーボタンを持つSplitView Menueを実装しようとしています。 VisualStudioをによって供給デザイナでは、それは次のように探しています:あなたは私はタイプMenueButtonsののObservableCollectionにリストビューアイテムをバインドしています見ることができるようにWindowsユニバーサルカスタムスプリットビューの問題を実装する

<Page.Resources> 
     <ValueConverters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> 
     <vm:ShellViewModel x:Key="ShellVM"/> 
    </Page.Resources> 
    <Page.DataContext> 
     <Binding Source="{StaticResource ShellVM}"/> 
    </Page.DataContext> 
    <Grid Background="Transparent"> 
     <SplitView x:Name="SplitView" IsPaneOpen="True" PaneBackground="Gray" Content="{Binding}" DisplayMode="Inline" VerticalAlignment="Bottom" Margin="0,0,0,40" Width="200" HorizontalAlignment="Left"> 
      <SplitView.Pane> 
       <ListView ItemsSource="{Binding MenueButtons}" Height="Auto"> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <StackPanel Orientation="Horizontal" Height="Auto"> 
           <Grid Width="8" Background="Yellow" HorizontalAlignment="Left" Height="20" Margin="-15,4,0,0" Visibility="{Binding Highlighted, Converter={StaticResource BooleanToVisibilityConverter}}"/> 
           <RadioButton FontFamily="Segoe MDL2 Assets" Style="{StaticResource TextBlockButtonStyle}" Content="{Binding SymbolIndex}" Margin="-10,0,14,0"/> 
           <TextBlock Text="{Binding Description}" Margin="-10,5,4,0"/> 
          </StackPanel> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
       </ListView> 
      </SplitView.Pane> 
     </SplitView> 
     <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="40" Foreground="White" FontSize="20" 
      Width="50" Background="Green"/> 
    </Grid> 

enter image description here

XAMLコードということです。

は今、私はこのようなApp.xaml.csでSplitViewコンテンツに巣にフレームをしようとしている:

protected override void OnLaunched(LaunchActivatedEventArgs e) 
     { 

      Frame rootFrame = Window.Current.Content as Frame; 

      // Do not repeat app initialization when the Window already has content, 
      // just ensure that the window is active 
      if (rootFrame == null) 
      { 
       var shell = Window.Current.Content as Shell; 
       rootFrame = null; 
       if (shell == null) 
       { 
        shell = new Shell(); 
        if (rootFrame == null) 
        { 
         rootFrame = new Frame(); 
         rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0]; 

         rootFrame.NavigationFailed += OnNavigationFailed; 

         if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) 
         { 
         } 
        } 

        shell.DataContext = rootFrame; 

        Window.Current.Content = shell; 
       } 
      } 

      if (rootFrame.Content == null) 
      { 
       // When the navigation stack isn't restored navigate to the first page, 
       // configuring the new page by passing required information as a navigation 
       // parameter 
       rootFrame.Navigate(typeof(MainPage), e.Arguments); 
      } 
      // Ensure the current window is active 
      Window.Current.Activate(); 
     } 

私はMVVMを使用していますので、Shell.xaml.csの背後にあるコードは空ですパターン。

  • をアプリケーションが起動された後のメインページが表示されるはずですが、それは
  • を動作しません。私がいる問題に今

    public class ShellViewModel:INotifyPropertyChanged 
    { 
        #region INotifyPropertyChanged Members 
        private ObservableCollection<Models.SplitView.MenueButton> _menueButtons; 
    
        public ObservableCollection<Models.SplitView.MenueButton> MenueButtons 
        { 
         get { return _menueButtons; } 
         set { _menueButtons = value; OnPropertyChanged("MenueButtons"); } 
        } 
        #endregion INotifyPropertyChanged Members 
    
        public event PropertyChangedEventHandler PropertyChanged; 
        private void OnPropertyChanged(string propertyName) 
        { 
         if (PropertyChanged != null) 
         { 
          PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
         } 
        } 
        public ShellViewModel() 
        { 
         MenueButtons = new ObservableCollection<Models.SplitView.MenueButton>(); 
         MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Statistic", SymbolIndex = "\uEA40" }); 
         MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Settings", SymbolIndex = "\uE713" }); 
         MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Home", SymbolIndex = " \uE80F", Highlighted = true }); 
    
        } 
    } 
    

    :しかし、ここでShellViewModelからのコードがあります

  • 私はデザイナーで回の出現しません結合エラーを取得しています

結合エラー:

Error: BindingExpression path error: 'MenueButtons' property not found on 'Windows.UI.Xaml.Controls.Frame'. BindingExpression: Path='MenueButtons' DataItem='Windows.UI.Xaml.Controls.Frame'; target element is 'Windows.UI.Xaml.Controls.ListView' (Name='null'); target property is 'ItemsSource' (type 'Object')

SplitViewが非常に小さいので、入れ子にされたフレームは画面の幅と高さ全体を使用しないと思います。

詳細情報: ShellViewModel.csにはObservableCollectionが含まれています。 Appを起動すると、緑色のハンバーガーメニューボタンしか表示されません。

このエラーを解決するにはどうすればよいですか?

+0

シェルページの背後にコードを提供する必要があります。 _作業可能なサンプル_は、エラーを見つける方が簡単です。 – Jerin

+0

@Jerin Ok投稿を更新します –

答えて

1

コードに2つの問題がありました。
1)あなたが結合のためではなく、あなたのApp.xamlあなたがrootFrameのヌルフレームにDataContextのを初期化している内側のDataContextとしてShellViewModelを使用している最初の主要な問題のための今すぐ

Splitview幅
を定義Splitviewコンテンツ
2)の結合。回避策は、ShellViewmodelにバインディングを保持し、フレームを渡すことです。
背後

protected override void OnLaunched(LaunchActivatedEventArgs e) 
     { 
      Frame rootFrame = Window.Current.Content as Frame; 

      // Do not repeat app initialization when the Window already has content, 
      // just ensure that the window is active 
      var shell = Window.Current.Content as Shell; 
      if (rootFrame == null) 
      { 
       rootFrame = null; 
       if (shell == null) 
       { 

        if (rootFrame == null) 
        { 
         rootFrame = new Frame(); 
         rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0]; 

         rootFrame.NavigationFailed += OnNavigationFailed; 

         if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) 
         { 
         } 
        } 

        //shell.NewFrame = rootFrame; 
        shell = new Shell(rootFrame); 
        Window.Current.Content = shell; 
       } 
      } 

      if (rootFrame.Content == null) 
      { 
       // When the navigation stack isn't restored navigate to the first page, 
       // configuring the new page by passing required information as a navigation 
       // parameter 
       rootFrame.Navigate(typeof(MainPage), e.Arguments); 
      } 
      // Ensure the current window is active 
      Window.Current.Activate(); 
     } 

とシェルコードが

public Shell(Frame frame) 
     { 
      this.InitializeComponent(); 
      SplitViewNew.Content = frame; //this is SplitviewName  
     } 

なる今Width="200"は、完全なSplitview幅フレーム及びオーバーレイを定義します。私はその簡単には労働条件でそれを見るためになるように、私はWorkable Sampleをアップロードしていますが

<Page.DataContext> 
     <vm:ShellViewModel/> 
    </Page.DataContext> 
    <Grid Background="Transparent"> 
     <SplitView x:Name="SplitViewNew" IsPaneOpen="True" PaneBackground="Gray" DisplayMode="Inline" VerticalAlignment="Bottom" Margin="0,0,0,40" HorizontalAlignment="Left"> 
      <SplitView.Pane> 
       <Grid> 
        <ListView ItemsSource="{Binding MenueButtons}" Height="Auto"> 
         <ListView.ItemTemplate> 
          <DataTemplate> 
           <StackPanel Orientation="Horizontal" Height="Auto"> 
            <Grid Width="8" Background="Yellow" HorizontalAlignment="Left" Height="20" Margin="-15,4,0,0" /> 
            <RadioButton FontFamily="Segoe MDL2 Assets" Style="{StaticResource TextBlockButtonStyle}" Content="{Binding SymbolIndex}" Margin="-10,0,14,0"/> 
            <TextBlock Text="{Binding Description}" Foreground="White" Margin="-10,5,4,0"/> 
           </StackPanel> 
          </DataTemplate> 
         </ListView.ItemTemplate> 
        </ListView> 
       </Grid> 
      </SplitView.Pane>   
     </SplitView> 
     <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="40" Foreground="White" FontSize="20" 
      Width="50" Background="Green"/> 
    </Grid> 
</Page> 

OpenPaneLength="200"
シェルビューを使用することを目的と推測しています。コードを完全に削除したい場合は、変更を簡単に行うことができます。

+0

サンプル –

+0

がすごくうまくいきました。私は個人的には、小さなモバイルデバイスのハンバーガーボタンを左下に置くとかなり便利だと思っており、素晴らしいと思っています:D ty again –

+0

それは助けてくれたことを知ってうれしいです。ボトムアップバーを使用するオプションがあるので、ほとんどのハンバーガーメニューは下部に配置されません。上のハンバーガーは、簡単にアクセスできるようにページ下部のボタンにページ固有のボタンを配置するのに役立ちます。 – Jerin