2

Пыталась повторить нестандартное отображения меню как в приложении Вконтакте.

введите сюда описание изображения

Решила разместить контент непосредственно в SplitView.Pane. На раннем этапе разместила Button и прикрутила к нему Event для тестирования содержимого.

<SplitView Name="MainSplitView"
               DisplayMode="CompactOverlay"
               CompactPaneLength="48"
               PaneBackground="Gray" 
               PanePlacement="Right"
               IsPaneOpen="True">
        <SplitView.Pane>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="48"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <RelativePanel Height="48">
                    <Button Name="MainSplitViewButton"
                            Height="48"
                            Width="48"
                            RelativePanel.AlignLeftWithPanel="True"
                            Click="MainSplitViewButton_Click"
                            Background="Gray"
                            FontFamily="Segoe MDL2 Assets"
                            Content="&#xE700;"/>
                </RelativePanel>
                <Frame Name="MainFrame"
                       Grid.Row="1"/>
            </Grid>
        </SplitView.Pane>
        <SplitView.Content>
            <Frame Name="MenyFrame"/>
        </SplitView.Content>
    </SplitView>

Столкнулась с тем, что Button корректно не отображается в компактном режиме SplitView.

введите сюда описание изображения

Поиск примеров и исходных кодов с похожей реализацией меню ничего не дал.
Вопрос к более опытным разработчикам: как в таком случае корректно произвести разметку макета, чтобы содержимое не смещалось в SplitView.Pane?

2
  • Не до конца понятен вопрос, приведите эскиз желаемого результата 9 апр 2017 в 12:34
  • @Андрей Постаралась нарисовать эскиз
    – ammystr
    9 апр 2017 в 13:15

1 ответ 1

1

Дело в том, что SplitView.Pane не "выезжает" из-за границы экрана, как вы могли подумать, а, так сказать, "раскручивается" (ну типа как ковровая дорожка)

Немного изменил вашу разметку:

<SplitView Name="MainSplitView"
           DisplayMode="CompactOverlay"
           CompactPaneLength="48"
           PaneBackground="Gray" 
           PanePlacement="Right"
           IsPaneOpen="True">
    <SplitView.Pane>
        <StackPanel>
            <Button Name="MainSplitViewButton"
                        Height="48"
                        Width="48"
                        RelativePanel.AlignLeftWithPanel="True"
                        Click="MainSplitViewButton_Click"
                        Background="Gray"
                        FontFamily="Segoe MDL2 Assets"
                        Content="&#xE700;"
                        HorizontalAlignment="Right"/>
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <Frame Name="MenyFrame"/>
    </SplitView.Content>
</SplitView>

Обратите внимание на добавленную строчку HorizontalAlignment="Right" - именно благодаря ей кнопку видно при закрытой панели. Правда при открытой панели кнопка так же справа, но как это изменить, я предлагаю вам додумать самостоятельно.

введите сюда описание изображениявведите сюда описание изображения

1
  • Очень признательна за ваш ответ. Честно говоря я и не думала, что мне помогут так быстро).
    – ammystr
    9 апр 2017 в 14:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.