Question

Я действительно новичок в программировании в целом, и я пытаюсь разобраться с XAML / UWP / C #.

Я пытаюсь создать приложение в Visual Studio, и япытаюсь правильно использовать фрейм в SplitView / SplitView.Content для загрузки других страниц одним нажатием кнопки из моей навигации.Я построил свои страницы в сетках, и что бы я ни делал, фрейм, который у меня есть, полностью не в центре и загружает страницы не в центре

Я действительно новичок в этом и был бы признателен за любую помощь, которая могла быбыть даным, но, пожалуйста, простите мою наивность с этим - я действительно новичок и самоучка, поэтому мне есть чему поучиться.

Я пытался использовать сетки, а также вертикальные и горизонтальные выравнивания, чтобы центрироватькадр, но мне совсем не повезло.

<Grid>
    <SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="250">
        <!--#region Navigation-->
        <SplitView.Pane>
            <StackPanel Background="#2A2939" Orientation="Vertical">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50" />
                        <RowDefinition Height="15" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="50" />
                        <RowDefinition Height="15" />
                    </Grid.RowDefinitions>
                    <!-- Navigation -->
                    <StackPanel Grid.Column="0" Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="NavigationButton" Height="50" Background="Transparent" Click="Navigation_Click">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navburger-white.png" Width="22" Height="22" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Margin="0,0,0,5" Text="Navigation" Foreground="#FFF" FontFamily="Segoe UI" FontSize="22" FontWeight="Normal" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center">
                        <Line Opacity="0.3" Stroke="#FFF" X1="300" Y1="0" X2="0" Y2="0" StrokeThickness="1"/>
                    </StackPanel>
                    <!-- Home -->
                    <StackPanel Grid.Column="0" Grid.Row="2" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="HomeButton" Click="HomeButton_Click" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navhome-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Home" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Medical -->
                    <StackPanel Grid.Column="0" Grid.Row="3" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MedicalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmedical-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Medical" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Dental -->
                    <StackPanel Grid.Column="0" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="DentalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navdental-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Dental" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Mental & Occupational -->
                    <StackPanel Grid.Column="0" Grid.Row="5" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MentalAndOccupationalButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmental-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Mental &amp; Occupational" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Rehabilitation -->
                    <StackPanel Grid.Column="0" Grid.Row="6" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="RehabilitationButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navrehab-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Rehabilitation" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Radiology -->
                    <StackPanel Grid.Column="0" Grid.Row="7" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="RadiologyButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navradiation-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Radiology" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Practice Management -->
                    <StackPanel Grid.Column="0" Grid.Row="8" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="PracticeManagementButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navpractice-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Practice Management" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <!-- Medicines Management -->
                    <StackPanel Grid.Column="0" Grid.Row="9" Orientation="Horizontal" VerticalAlignment="Center">
                        <Button x:Name="MedicinesManagementButton" Height="50" Background="Transparent">
                            <Grid Width="250">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Column="0" Grid.Row="0" Source="ms-appx:///Assets/Icons/navmedicine-grey.png" Width="18" Height="18" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                <TextBlock Grid.Column="2" Grid.Row="0" Text="Medicines Management" Foreground="#ADB2BF" FontFamily="Segoe UI" FontSize="18" FontWeight="Light" Typography.Capitals="AllSmallCaps" HorizontalAlignment="Left" VerticalAlignment="Center" TextAlignment="Left" TextWrapping="WrapWholeWords"/>
                            </Grid>
                        </Button>
                    </StackPanel>
                    <StackPanel Grid.Column="0" Grid.Row="10" Orientation="Horizontal" VerticalAlignment="Center">
                        <Line Opacity="0.3" Stroke="#FFF" X1="300" Y1="0" X2="0" Y2="0" StrokeThickness="1"/>
                    </StackPanel>
                </Grid>
            </StackPanel>
        </SplitView.Pane>
        <!--#endregion-->
        <!--#region Main Panel-->
        <SplitView.Content>
            <Frame x:Name="MainPage_Frame" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center">

            </Frame>
        </SplitView.Content>
        <!--#endregion-->
    </SplitView>
</Grid>

Извините за приведенный выше дамп кода, но я действительно не знаю, где я иду не так

Во втором регионе - главной панели - я не могу заставить Frame (x: Name = "MainPage_Frame") централизовать страницы, которые он должен загружать при нажатии кнопок в навигации (первый регион - навигация).

Нажатие кнопки работает корректно при загрузке моей другой тестовой страницы, но, как уже говорилось, проблема заключается в том, что страница загружается полностью не по центру, где я ожидаю, что кадр будет.

Спасибозаранее за вашу помощь!

ketan · Answer 1 · 23 сентября 2019

Ваша целевая версия проекта должна быть 1803. Чтобы проверить целевую версию проекта, щелкните правой кнопкой мыши проект -> свойства -> Приложение -> Таргетинг, выберите целевую версию 1803, затем сохраните и включите эту строку на главной странице xmlns:Windows10version1803="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 6)"

    <Page
    x:Class="stackoverflowquestions.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stackoverflowquestions"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Windows10version1803="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 6)"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid>
            <!--Navigation View Style-->
            <Grid.Resources>
                <SolidColorBrush x:Key="NavigationViewDefaultPaneBackground" Color="#293857"/>
                <SolidColorBrush x:Key="NavigationViewItemBackground" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForeground" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundPointerOver" Color="#d6df27"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundPointerOver" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemForegroundPressed" Color="White"/>
                <SolidColorBrush x:Key="NavigationViewItemBackgroundPressed" Color="#d6df27"/>

                <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPressed" Color="White"/>
                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelectedPressed" Color="#00bff3"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelected" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundSelected" Color="White"/>

                <SolidColorBrush x:Key="NavigationViewItemBackgroundSelectedPointerOver" Color="#00bff3"/>
                <SolidColorBrush x:Key="NavigationViewItemForegroundSelectedPointerOver" Color="White"/>
            </Grid.Resources>
            <NavigationView x:Name="UC_NavigationViewControl"  Windows10version1803:IsBackButtonVisible="Collapsed" IsSettingsVisible="False"  ItemInvoked="UC_NavigationViewControl_ItemInvoked" Margin="0,0,860,0" TabIndex="1">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="NavUser" Content="Users" Tag="Users" Background="#293857" FontSize="16"  TabIndex="2">
                        <NavigationViewItem.Icon>
                            <BitmapIcon  UriSource="Assets/LockScreenLogo.scale-200.png"/>
                        </NavigationViewItem.Icon>
                    </NavigationViewItem>

                    <!--add your menu like mediacl,dental-->


                </NavigationView.MenuItems>
            </NavigationView>
        </Grid>
        <Frame x:FieldModifier="public" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled" x:Name="testFrame" Margin="55,0,0,0">
            <Grid >
                <!--add your menu on dashboard i.e mediacl,dental using image control-->

            </Grid>

        </Frame>
    </Grid>
</Page>

поймать событие щелчка боковой строки меню событие UC_NavigationViewControl_ItemInvoked


        //On Navigation Change
        private  void UC_NavigationViewControl_ItemInvoked(Windows.UI.Xaml.Controls.NavigationView sender, NavigationViewItemInvokedEventArgs args)
        {
            string ItemContent = args.InvokedItem.ToString();

            if (ItemContent != null)
            {
                switch (ItemContent)
                {
                    case "Users":
                        this.testFrame.Navigate(typeof(BlankPage1 )); 
                        break;
                        // your case 
                }
            }
        }

Как правильно использовать фрейм в SplitView в UWP?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Как правильно использовать фрейм в SplitView в UWP?

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы