在XAML中如何对齐嵌套StackPanel

时间：2019-01-11 13:14:03

标签： xaml uwp uwp-xaml

如何水平居中放置StackPanel 

  <StackPanel Name="PageStackPanel" 
                        HorizontalAlignment="Center"
                        Orientation="Horizontal" 
                        Width="Auto"
                        RelativePanel.Below="PageHeader"
                        RelativePanel.Above="StatusPanel" >
                    <Frame Name="ScenarioFrame" Margin="0,5,0,0"
                           HorizontalAlignment="Center"
                           HorizontalContentAlignment="Center"
               RelativePanel.AlignRightWithPanel="True" 
               RelativePanel.AlignLeftWithPanel="True"/>
        </StackPanel>

enter image description here

MainPage.xaml 

<Page
    x:Class="xLite.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:uc="xLite.UserControls"
    mc:Ignorable="d" Loaded="Page_Loaded"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
    <Grid Background="{ThemeResource AutoSuggestBackgroundThemeBrush }" 
          HorizontalAlignment="Center" 
          Width="Auto"
          VerticalAlignment="Top"
          BorderThickness="2" BorderBrush="#2162b1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"  />
        </Grid.RowDefinitions>
        <uc:HeaderControl
            x:Name="Header" 
            VerticalAlignment="Top" 
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Stretch"
            Height="48"
            MinWidth="700"
            Width="Auto"
            Background="#2162b1" />
        <RelativePanel Grid.Row="0" 
                       Padding="20" 
                       Margin="0,48,0,0"
                       HorizontalAlignment="Center">
            <StackPanel Name="PageHeader">
                <TextBlock x:Name="TxtUserIdentity" 
                           FontSize="20"
                           HorizontalAlignment="Center"
                           TextDecorations="None"
                           Foreground="Black"
                           TextAlignment="Center"
                           Margin="0,0,0,0"
                           TextWrapping="Wrap"
                           VerticalAlignment="Center"
                           Visibility="Visible"
                           Height="40">
                </TextBlock>

                <TextBlock x:Name="TxtPageHeader" 
                   FontSize="30"
                   RelativePanel.Below="Header"
                   HorizontalAlignment="Center"
                   TextDecorations="None"
                   Foreground="Black"
                   TextAlignment="Center"
                   Margin="0,5,0,0"
                   Text="Please Enter Your Credentials"
                   TextWrapping="Wrap"
                   VerticalAlignment="Top"
                   Visibility="Visible"/>
                <TextBlock x:Name="TxtSession" 
                           FontSize="20"
                           HorizontalAlignment="Center"
                           TextDecorations="None"
                           Foreground="Black"
                           TextAlignment="Center"
                           Margin="0,0,0,0"
                           TextWrapping="Wrap"
                           VerticalAlignment="Center"
                           Visibility="Visible"
                           Height="40">
                </TextBlock>
            </StackPanel>
            <StackPanel Name="PageStackPanel" 
                        HorizontalAlignment="Center"
                        Orientation="Horizontal" 
                        Width="Auto"
                        RelativePanel.Below="PageHeader"
                        RelativePanel.Above="StatusPanel" >
                    <Frame Name="ScenarioFrame" Margin="0,5,0,0"
                           HorizontalAlignment="Center"
                           HorizontalContentAlignment="Center"
               RelativePanel.AlignRightWithPanel="True" 
               RelativePanel.AlignLeftWithPanel="True"/>
        </StackPanel>
        <StackPanel x:Name="StatusPanel"
                    Margin="0,10,0,0"
                    Orientation="Vertical" 
                    RelativePanel.AlignBottomWithPanel="True" 
                    RelativePanel.AlignRightWithPanel="True" 
                    RelativePanel.AlignLeftWithPanel="True"
                    Visibility="Visible">
            <!--<TextBlock x:Name="StatusLabel" Margin="10,0,0,10" TextWrapping="Wrap" Text="Status:" />-->
                <Border  x:Name="StatusBorder"
                         Visibility="Visible" 
                         Background="Gray">
                    <ScrollViewer  VerticalScrollMode="Auto"  
                                   VerticalScrollBarVisibility="Auto" 
                                   MinHeight="50"
                                   MaxHeight="200" 
                                   Visibility="Visible">
                    <!-- Use LiveSetting to enable screen readers to announce the status update. -->
                        <TextBlock x:Name="StatusBlock"
                                   FontWeight="Bold" 
                                   Foreground="White"
                                   AutomationProperties.LiveSetting="Assertive" 
                                   Visibility="Visible"
                               MaxWidth="{Binding ElementName=Splitter, Path=ActualWidth}" Margin="10,10,10,20" TextWrapping="Wrap"
                               Text="Status Message"/>
                </ScrollViewer>
            </Border>
        </StackPanel>
        </RelativePanel>
    </Grid>
