How to have 2 child Button, each one with different VerticalAlignment?

I have a grid with the top and bottom row having each one kind of the same button (style and so on) with their size growing when I mouse over them.

Except I want my top button to grow from bottom to top, so without altering the rest of the grid position, and respectively, my bottom button to grow from top to bottom.

I tried to change VerticalAlignment="Bottom" for top button, and respectively, VerticalAlignment="Top" for bottom button, but that doesn't change a thing.

After reading this I figured I had to change the parent vertical alignment, so my grid. But it affect both button at once, and I what distinct behavior for each one !

See this example

EDIT : So I try first solution of Chris Mack and embedding my first button inside a new dedicated Grid just for formatting the visual I look for (Meh don't like that much, but may be it is the way to go XAML).

So here it is now :

    <Grid Grid.Row="1" Background="Yellow">
        <Grid.RowDefinitions>                
            <RowDefinition Height="auto"/>                
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>                
            <ColumnDefinition Width="250"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--this is new : =>-->
        <Grid Grid.Column="2" Background="Green" Margin="5,10,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="80"/>
            </Grid.RowDefinitions>                
        <!--<= : this was new-->
        <!--VerticalAlignment="Bottom" is new inside the Button properties-->
            <Button Grid.Column="0" Grid.Row="0" Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" VerticalAlignment="Bottom" MinHeight="60" Background="PaleGoldenrod" BorderBrush="Transparent" BorderThickness="1" Name="UpdateBtn" Click="UpdateBtn_Click">                    
                <local:NineSliceImage x:Name="Update9SliceImg" ImgSource="/Assets/UpdateGreenBIG.png" Slice="225,300,225,225" AreasSize="0.02,0,0.02,10"/>
            </Button>
        </Grid>

So for now (have to test more to be sure) I get what I want, as my 2nd bottom button was already reacting as I wanted, only had to add those extra formatting visual behaviour on my first Button.

But here is my new question :

I don't understand why I had to set VerticalAlignment="Bottom" on my "root" grid to change my childs positioning (and all of them the same, see my original issue) whereas here in my new sub-grid (created only for formatting first button on bottom of it's own sub-grid), setting VerticalAlignment="Bottom" had no effect this time and I had to set VerticalAlignment="Bottom" on the Button itself ! As total opposition of previous remark !!?

EDIT 2 : Finally I ended up using last suggestion of Chris Mack, simply :

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"/><!--Top row-->
        <RowDefinition Height="252"/><!--Update & save. New : FIXED HEIGHT VALUE-->
        <RowDefinition Height="*"/><!--ListBox-->
    </Grid.RowDefinitions>
    <Grid>
        <!--first row, useless in for our case here-->
    </Grid>
    <Grid Grid.Row="1" Background="Transparent">
        <Grid.RowDefinitions>
            <!-- 0) UPDATE Button. New : FIXED HEIGHT VALUE-->
            <RowDefinition Height="90"/>
            <!-- 1) Icon & Name-->
            <RowDefinition Height="auto"/>
            <!-- 2) Icon & Name-->
            <RowDefinition Height="auto"/>
            <!-- 3) Save Button-->
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!-- 0) Icon Button-->
            <ColumnDefinition Width="auto"/>                
            <!-- 1) Name TextBox-->
            <ColumnDefinition Width="250"/>
            <!-- 2) TextBox-->
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <!--Top button, note I added VerticalAlignment="Bottom"-->
        <Button Grid.Row="0" Grid.Column="2" Margin="5,0,10,10" Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" VerticalAlignment="Bottom" MinHeight="60" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Name="UpdateBtn" Click="UpdateBtn_Click" ToolTip="Update">
        </Button>
        <!--Other useless stuff-->
        <Button Style="{StaticResource ResourceKey=TransparentImgButtonStyle}" Margin="10,10,10,10" MinHeight="60" Grid.Row="3" Grid.ColumnSpan="3" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Name="SaveBtn" Click="SaveBtn_Click" ToolTip="Save">
       </Button>
    </Grid>
</Grid>

from Recent Questions - Stack Overflow https://ift.tt/3fkkbHp
https://ift.tt/eA8V8J