Центрировать вертикально ориентированную сетку в wpf

Question

Я начал создавать пользовательский интерфейс для приложения в WinForm, но я только что прочитал о WPF и решил заново выполнить свою работу над ним. Но так как это новая идея, я столкнулся с небольшой проблемой:

Как вы можете видеть на скриншоте ниже, у меня есть 3 вертикальные кнопки, которые центрированы на главной форме. Как я могу добиться того же в WPF? Я пробовал любое значение, которое смог найти, чтобы изменить позицию, но все они потерпели неудачу.

Вот моя основная форма XAML:

<Window x:Class="YouTubeMusicPlayerWpf.MainWindow"
        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:local="clr-namespace:YouTubeMusicPlayerWpf"
        xmlns:fa="http://schemas.fontawesome.io/icons/"
        mc:Ignorable="d" Height="500" Width="900" Background="Black" WindowStyle="None" AllowsTransparency="true" WindowStartupLocation="CenterScreen" Name="mainWindow">
    <WindowChrome.WindowChrome>
        <WindowChrome ResizeBorderThickness="6" CornerRadius="0" GlassFrameThickness="0">
        </WindowChrome>
    </WindowChrome.WindowChrome>
    <StackPanel Background="#FF201E2B">
        <!-- TitleBar buttons -->
        <Grid HorizontalAlignment="Right">
            <StackPanel Orientation="Horizontal">
                <Button fa:Awesome.Content="WindowMinimize" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="minButton" Click="MinButton_OnClick"></Button>
                <Button fa:Awesome.Content="WindowMaximize" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="maxButton" Click="MaxButton_OnClick"></Button>
                <Button fa:Awesome.Content="WindowClose" Background="Transparent" Foreground="White" VerticalAlignment="Stretch" Padding="8" BorderThickness="0" WindowChrome.IsHitTestVisibleInChrome="True" Name="closeButton" Click="CloseButton_OnClick"></Button>
            </StackPanel>
        </Grid>
        <!-- Menu Buttons-->
        <Grid HorizontalAlignment="Left" VerticalAlignment="Center">
            <StackPanel Orientation="Vertical">
                <Button fa:Awesome.Content="Youtube" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
                <Button fa:Awesome.Content="Music" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
                <Button fa:Awesome.Content="Download" FontSize="40" Background="#00000000" Foreground="White" BorderBrush="Transparent" Width="80" Height="80" VerticalAlignment="Center" HorizontalAlignment="Center"></Button>
            </StackPanel>
        </Grid>
    </StackPanel>
</Window>

Answer 1

Проблема в вашем root элементе. Замените StackPanel сеткой, и проблема решена.

Бонус: если вы новичок в WPF, я покажу вам, как реорганизовать ваши стили.

<Grid Background="Black">
    <Grid.Resources>
        <!--  Exemple of a style with a key to reuse  -->
        <Style x:Key="LeftButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="40" />
            <Setter Property="Width" Value="80" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Background" Value="#00000000" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
    </Grid.Resources>
    <!--  TitleBar buttons  -->
    <StackPanel
        HorizontalAlignment="Right"
        VerticalAlignment="Top"
        Orientation="Horizontal">
        <StackPanel.Resources>
            <!--  Exemple of a implicit styles that will be set to each child with a matching type  -->
            <!--  Notice there is no x:Key  -->
            <Style TargetType="Button">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Padding" Value="8" />
                <Setter Property="BorderThickness" Value="0" />
            </Style>
        </StackPanel.Resources>
        <Button Content="b1" />
        <Button Content="b2" />
        <Button Content="b3" />
    </StackPanel>
    <!--  Menu Buttons  -->
    <StackPanel
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Orientation="Vertical">
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
    </StackPanel>
</Grid>

Обратите внимание, что нет ни RowDefinitions, ни ColumnDefinitions .

Вот как сделать то же самое с местом для установки содержимого (красная рамка для примера).

<Grid Background="Black">
    <Grid.Resources>
        <!--  Exemple of a style with a key to reuse  -->
        <Style x:Key="LeftButtonStyle" TargetType="Button">
            <Setter Property="FontSize" Value="40" />
            <Setter Property="Width" Value="80" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Background" Value="#00000000" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="BorderBrush" Value="Transparent" />
        </Style>
    </Grid.Resources>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--  TitleBar buttons  -->
    <StackPanel
        Grid.Column="1"
        HorizontalAlignment="Right"
        Orientation="Horizontal">
        <StackPanel.Resources>
            <!--  Exemple of a implicit styles that will be set to each child with a matching type  -->
            <!--  Notice there is no x:Key  -->
            <Style TargetType="Button">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="White" />
                <Setter Property="Padding" Value="8" />
                <Setter Property="BorderThickness" Value="0" />
            </Style>
        </StackPanel.Resources>
        <Button Content="b1" />
        <Button Content="b2" />
        <Button Content="b3" />
    </StackPanel>
    <!--  Menu Buttons  -->
    <StackPanel
        Grid.RowSpan="2"
        HorizontalAlignment="Left"
        VerticalAlignment="Center"
        Orientation="Vertical">
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
        <Button Content="icon" Style="{StaticResource LeftButtonStyle}" />
    </StackPanel>

    <Grid Background="Red" Grid.Row="1" Grid.Column="1"/>
</Grid>