UWP: проблемы с SplitView с VisualStateManager

Я боролся с SplitView контролем, пытаясь создать образец (и простой!) UW-приложения. Сначала список проблем, а затем код:

  1. Я использую VisualStateManager для управления видимостью DisplayState и Pane. Поэтому я не использую соответствующие атрибуты (DisplayMode и IsPaneOpen) в XAML.
    Возникающие проблемы:
    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>

Так может ли кто-нибудь подтвердить, что эти проблемы могут быть воспроизведены на их стороне (т.е. они являются ошибками), или что я где-то ошибаюсь, или есть обходные пути?


person NP3    schedule 29.12.2015    source источник


Ответы (2)


Этот код будет работать ...

<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 ... Если не работает комментарий ... поможет тебе ...

person Razor    schedule 01.01.2016
comment
Да, этот код действительно работает, спасибо и помечаю это как ответ. Но еще одна необъяснимая вещь: я скачал образцы UWP с Github и запустил их XAMLResponsiveTechniques. У этого есть режим наложения для 0- ›548, и он отлично работает! Как вы указываете, есть ли какое-нибудь z-index свойство, которое будет накладывать панель на фрейм? - person NP3; 01.01.2016

Я не думаю, что ваш Adaptive Trigger все-таки работает. Поместите его в 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>
person Razor    schedule 30.12.2015
comment
Пробовал ... результат тот же! 1a и 1c остановились, а 1b и 2 - без изменений! - person NP3; 30.12.2015
comment
Я также попытался понизить версию Target со сборки 10586 до сборки 10240, но безуспешно. - person NP3; 30.12.2015
comment
проверьте атрибуты, упомянутые в xaml ... я имею в виду, установите для параметра ispaneopen значение false или true в xaml. Когда минимальная ширина> 0, она автоматически изменится. - person Razor; 30.12.2015
comment
Я нашел следующий блог, в котором упоминается, что это ошибка в SplitView, это правда? nicksnettravels.builttoroam.com/post/2015/12/06/ - person NP3; 30.12.2015
comment
Я не уверен в этом. Я использую splitview и пока не сталкивался с какими-либо проблемами. Посмотри на это. Рекомендации для SplitView ... также установите значения для атрибуты ispaneopen и displaymode в xaml. - person Razor; 30.12.2015
comment
Хорошо, это означает, что с разметкой все в порядке ... Возможно, моя среда разработки. Вот почему я упомянул VS 2015 Update 1, поскольку один из моих друзей, не установивший Update 1, также не может воспроизвести это. Вот почему мне было интересно, внесло ли обновление 1 эту ошибку. В любом случае, обновлю, если что-то найду. - person NP3; 30.12.2015
comment
Установка двух атрибутов (любой комбинации) в XAML с разметкой VisualStateManager как есть в RelativePanel не имеет значения :( - person NP3; 30.12.2015