Align 2 labels with each its buttons below

Question

I'm trying some different things to align these 1 and 2 along sides its + and -

I could of course make it fit in the current screen I have problem is if I downsize or upsize to another screen they stop aligning. my 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>

And a picture of it:

What I want:

Any suggestions? Am I missing another tool I can use in this use case?

What is expected? Display the numbers above the buttons centered? Display them next to the buttons (left, right)? Your buttons are fixed size but the grid cell will be resized when you resize the window. Until you reach a certain size, they will be cut-off. What should happen if the available size is larger than the buttons with the labels? Scale them to fit the available size? Align them left or center if there is any remaining space. You should go into more detail what you expect, otherwise an appropriate solution is hard to tell. — thatguy, Sep 30 '21 at 09:00
Im just trying to keep the buttons beween the 2 buttons + and - also when I downscale and upscale the screen nothing else — Gerken, Sep 30 '21 at 09:12
Do you mean the text between the buttons e.g. button "+", text, button "-" ? — ChrisBD, Sep 30 '21 at 09:35
Is there a reason why you've placed hidden text between the buttons, in the same StackLayout, that you do nothing with and text with binding in a different row and StackLayout? — ChrisBD, Sep 30 '21 at 09:38

score 0 · Accepted Answer · answered Sep 30 '21 at 17:01

Just learn how to use grids, GridColumn etc..., and this will make the job.

I give you a small example that will help already :

<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>

you have some tutorials online, just type on google "wpf tutorial grid align" for your case and you will see some. Personaly I liked that one : https://www.wpf-tutorial.com/panels/grid/ and that one : https://www.wpftutorial.net/GridLayout.html. I use both of them — Siegfried.V, Oct 01 '21 at 04:06

Align 2 labels with each its buttons below

1 Answers1