【问题标题】:UWP: Issues with SplitView with VisualStateManagerUWP:使用 VisualStateManager 的 SplitView 问题
【发布时间】:2015-12-29 11:01:10
【问题描述】:

在尝试创建示例(而且很简单!)UW 应用程序时,我一直在努力使用SplitView 控件。首先是问题列表,然后是代码:

  1. 我正在使用VisualStateManager 来控制DisplayStatePane 的可见性。所以我不在 XAML 中使用相应的属性(DisplayModeIsPaneOpen)。
    面临的问题:
    a. 有时 设计器显示 Exception from HRESULT: 0x88000FA8
    b. 窗格始终处于 Closed 状态 - 在设计器和运行时。
    c.我也遇到了一个运行时异常,显示 Debugger 代码,但在重新启动 Visual Studio 后它停止了。
  2. 如果我在 XAML 标记中添加两个属性(注释掉 VisualStateManager),那么对于以下组合,Hamburger 按钮不起作用:IsPaneOpen="False" DisplayMode="Overlay"Hamburger 按钮的代码是普通的 - MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;

标记:

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="721" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="False" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
            <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
                      Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
        </Button>
        <TextBlock RelativePanel.RightOf="HamBurgerButton" 
                   Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
                   Text="Title"/>
        <SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
                   RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
            <SplitView.Pane>
                <StackPanel Orientation="Horizontal" Background="Gray">
                    <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                    <TextBlock Text="About"/>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                              HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                    <Frame x:Name="ContentFrame"/>
                </ScrollViewer>
            </SplitView.Content>
        </SplitView>
    </RelativePanel>

那么有人可以确认这些问题最终可以复制(即它们是错误)还是我在某处错了或有可用的解决方法?

【问题讨论】:

    标签: xaml uwp visualstatemanager


    【解决方案1】:

    此代码将起作用...

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
            <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
                  Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
        </Button>
        <TextBlock RelativePanel.RightOf="HamBurgerButton" 
               Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
               Text="Title"/>
        <SplitView x:Name="MainSplitView" IsPaneOpen="False" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
               RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
               RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
            <SplitView.Pane>
                <StackPanel Orientation="Horizontal" Background="Gray">
                    <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                    <TextBlock Text="About"/>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                          HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                    <Frame x:Name="ContentFrame"/>
                </ScrollViewer>
            </SplitView.Content>
        </SplitView>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="721" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                        <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                        <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </RelativePanel>
    

    当宽度在 0 到 548 之间时,汉堡按钮不起作用,因为模式设置为覆盖...实际上窗格已在框架外打开和关闭...这就是为什么它不可见,这让您认为该按钮不起作用。这不是 splitview 中的错误...如果它不起作用评论...会帮助你...

    【讨论】:

    • 是的,此代码确实有效,谢谢您并将其标记为答案。但另一个无法解释的事情是,我从 Github 下载了 UWP 示例并运行了示例 XAMLResponsiveTechniques。这具有 0->548 的叠加模式,并且效果很好!正如您所指出的,是否有任何 z-index 类型的属性可以使面板覆盖在框架上?
    【解决方案2】:

    我认为您的自适应触发器毕竟不起作用。将它放在 relativePanel 中,看看它是否被触发。

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
            <FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}" 
                      Glyph="&#x2261;" FontSize="32" Margin="0,-8,0,0"/>
        </Button>
        <TextBlock RelativePanel.RightOf="HamBurgerButton" 
                   Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
                   Text="Title"/>
        <SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
                   RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
            <SplitView.Pane>
                <StackPanel Orientation="Horizontal" Background="Gray">
                    <AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
                    <TextBlock Text="About"/>
                </StackPanel>
            </SplitView.Pane>
            <SplitView.Content>
                <ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
                              HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
                    <Frame x:Name="ContentFrame"/>
                </ScrollViewer>
            </SplitView.Content>
        </SplitView><VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="721" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Inline" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="548" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="True" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
                    <Setter Target="MainSplitView.IsPaneOpen" Value="False" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    </RelativePanel>
    

    【讨论】:

    • 试过...同样的结果! 1a 和 1c 已停止,但 1b 和 2 - 没有变化!
    • 我还尝试将 Target 版本从 build 10586 降级到 build 10240,但没有成功。
    • 检查 xaml 中提到的属性...我的意思是在 xaml 中将 ispaneopen 选项设置为 false 或 true。当最小宽度>0时,它会自动改变。
    • 我发现以下博客提到这是SplitView 中的一个错误,这是真的吗? nicksnettravels.builttoroam.com/post/2015/12/06/…
    • 对此我不确定。我一直在使用 splitview 并且到目前为止没有遇到任何问题。看看这个。 Guidelines for SplitView...还在 xaml 中为属性 ispaneopen 和 displaymode 设置值。
    猜你喜欢
    • 2016-03-06
    • 1970-01-01
    • 1970-01-01
    • 2020-08-12
    • 1970-01-01
    • 2021-01-08
    • 2023-04-05
    • 2018-06-22
    • 2020-01-23
    相关资源
    最近更新 更多