在网格 UWP 中居中 StackPanel
Centering StackPanel in a Grid UWP
对于我的通用 Windows 应用程序,我正在尝试将 StackPanel 置于页面网格的中心,如图中所示。但是当我 运行 下面的代码时,三个按钮位于底部居中。可能是什么问题?
MainPage.xaml:
<Page>
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10 0">
<Button x:Name="BackButton" Height="50" Width="150" Background="{x:Null}" BorderBrush="White">
<StackPanel Orientation="Horizontal">
<Viewbox MaxHeight="50" MaxWidth="50">
<SymbolIcon Symbol="Back" Foreground="White"></SymbolIcon>
</Viewbox>
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" FontSize="20" FontWeight="Bold">Back</TextBlock>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Width="150" Height="50" Content="Page 1" FontSize="20" FontWeight="Bold"/>
<Button Width="150" Height="50" Content="Page 2" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
<Button Width="150" Height="50" Content="Page 3" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
</StackPanel>
<Grid Width="150" Height="5" Background="#FFFFFF" HorizontalAlignment="Center" Margin="240" />
</Grid>
<Frame
Grid.Row="1"
x:Name="Frame">
</Frame>
</Grid>
</Page>
Page1.xaml
<Page>
<Grid Background="WhiteSmoke">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 1</TextBlock>
</StackPanel>
</Button>
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 2</TextBlock>
</StackPanel>
</Button>
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 3</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Page>
编辑:
解决方案是:
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
在网格
中删除VerticalAlignment="Top"
解决方法是设置合理的行高比。并从位于第 0 行区域的 Grid
中删除 VerticalAlignment="Top"
。
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
更新
根据您的要求,您无需在顶部区域设置自定义导航栏。您可以使用 NavigationView
来接近。最新导航提供
顶部显示模式。
<NavigationView x:Name="nvSample" Header="This is Header Text" PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
更多请参考NavigationView
official document.
对于我的通用 Windows 应用程序,我正在尝试将 StackPanel 置于页面网格的中心,如图中所示。但是当我 运行 下面的代码时,三个按钮位于底部居中。可能是什么问题?
MainPage.xaml:
<Page>
<Grid Background="WhiteSmoke">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10 0">
<Button x:Name="BackButton" Height="50" Width="150" Background="{x:Null}" BorderBrush="White">
<StackPanel Orientation="Horizontal">
<Viewbox MaxHeight="50" MaxWidth="50">
<SymbolIcon Symbol="Back" Foreground="White"></SymbolIcon>
</Viewbox>
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" FontSize="20" FontWeight="Bold">Back</TextBlock>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Width="150" Height="50" Content="Page 1" FontSize="20" FontWeight="Bold"/>
<Button Width="150" Height="50" Content="Page 2" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
<Button Width="150" Height="50" Content="Page 3" Foreground="#FFFFFF" FontSize="20" FontWeight="Bold"/>
</StackPanel>
<Grid Width="150" Height="5" Background="#FFFFFF" HorizontalAlignment="Center" Margin="240" />
</Grid>
<Frame
Grid.Row="1"
x:Name="Frame">
</Frame>
</Grid>
</Page>
Page1.xaml
<Page>
<Grid Background="WhiteSmoke">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 1</TextBlock>
</StackPanel>
</Button>
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 2</TextBlock>
</StackPanel>
</Button>
<Button Height="150" Width="300" Margin="5" FontWeight="Bold" FontSize="20">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="White" VerticalAlignment="Center" Margin="10" Padding="0">Page 3</TextBlock>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</Page>
编辑: 解决方案是:
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
在网格
中删除VerticalAlignment="Top"
解决方法是设置合理的行高比。并从位于第 0 行区域的 Grid
中删除 VerticalAlignment="Top"
。
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
更新
根据您的要求,您无需在顶部区域设置自定义导航栏。您可以使用 NavigationView
来接近。最新导航提供
顶部显示模式。
<NavigationView x:Name="nvSample" Header="This is Header Text" PaneDisplayMode="Top">
<NavigationView.MenuItems>
<NavigationViewItem Content="Menu Item1" Tag="SamplePage1" />
<NavigationViewItem Content="Menu Item2" Tag="SamplePage2" />
<NavigationViewItem Content="Menu Item3" Tag="SamplePage3" />
<NavigationViewItem Content="Menu Item4" Tag="SamplePage4" />
</NavigationView.MenuItems>
<Frame x:Name="contentFrame"/>
</NavigationView>
更多请参考NavigationView
official document.