WPF VerticalAlignment="Top" is not working - wpf

I'm creating a table presentation out of WPF grid system. I can create the table though but my issue in the Merchandise portion is, as the Non-Merchandise grow taller, the data in Merchandise will vertically center even if I already set VerticalAlignment="Top". The same issue with the Tender column. See the following image showing result.
<Grid Grid.Column="0" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0" Background="Aqua">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" />
<TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5" />
<TextBlock Text="Sales" Grid.Row="2" Grid.Column="0" VerticalAlignment="Top" />
<TextBlock Text="25,887.22" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" />
</Grid>
<Grid Grid.Column="1" Grid.Row="0" Background="Aquamarine">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Non-Merchandise" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
<TextBlock Text="Type" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Text="Amount" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Gift Card" Grid.Row="2" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="3" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="4" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="5" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="6" Grid.Column="0" />
<TextBlock Text="Gift Card" Grid.Row="7" Grid.Column="0" />
</Grid>
<Grid Grid.Column="2" Grid.Row="0" Background="AliceBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="Tender" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" HorizontalAlignment="Center" />
<TextBlock Text="Description" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Text="Begin Amt" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Trx Amt" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Margin="5"/>
<TextBlock Text="Removed" Grid.Row="1" Grid.Column="3" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</Grid>


A simple trick is to add an extra row at the bottom and set Height="*" while setting existing rows Height="Auto". That way, existing rows will be pushed up to the top.
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

Related

Remove lines between rows in WPF grid

I have the following XAML in a WPF application. There are white horizontal lines between the rows. Is there anything that can be done to remove them?
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="Header" Height="Auto"/>
<RowDefinition x:Name="Body" Height="1*"/>
<RowDefinition x:Name="Footer" Height=".5*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".4*"/>
<ColumnDefinition />
<ColumnDefinition Width=".4*"/>
</Grid.ColumnDefinitions>
<Border Grid.Column="1" Background="#454d52"/>
<TextBlock Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="54" Text="" Padding="200,30,200,30"/>
</Grid>
<Grid Grid.Row="1">
<Border BorderThickness="0" Background="#FF454D52"/>
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="24" Foreground="White" Padding="50,0,0,0"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" Foreground="White"/>
<Label HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="24" Foreground="White" Padding="0,0,50,0"></Label>
</Grid>
</Grid>
</Grid>

Set SnapsToDevicePixels on your top-most Grid:
<Grid SnapsToDevicePixels="True">

WPF - Two Columns align right column

I have the following XAML, which I have tried to simplify and removed irrelevant code such as name, content, bindings etc.
The problem is that the textbox on the right is not very nicely aligned. I expect the textboxes to be aligned so they are of equal width.
XAML code:
<StackPanel Grid.Row="1" Grid.RowSpan="2" Grid.Column="1" MinWidth="200" HorizontalAlignment="Right">
<GroupBox >
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="1" Margin="5"/>
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69"/>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="2" Grid.Row="0" Margin="5,7" VerticalAlignment="Center"/>
<Label Grid.Column="0" Grid.Row="1" Margin="5" VerticalAlignment="Center" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="2" Grid.Row="1" Margin="5,7" VerticalAlignment="Center"/>
<ItemsControl Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
<TextBox Grid.Column="1" Grid.Row="0" Margin="5" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</StackPanel>
I have tried a lot of different combinations but can't get it to as I want for my end goal.

You can specify on the Grid above the Itemscontrol: Grid.IsSharedSizeScope='True'.
Then, in the DataTemplate for item, specify on the first ColumnDefinition:
SharedSizeGroup='LabelsColumn(or any name you like)'.
That will recalculate automatically the width of the first column, to be as long as the longest text/Label(in this scenario).
Example:
<StackPanel Grid.Row="1"
Grid.RowSpan="2"
Grid.Column="1"
MinWidth="200"
HorizontalAlignment="Right">
<GroupBox>
<GroupBox.HeaderTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="5" />
</Grid>
</DataTemplate>
</GroupBox.HeaderTemplate>
<Grid Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Labels"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5,7"
VerticalAlignment="Center" />
<Label Grid.Column="0"
Grid.Row="1"
Margin="5"
VerticalAlignment="Center"
Grid.ColumnSpan="2" />
<TextBox Grid.Column="1"
Grid.Row="1"
Margin="5,7"
VerticalAlignment="Center" />
<ItemsControl Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="3">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
SharedSizeGroup="Labels"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="5"
VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</GroupBox>
</StackPanel>

