Windows Universal Özel SplitView Sorunları Uygulaması

Question

Altta Hamburger Düğmesi olan bir SplitView Menüsü uygulamaya çalışıyorum. VisualStudio tarafından desteklenmektedir Tasarımcısı'nda böyle bakıyor:

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

Sana tip MenueButtons bir ObservableCollection ListView Ürünleri Cilt ediyorum görebileceğiniz gibi:

xaml kodu olmasıdır.

Şimdi böyle App.xaml.cs yuva yapmaya SplitView İçeriği Çerçeve çalışıyorum:

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

Ben MVVM kullanıyorum çünkü Shell.xaml.cs arkasında kod boş Desen. Sorunlar yaşıyorum Şimdi

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

    } 
} 

: Ama burada ShellViewModel kodudur

anasayfa App başlatıldı ama çalışmıyor sonra görüntülenmesi gereken

• Ben Designer'daki occurr etmeyen bir bağlayıcı hatası alıyorum

bağlama hatası:

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

Ve bence SplitView çok küçük olduğu için yuvalanmış çerçeve tüm ekran genişliğini ve yüksekliğini kullanmaz.

Daha Fazla Bilgi: ShellViewModel.cs, ObservableCollection öğelerini içerir. App başlattıktan sonra sadece yeşil hamburger menü butonunu görebiliyorum.

Bu hataları nasıl düzeltebilirim?

Answer 1

Kodunuzda iki sorun vardı.
1) bağlanma için ama senin App.xaml sen rootFrame sıfır çerçeveye datacontext başlatılıyor içeride DataContext olarak ShellViewModel kullanan ilk büyük sorun için Şimdi

SplitView Genişlik
Tanımlı SplitView İçeriği
2) bağlanması. Geçici çözüm, ShellViewmodel numaralı bağlantıya ve geçiş çerçevelerine bağlanmaya devam ediyordu.

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

ve kabuğu kodu arkasında

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

olacak Şimdi Width="200" tam SplitView genişliği çerçevesi ve kaplamayı tanımlamaktadır. Sana onun daha kolay çalışır durumda görmek, böylece OpenPaneLength="200"
Kabuk görebiliyorasnız Workable Sample yüklüyorum

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

kullanmak amacıyla tahmin ediyorum. Kodu tamamen arkasından kaldırmak istiyorsanız şimdi kolayca değişiklik yapabilirsiniz.