</Page>

LoginPage.xaml 

<Page
    x:Class="xLite.LoginPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    HorizontalAlignment="Center"
    mc:Ignorable="d" Loaded="Page_Loaded"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                <Grid HorizontalAlignment="Center" Width="Auto">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="55" />
                        <RowDefinition Height="55" />
                        <RowDefinition Height="55" />
                        <RowDefinition Height="55" />
                    </Grid.RowDefinitions>
                    <!--<StackPanel
                        HorizontalAlignment="Center"
                        Orientation="Vertical" 
                        Width="Auto" 
                        Background="Aquamarine">-->
                <TextBox x:Name="TxtLoginEmail"
                             Grid.Row="0" Grid.Column="0"
                 PlaceholderText="Login Email" 
                 Width="350" 
                 HorizontalAlignment="Center" VerticalAlignment="Top"  
                 Margin="0,0,0,0" Height="32"/>
        <TextBlock Grid.Row="0"  Grid.Column="0"  x:Name="TxtValidationEmail" 
                   Foreground="Red" 
                   Text="Enter Email" 
                   TextWrapping="WrapWholeWords"
                   HorizontalAlignment="Left"
                   Margin="5,32,0,0"
                   VerticalAlignment="Top"
                   Visibility="Collapsed"
                   Height="17"/>

        <PasswordBox x:Name="TxtPassword" Grid.Row="1" 
                     PlaceholderText="Login Password" 
                     HorizontalAlignment="Center" 
                     VerticalAlignment="Top"
                     Width="350" 
                     Margin="0,0,0,0" Height="32"/>
        <TextBlock Grid.Row="1" x:Name="TxtValidationPassword" 
                   Foreground="Red" 
                   Text="Enter Password" 
                   TextWrapping="WrapWholeWords"
                   HorizontalAlignment="Left"
                   Margin="5,32,0,0"
                   VerticalAlignment="Top"
                   Visibility="Collapsed"
                   Height="17" />
        <Button x:Name="BtnLogin" Grid.Row="2"  
                Content="Login"
                HorizontalAlignment="Left" 
                VerticalAlignment="Top" 
                Margin="5,0,0,0" 
                Background="#2162b1"
                Foreground="White"
                IsEnabled="True"  
                Height="35" 
                Width="140" 
                Click="btnLogin_Click"/>
        <Button x:Name="BtnSignUp" Grid.Row="2" Grid.Column="0"  
                Content="Register"
                HorizontalAlignment="Right" 
                VerticalAlignment="Top" 
                Margin="0,0,5,0" 
                Background="#2162b1"
                Foreground="White"
                IsEnabled="True"  
                Height="35" 
                Width="140" 
                Click="btnRegister_Click"/>
        <Button x:Name="BtnForgotPassword"  Grid.Row="3" 
                Content="Forgot Password"
                HorizontalAlignment="Left" 
                VerticalAlignment="Top" 
                Margin="5,0,0,0" 
                Background="LightGray" 
                IsEnabled="True"  
                Height="35" 
                Width="140" 
                Click="btnForgotPassword_Click"/>
        <Button x:Name="BtnCancel" Grid.Row="3" Grid.Column="0" 
                Content="Close"
                HorizontalAlignment="Right" 
                VerticalAlignment="Top" 
                Margin="0,0,5,0" 
                Background="LightGray" 
                IsEnabled="True"  
                Height="35" 
                Width="140" 
                Click="btnCancel_Click"/>
                </Grid>
</Page>

2 个答案:

答案 0 :(得分：0)

在登录页面上，您应该执行以下操作：

  1. 在布局的第一个网格周围添加另一个网格。
  2. 在该网格下，您可以添加
  <Grid.ColumnDefinitions>
             <ColumnDefinition Width="1*" />
             <ColumnDefinition Width="500" />
             <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
            <!--Fixed Size -->

或

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="1*" />
     <ColumnDefinition Width="3*" />
     <ColumnDefinition Width="1*" />
  </Grid.ColumnDefinitions>


  <!--3/5 of the overall width.

minimum window width is about 500px, you can also set auto, or make the 1th or 3th column fixed size -->
  1. 在以前是第一个网格上，应删除水平对齐属性以及Width = Auto，仅保留Grid.Column =“ 1”

答案 1 :(得分：0)

这是我固定的方式

添加了设置框架尺寸的常用方法。 

 public void SetDimensions(int width, int height)
        {
            ApplicationView.PreferredLaunchViewSize = new Size(width * 1.2, height * 1.2);
            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;
            PageHeader.Width = width;
            PageStackPanel.Width = width;
        }

并在每次导航上调用上述方法

 protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            _rootPage = MainPage.Current;
            _rootPage.SetDimensions(700, 600);
        }

这有助于解决我的问题

相关问题
最新问题