Gridsplitter does not allow user to resize grid

My code is as follows:
<Grid
ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="5"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left" />
<ListBox
Grid.Row="0"
Grid.Column="0"
ItemsSource="{Binding Tests}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="10*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock
Text="{Binding Name}"
Grid.Column="0">
</TextBlock>
<Image
Grid.Column="1">
</Image>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock
Grid.Row="0"
Grid.Column="1"
Text="{Binding CommandPromptOutput}">
</TextBlock>
<Button
Grid.Row="1"
Grid.Column="2"
Content="Run" VerticalAlignment="Bottom" HorizontalContentAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
The grid splitter is showing up but it has no control over resizing anything.
I have also tried adding:
<GridSplitter
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Width="5"
Background="Purple"
HorizontalAlignment="left"
ResizeDirection="Columns"
ResizeBehavior="PreviousAndNext" />

Difficulties to use columnspan

I have grid with four texboxs like these :
And I would to get this:
I have tried to play with column span but with no success :(
<Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
<TextBlock Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />
<TextBlock Grid.Row="1" Grid.Column="0" Margin="0,0,05,0" x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="{Binding m_strCpostal}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,05,0" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
</Grid>
It better with this :)
<Grid Margin="12,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" x:Name="TxtBox_CodeTiers" Margin="0,0,20,0" TextWrapping="Wrap" Text="{Binding m_strCode}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="0" Grid.Column="2" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="1" Grid.Column="0" x:Name="TxtBox_CPostal" Margin="0,0,20,0" TextWrapping="Wrap" Text="{Binding m_strCpostal}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}" Loaded="TxtBlock_Loaded"/>
<TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}" Loaded="TxtBlock_Loaded"/>
</Grid>

You will probably need to add another column for the "C" and "D" boxes to line up against, then just set the ColumnSpan on the "A" box to span the new column
<Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="121*"/>
<ColumnDefinition Width="52*"/>
<ColumnDefinition Width="190*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="AAAAAAAAA" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
<TextBlock Grid.Row="0" Grid.Column="2" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="BBBBBBBB" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />
<TextBlock Grid.Row="1" Grid.Column="0" x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="CCCCCCCCCCC" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="DDDDDDDDD" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}" />
</Grid>

You can use in the second grid row StackPanel:
<Grid Margin="20,0,0,20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="0" Margin="0,0,10,0" x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23"/>
<TextBlock Grid.ColumnSpan="1" Grid.Row="0" Grid.Column="1" Margin="0,0,10,0" x:Name="TxtBox_NomTiers" TextWrapping="Wrap" Text="{Binding m_strNom}" HorizontalAlignment="Stretch" VerticalAlignment="Top" FontSize="23" />
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.ColumnSpan="2">
<TextBlock Margin="0,0,05,0" x:Name="TxtBox_CPostal" TextWrapping="Wrap" Text="{Binding m_strCpostal}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
<TextBlock Margin="0,0,05,0" x:Name="TxtBox_Ville" TextWrapping="Wrap" Text="{Binding m_strVille}" HorizontalAlignment="Stretch" VerticalAlignment="Top" Foreground="{StaticResource PhoneDisabledBrush}"/>
</StackPanel>
</Grid>

WPF Alignment problems

I have this window:
My problem is that when the number is larger than 2 digits, it pushes the red rectangle to
the right. and I would like it to act like that:
The rectangle must not been pushed to the right.
This is my XAML:
<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<TextBlock Text="1" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="1" >
<TextBlock Text="1123" VerticalAlignment="Top" />
<Rectangle Width="20" Height="20" Fill="Red" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</Border>
</StackPanel>

<StackPanel>
<Border BorderThickness="1" BorderBrush="Beige">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Text="1" VerticalAlignment="Top" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="0"/>
<TextBlock Text="1123" VerticalAlignment="Top" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Right"/>
<Rectangle Width="20" Height="20" Fill="Red" Grid.Column="1" Grid.Row="1"/>
</Grid>
</Border>
</StackPanel>

Resources