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

Question

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>

Answer 1

Grid control rows will automatically size depending on their content (at least when coded as you have coded them). VerticalAlignment won't change anything, because the row is changing size with the Button when the mouse hovers over it, so alignment is irrelevant.
To accomplish the effect you are looking for, place each Button inside of its own Grid (within the appropriate row), and size those Grids to accommodate the Buttons' different states.
I guess another thing you could do would be to have a Margin on the Button while the mouse is not hovered over it, and then to remove the Margin (via a Trigger) when the size changes, so the expanded Button takes up the space once taken up by the Margin, resulting in the same row height.
Another thing you could do would just be to have fixed sizes for your Grid rows and Button, in which case the alignments would be effective.