时间戳

首页 > 解决方案 > 将 2 个标签与下面的每个按钮对齐 [已解决]

wpf - 将 2 个标签与下面的每个按钮对齐 [已解决]

问题描述

我正在尝试一些不同的方法来将这些 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>

和它的图片：

在此处输入图像描述

我想要的是：

在此处输入图像描述

有什么建议么？我是否错过了可以在此用例中使用的另一个工具？

标签： wpfxamlstackpanel

解决方案

只需学习如何使用网格、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>

推荐阅读