Question

我尝试使用底部的汉堡按钮实现SplitView Menue。在由VisualStudio提供支持的Designer中，它看起来像这样：

xaml代码是：

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

正如您所看到的，我将ListView项绑定到MenueButtons类型的ObservableCollection。

现在我尝试将Frame嵌套在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();
        }

Shell.xaml.cs背后的代码是空的，因为我使用的是MVVM模式。但是这里是ShellViewModel的代码：

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

    }
}

现在我遇到的问题：

应用程序启动后应显示主页但不起作用
我收到设计器中没有发生的绑定错误

绑定错误：

错误：BindingExpression路径错误：＆＃39; MenueButtons＆＃39;找不到物业 on＆＃39; Windows.UI.Xaml.Controls.Frame＆＃39;。 BindingExpression：路径=＆＃39; MenueButtons＆＃39;的DataItem =＆＃39; Windows.UI.Xaml.Controls.Frame＆＃39 ;;目标元素是＆＃39; Windows.UI.Xaml.Controls.ListView＆＃39; （名称=＆＃39;空＆＃39）;目标属性是＆＃39; ItemsSource＆＃39; （键入＆＃39;对象＆＃39;）

我认为因为SplitView非常小，所以嵌套框架不会使用整个屏幕的宽度和高度。

更多信息： ShellViewModel.cs包含ObservableCollection。启动应用程序后，我只能看到绿色汉堡包菜单。

如何修复此错误？

Windows Universal实现自定义SplitView问题

0 个答案: