We Keep Coding

Use Viewbox to scale a control within a grid

I have a control that I want to scale both vertically and horizontally as the window is resized. Also, I have controls on both left and right sides of the middle control, that I want to align to it. How can I achieve this?
Currently I'm able to scale vertically, but not horizontally. The controls on left and right side are cut rather than the middle control being scaled.
In short, I want to achieve this, while also achieving the left image above.
Here's how the control looks in reality.
My current XAML:
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid ShowGridLines="True" Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left" Grid.Column="1"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center">
<TextBlock Text="Left" />
</Border>
</Grid>
<Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
<Border BorderThickness="2" BorderBrush="Black"
Height="100" Width="60">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Grid ShowGridLines="True" Grid.Column="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Right" Grid.Column="0"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center" HorizontalAlignment="Right">
<TextBlock Text="Right" />
</Border>
</Grid>
</Grid>

try this
<Grid>
<Grid HorizontalAlignment="Center">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left"
Grid.Column="2"
Width="150"
Height="100"
VerticalAlignment="Center"
BorderBrush="Red"
BorderThickness="5">
<TextBlock Text="Left" />
</Border>
</Grid>
<Viewbox x:Name="Middle"
Grid.Column="1"
Stretch="Uniform">
<Border Width="60"
Height="100"
BorderBrush="Black"
BorderThickness="2">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Grid Grid.Column="2" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Right"
Grid.Column="0"
Width="150"
Height="100"
HorizontalAlignment="Right"
VerticalAlignment="Center"
BorderBrush="Red"
BorderThickness="5">
<TextBlock Text="Right" />
</Border>
</Grid>
</Grid>
</Grid>
</Grid>

Here's the final solution, based on #Rise's answer. This way I was able to remove the grids around the side controls as well.
<Grid ShowGridLines="True" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="Left" Grid.Column="0"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center">
<TextBlock Text="Left" />
</Border>
<Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
<Border BorderThickness="2" BorderBrush="Black"
Height="100" Width="60">
<TextBlock Text="Middle" />
</Border>
</Viewbox>
<Border x:Name="Right" Grid.Column="2"
BorderThickness="5" BorderBrush="Red"
Height="100" Width="150"
VerticalAlignment="Center" HorizontalAlignment="Right">
<TextBlock Text="Right" />
</Border>
</Grid>

WPF fixed rows are resizing

I'm new in WPF and I try to creat specific UserControl to display data for a single product. I used Grid inside UserControl. So I create 5 columns and 3 rows. I want ot make 4 columns fixed (image, green-clored, blue-colored and column with controls) and last column (orange-colored) to fill all availabel space. Here my XAML and few screenshots:
<Grid Margin="0,0,0,5" Background="#FFDCD9D9" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="4" Source="{Binding ItemThumbnailUrl}" Stretch="None" HorizontalAlignment="Right" Margin="5,0" />
<StackPanel Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" Background="#FFDA6F6F">
<Label BorderThickness="0" Content="dsgsdgsgsgsdgsdg sd " FontSize="13.333" FontWeight="Bold" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Horizontal" Background="#FF517823" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding ItemPrice}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="грн." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" Background="#FF214299" HorizontalAlignment="Left" Width="70">
<Label Content="{Binding Quantity}" HorizontalAlignment="Left" FontSize="9.333" Width="45" />
<Label Content="шт." HorizontalAlignment="Left" FontSize="9.333" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal" Background="#FF88B91E" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="грн." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="2" Orientation="Horizontal" Background="#FF228CBD" HorizontalAlignment="Left" Width="70">
<Label Content="1С" HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="45"/>
<Label Content="шт." HorizontalAlignment="Right" FontSize="9.333" Foreground="#FF8B8888" Width="25"/>
</StackPanel>
<CheckBox Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Grid.Column="3" Grid.Row="2" Background="{x:Null}" Content="Редакт." Foreground="#FF444343" Width="50" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Label Grid.Column="4" Grid.RowSpan="2" Grid.Row="1" Background="#FFE08212" HorizontalContentAlignment="Stretch" />
</Grid>
If I have "Title" text (in red-colored cell) less than sum of 3 my fixed columns, everything is OK, but if a text larger I have problems with some paddings between columns (please see pictures)
So how can I resolve this problem?

I could reproduce your issue in a variety of cases when a Grid is used in a DataTemplate. I removed the StackPanel and used a TextBlock, then a a TextBlock hosted in a separate Grid, but all with the same result. I guess something is going wrong when WPF is determining the required size. I have often occurred this kind of strange behaviour in Grids (when part of an ItemTemplate). If you need a quick workaround then this should do the trick
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="80" MaxWidth="80" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition MinWidth="70" MaxWidth="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

LongListMultiSelector Data Template stretches outside screen width - windows phone 8

I've the following pivot control in my application
<phone:PivotItem Header="{Binding Path=LocalizedResources.requests_title, Source={StaticResource LocalizedStrings}}" >
<Grid Margin="0,-12,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" >
<TextBlock FontWeight="Bold"
TextDecorations="Underline"
VerticalAlignment="Top"
TextWrapping="NoWrap"
FontSize="{StaticResource PhoneFontSizeMediumLarge}"
Foreground="{StaticResource PhoneAccentBrush}"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
<toolkit:PhoneTextBox AcceptsReturn="False"
TextWrapping="NoWrap"
Visibility="Collapsed"
TextChanged="SearchBox_TextChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"/>
</StackPanel>
<toolkit:LongListMultiSelector Grid.Row="1"
ItemsSource="{Binding Details_OC}"
SelectionChanged="Requests_SelectionChanged"
toolkit:TurnstileFeatherEffect.FeatheringIndex="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,24,0">
<toolkit:LongListMultiSelector.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0.25" BorderBrush="{StaticResource PhoneAccentBrush}">
<Grid Background="{StaticResource TransparentBrush}" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
Grid.Column="0"
HorizontalAlignment="Left"
VerticalAlignment="Top" >
<TextBlock Text="#" FontSize="{StaticResource PhoneFontSizeLarge}" />
<TextBlock x:Name="ID"
Text="{Binding ID}"
FontSize="{StaticResource PhoneFontSizeLarge}"
TextWrapping="NoWrap"/>
</StackPanel>
<TextBlock x:Name="date"
Text="{Binding Path=TIME, Converter={StaticResource dateConverter}}"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="{StaticResource PhoneFontSizeSmall}"
TextWrapping="NoWrap"/>
</Grid>
</Border>
</DataTemplate>
</toolkit:LongListMultiSelector.ItemTemplate>
</toolkit:LongListMultiSelector>
</Grid>
</phone:PivotItem>
The result appears as follows
You can see that the date Textblock is not appearing fully. I couldn't find the reason for this unexpected behavior. Please help.
Thank you.

The problem appears to be in the sizing of your columns. See the following, inside the <toolkit:LongListMultiSelector.ItemTemplate>:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
In this case I would give the first column a static width and then the second can fill the remaining space. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
Alternatively you may wish to take a look into the ItemInfoTemplate property of the LongListMultiSelector.
It gives you the ability to display a second column at the far right which does not get squashed over by the checkboxes when they become active.
An example can be found here.

Different Behaviour of Grid.RowDefinition at runtime and at design time

suppose I have a grid like below:
<Grid>
<Grid.Resources>
<converters:MultiplyHeightByThreeConverter x:Key="multiplyHeightByThreeConverter" />
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=rowPinCode, Path=ActualHeight, Converter={StaticResource multiplyHeightByThreeConverter}}"/>
<RowDefinition x:Name="rowPinCode" Height="Auto" />
.....
.....
</Grid.RowDefinitions>
.....
.....
</Grid>
Here is my Converter Code :
public class MultiplyHeightByThreeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return (((double)value) * 3);
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
At Design time I get the expected Output :
But at Runtime I don't get that row :
I have also found the reason for that :
I kept a breakpoint on converter's Convert Method's opening bracket and found that value of value parameter is 0.00
How do I solve the problem?
I also tried to use Height instead of ActualHeight but then I get error because it cannot convert Auto to Double
Update :
<Page x:Class="WPF_Client.Pages.Masters.Single.Ledger"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Self="clr-namespace:WPF_Client"
xmlns:helpers="clr-namespace:WPF_Client.HelperClasses"
xmlns:model="clr-namespace:Data;assembly=Data"
mc:Ignorable="d"
d:DesignHeight="760" d:DesignWidth="1366"
Title="Ledger" DataContext="{StaticResource mainWindowViewModel}">
<Page.Resources>
<CollectionViewSource x:Key="GroupNamesWithCorrespondingEffectsCollection" Source="{Binding GroupNamesWithCorrespondingEffects}" />
<CollectionViewSource x:Key="CreditDebitsCollection" Source="{Binding CreditDebits}" />
</Page.Resources>
<Grid DataContext="{Binding CurrentLedger}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="0.15*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="1" Text="Name" />
<DockPanel Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Name}" />
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="1" Text="Group" />
<DockPanel Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox ItemsSource="{DynamicResource Items}"
SelectedValue="{Binding DataContext.SelectedGroupIDinLedger, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValuePath="GroupID" Grid.IsSharedSizeScope="True" TextSearch.TextPath="GroupName">
<ComboBox.Resources>
<CompositeCollection x:Key="Items">
<ComboBoxItem IsEnabled="False" Background="#FF2A2A2A" Foreground="White">
<Grid TextElement.FontWeight="Bold" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="Group Name" />
<TextBlock Grid.Column="2" Text="Effect" />
</Grid.Children>
</Grid>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource GroupNamesWithCorrespondingEffectsCollection}}" />
</CompositeCollection>
<DataTemplate DataType="{x:Type helpers:GroupNameWithCorrespondingEffect}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="{Binding GroupName}" />
<TextBlock Grid.Column="2" Text="{Binding CorrespondingEffect}" />
</Grid.Children>
</Grid>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" Text="Opening Balance" />
<DockPanel Grid.Row="5" Grid.Column="3" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding OpeningBalance}"/>
</DockPanel>
<ComboBox Grid.Row="5" Grid.Column="4" Margin="10,0,0,0" ItemsSource="{DynamicResource Items}"
SelectedValue="{Binding DataContext.SelectedCreditDebitIDinLedger, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
SelectedValuePath="CreditDebitID" Grid.IsSharedSizeScope="True" TextSearch.TextPath="Symbol">
<ComboBox.Resources>
<CompositeCollection x:Key="Items">
<ComboBoxItem IsEnabled="False" Background="#FF2A2A2A" Foreground="White">
<Grid TextElement.FontWeight="Bold" >
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="Value" />
<TextBlock Grid.Column="2" Text="Symbol" />
</Grid.Children>
</Grid>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource CreditDebitsCollection}}" />
</CompositeCollection>
<DataTemplate DataType="{x:Type model:Master_CreditDebits}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A" />
<ColumnDefinition Width="50" />
<ColumnDefinition SharedSizeGroup="B" />
</Grid.ColumnDefinitions>
<Grid.Children>
<TextBlock Grid.Column="0" Text="{Binding Value}" />
<TextBlock Grid.Column="2" Text="{Binding Symbol}" />
</Grid.Children>
</Grid>
</DataTemplate>
</ComboBox.Resources>
</ComboBox>
<GroupBox Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="4" Header="Credit Limits"
Visibility="{Binding DataContext.CreditLimitsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Credit Days" />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding CreditDays}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Credit Limit" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding CreditLimit}"/>
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="9" Grid.Column="1" Grid.ColumnSpan="4" Header="Bank Details"
Visibility="{Binding DataContext.BankDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="A/c No." />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BankAccountNo}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Branch" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BranchName}"/>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="BSR Code" />
<DockPanel Grid.Row="5" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding BSRCode}"/>
</DockPanel>
</Grid>
</GroupBox>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
<RowDefinition Height="20" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="0.3*" />
</Grid.ColumnDefinitions>
<!--Here is the problem part-->
<GroupBox Grid.Row="1" Grid.Column="1" Header="General Details"
Visibility="{Binding DataContext.GeneralDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="{Binding ElementName=rowPinCode, Path=ActualHeight, Converter={StaticResource multiplyHeightByThreeConverter}}" />
<RowDefinition Height="10" />
<RowDefinition x:Name="rowPinCode" Height="Auto"/>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Address" />
<DockPanel Grid.Row="1" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Address}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Pincode" />
<DockPanel Grid.Row="3" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding PINCode}"/>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="City" />
<DockPanel Grid.Row="5" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox />
</DockPanel>
<TextBlock Grid.Row="7" Grid.Column="0" Text="State" />
<DockPanel Grid.Row="7" Grid.Column="1" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<ComboBox />
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="3" Grid.Column="1" Header="Contact Details"
Visibility="{Binding DataContext.ContactDetailsVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Contact Person" />
<DockPanel Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding ContactPerson}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Phone No." />
<DockPanel Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Text="{Binding DataContext.TelephoneNo1, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"/>
<TextBox Grid.Column="1" Text="{Binding DataContext.TelephoneNo2, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}" Margin="5,0,0,0"/>
</Grid>
</DockPanel>
<TextBlock Grid.Row="5" Grid.Column="0" Text="Email Address" />
<DockPanel Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding EmailAddress}"/>
</DockPanel>
<TextBlock Grid.Row="7" Grid.Column="0" Text="Website" />
<DockPanel Grid.Row="7" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding Website}"/>
</DockPanel>
</Grid>
</GroupBox>
<GroupBox Grid.Row="5" Grid.Column="1" Header="Tax Information"
Visibility="{Binding DataContext.TaxInformationVisibility, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}},
Converter={StaticResource boolToVisibilityConverter}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="PAN / IT No." />
<DockPanel Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding PANCardOrITNo}"/>
</DockPanel>
<TextBlock Grid.Row="3" Grid.Column="0" Text="Sales Tax No." />
<DockPanel Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" LastChildFill="True">
<TextBlock DockPanel.Dock="Left" Text=":" />
<TextBox Text="{Binding SalesTaxNo}"/>
</DockPanel>
</Grid>
</GroupBox>
</Grid>
</Grid>
</Page>
Update 2:
After your suggestions :
At Design Time:
At Runtime :

You don't need converter. In case you want first row to be thrice of second row, you can give relative width using 3*.
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition x:Name="rowPinCode" Width="Auto" Height="*" />
.....
</Grid.RowDefinitions>
UPDATE
Using row definitions like mentioned above works completely fine at my end. Definition's declaration:
<Grid.RowDefinitions>
<RowDefinition Height="5" />
<RowDefinition Height="3*" />
<RowDefinition Height="10" />
<RowDefinition x:Name="rowPinCode" Height="*"/>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="5" />
</Grid.RowDefinitions>
Snapshot:

How to stretch StackPanel to FullScreen

I have ItemDetailPage.xaml with FlipView, inside of DataTemplate i have Grid with come columns. One of columns contains StackPanel with some controls.
Example:
<FlipView.ItemTemplate>
<DataTemplate>
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<Grid Margin="120,0,20,20" x:Name="richTextColumns">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="400" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="2" Grid.Row="1" Margin="0,0,0,10" x:Name="ContentPanel">
<TextBlock FontSize="22" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap" />
<Image x:Name="image" Width="200" Margin="0,10,0,10" Stretch="UniformToFill" Source="{Binding Image}"/>
<StackPanel Orientation="Horizontal" Margin="0,0,0,5">
<RichTextBlock x:Name="InformationOriginalName" Width="250"
Style="{StaticResource ItemRichTextStyle}" IsTextSelectionEnabled="False">
<Paragraph>
<Run FontWeight="SemiLight" Text="{Binding EvaInformation.OriginalName}"/>
</Paragraph>
</RichTextBlock>
</StackPanel>
</StackPanel>
....
</Grid>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
How to stretch ContentPanel to FullScreen and hide all different controls, including Back button and title of page?