将 2 个标签与其下方的每个按钮对齐

Question

我正在尝试一些不同的方法来将这些 1 和 2 与其 + 和 - 对齐

我当然可以让它适合当前屏幕我的问题是，如果我缩小或放大到另一个屏幕，它们就会停止对齐。我的 xml

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
     <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="*" />
     <RowDefinition Height="5" />
     <RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<StackPanel Grid.Row="2" Grid.Column="3" Orientation="Vertical" >

            <Label Content="Tryk eller indskriv mængde:"  FontSize="24"/>
            <Label Content="Samlede Mængde:"   FontSize="24"/>
        </StackPanel>

        <StackPanel Grid.Row="3" Grid.Column="3" Orientation="Vertical">
            <TextBox x:Name="InsertedAmountOnFoundQauntityy" PreviewTextInput="NumberValidationTextBox" Text="{Binding Path=FoundQauntityy, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="150" Height="45" FontSize="30" />
        </StackPanel>

        <StackPanel Grid.Row="5" Grid.Column="3" Orientation="Horizontal" HorizontalAlignment="Center" >
           
            <Label Content="1"    FontSize="24"/>
        </StackPanel>
        <StackPanel Grid.Row="5" Grid.Column="3" Orientation="Horizontal" HorizontalAlignment="Right" >
                <Label Content="5"   FontSize="24"/>
        </StackPanel>


        <StackPanel Grid.Row="5" Grid.Column="3" HorizontalAlignment="Stretch" Orientation="Horizontal">
            
            <Button x:Name="plus1" Content="+"  Width="70" Height="35" FontSize="24"  Click="plus1_Click"/>
            <TextBlock Visibility="Hidden" Width="10"></TextBlock>
            <Button x:Name="Subtract1" Content="-"  Width="70" Height="35" FontSize="24" Click="Subtract1_Click"/>
        </StackPanel>


        <StackPanel Grid.Row="5" Grid.Column="3" HorizontalAlignment="Right" Orientation="Horizontal">
            <Button  x:Name="Plus5" Content="+" Width="70" Height="35"  FontSize="24" Click="Plus5_Click" />
            <TextBlock Visibility="Hidden" Width="10"></TextBlock>
            <Button x:Name="Subtract5" Content="-" Width="70" Height="35"  FontSize="24" Click="Subtract5_Click"/>
        </StackPanel>

还有它的照片：

我想要的：

有什么建议吗？我是否缺少可以在此用例中使用的另一个工具？

Answer 1

只需学习如何使用网格、GridColumn 等...，就可以胜任这项工作。

我给你一个小例子，已经对你有帮助了：

<Grid Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>//adds a small space between 2 buttons groups
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.ColumnSpan="2" Content="1" HorizontalAlignment="Center"/>
        <Button Grid.Row="1" Content="-" Margin="5"/>
        <Button Grid.Row="1" Grid.Column="1" Content="+" Margin="5"/>
    </Grid>
    <Grid Grid.Column="2">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Label Grid.ColumnSpan="2" Content="5" HorizontalAlignment="Center"/>
        <Button Grid.Row="1" Content="-" Margin="5"/>
        <Button Grid.Row="1" Grid.Column="1" Content="+" Margin="5,5,5,5"/> // exactly the same as Margin="5", just to show you can set different margins on each side.
    </Grid>
</Grid>

将 2 个标签与其下方的每个按钮对齐

Align 2 labels with each its buttons below

wpf

xaml

stackpanel