Row of data on grid now showing - xaml

I am working on rendering a table with selectable rows. Ultimately the data coming in will be data-bound from a database but right now I'm just trying to get a row to show. Here is what I have:
<Grid Background="WhiteSmoke">
<StackPanel>
<Grid Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="Status" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="Work Package" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="Description" />
</Border>
<Border Grid.Column="3" Grid.Row="1">
<TextBlock Text="Foreman" />
</Border>
<Border Grid.Column="4" Grid.Row="1">
<TextBlock Text="Field Issue" />
</Border>
<Border Grid.Column="5" Grid.Row="1">
<TextBlock Text="Start Date" />
</Border>
<Border Grid.Column="6" Grid.Row="1">
<TextBlock Text="Finish Date" />
</Border>
</Grid>
<ListBox >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.Resources>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</Grid.Resources>
<Border Grid.Column="0" Grid.Row="1">
<TextBlock Text="1" />
</Border>
<Border Grid.Column="1" Grid.Row="1">
<TextBlock Text="2" />
</Border>
<Border Grid.Column="2" Grid.Row="1">
<TextBlock Text="3" />
</Border>
<Border Grid.Column="3" Grid.Row="1">
<TextBlock Text="4" />
</Border>
<Border Grid.Column="4" Grid.Row="1">
<TextBlock Text="5" />
</Border>
<Border Grid.Column="5" Grid.Row="1">
<TextBlock Text="6" />
</Border>
<Border Grid.Column="6" Grid.Row="1">
<TextBlock Text="7" />
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
The header's are being rendered but the 1st row which should just have numerical values is not showing:
What am I doing wrong? Why isn't the row of data showing?


As I stated in my comment, you have not added any items to the listbox so the dataTemplate will not show.
For testing you can add items after the ItemTemplate:
</ListBox.ItemTemplate>
<ListBoxItem>Item 1</ListBoxItem>
<ListBoxItem>Item 2</ListBoxItem>
</ListBox>

Related

how to declare xmlns:local to a subfolder within my xamarin forms app?

Hello I'm working on a xamrain forms app that has a main menu and when you click the math button it supposed to take you to the MathHome page however it crashes after you click the button on the home page
heres my code for the mathpage:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SchoolTools.Math.ViewModels;assembly=SchoolTools"
x:Class="SchoolTools.MathPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="NumberStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="White"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="OperationsStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="#FFA500"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="BackSpaceButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="Bold,40"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
</Style>
<Style x:Key="CleanButtonStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Teal"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="Font" Value="36"/>
</Style>
<Style x:Key="MainLabelStyle" TargetType="Label">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="35"/>
<Setter Property="YAlign" Value="Center"/>
<Setter Property="XAlign" Value="Center"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid Padding="5,0" RowSpacing="1" BackgroundColor="Black" ColumnSpacing="1">
<Grid.BindingContext>
<local:MainViewModel />
</Grid.BindingContext>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3"
Text="{Binding DisplayValue}" Style="{DynamicResource MainLabelStyle}" />
<Button Text="←" Grid.Row="1" Grid.Column="3" Command="{Binding BackspaceCommand}"
Style="{DynamicResource BackSpaceButtonStyle}" />
<Button Text="7" Grid.Row="3" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="7" Style="{DynamicResource NumberStyle}"/>
<Button Text="8" Grid.Row="3" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="8" Style="{DynamicResource NumberStyle}"/>
<Button Text="9" Grid.Row="3" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="9" Style="{DynamicResource NumberStyle}"/>
<Button Text="4" Grid.Row="4" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="4" Style="{DynamicResource NumberStyle}"/>
<Button Text="5" Grid.Row="4" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="5" Style="{DynamicResource NumberStyle}"/>
<Button Text="6" Grid.Row="4" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="6" Style="{DynamicResource NumberStyle}"/>
<Button Text="1" Grid.Row="5" Grid.Column="0" Command="{Binding NumberComamnd}"
CommandParameter="1" Style="{DynamicResource NumberStyle}"/>
<Button Text="2" Grid.Row="5" Grid.Column="1" Command="{Binding NumberComamnd}"
CommandParameter="2" Style="{DynamicResource NumberStyle}"/>
<Button Text="3" Grid.Row="5" Grid.Column="2" Command="{Binding NumberComamnd}"
CommandParameter="3" Style="{DynamicResource NumberStyle}"/>
<Button Text="0" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="3"
CommandParameter="0" Style="{DynamicResource NumberStyle}" Command="{Binding NumberComamnd}" />
<Button Text="." Grid.Row="6" Grid.Column="3" Command="{Binding AddPointCommand}"
Style="{DynamicResource OperationsStyle}"/>
<Button Text="/" Grid.Row="2" Grid.Column="2" Command="{Binding OperatorCommand}"
CommandParameter="/" Style="{DynamicResource OperationsStyle}"/>
<Button Text="x" Grid.Row="2" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="x" Style="{DynamicResource OperationsStyle}" Font="25"/>
<Button Text="-" Grid.Row="3" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="-" Style="{DynamicResource OperationsStyle}"/>
<Button Text="+" Grid.Row="4" Grid.Column="3" Command="{Binding OperatorCommand}"
CommandParameter="+" Style="{DynamicResource OperationsStyle}"/>
<Button Text="√" Grid.Row="2" Grid.Column="1" Command="{Binding OperatorCommand}"
CommandParameter="√" Style="{DynamicResource OperationsStyle}"/>
<Button Text="=" Grid.Row="5" Grid.Column="3" Command="{Binding CalculationCommand}"
Style="{DynamicResource OperationsStyle}"/>
<Button Text="C" Grid.Row="2" Grid.Column="0" Command="{Binding CleanCommand}"
Style="{DynamicResource CleanButtonStyle}"/>
</Grid>
</ContentPage>
I think my xmlns:local is messed up the class the xaml references is MainViewModel witch is in a folder in the project called Math and then sub folder within math called ViewModels
Any ideas on how to fix this issue?

The problem does not seem to be in your local namespace declaration but seems to be in you using properties which are marked as obsolete.
Have a look at this piece of your XAML, to which your error messages refer.
<Style x:Key="MainLabelStyle" TargetType="Label">
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="Font" Value="35"/>
<Setter Property="YAlign" Value="Center"/>
<Setter Property="XAlign" Value="Center"/>
</Style>
If we lookup the YAlign and XAlign in the Xamarin Forms documentation, you'll see they are marked as obsolete. You should now use VerticalTextAlignment and HorizontalTextAlignment respectively.

Grid not covering all the screen in UWP app

Why my grid is not covering all the screen and how can i fix it? On the designer looks like it should be covering all the width of the screen, but actually leaves a big space on the rigth.
<Grid Background="GreenYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
This code is only a snip, but even with childs the space its there on different sizes.
Edit 1:
Acoording to Luis C. answer i get the same result big empty space to the left:
I found a strange workaround to achieve what i want:
<Grid Background="Yellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite. This is a very large text that only is used to strech all the childrens to the infinite" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
The result is:
Still its a very strange way to workaround the problem.
Full Code
As you see, im using a SplitView on a GridView that loads Pages(like the one with the mentioned problem) on a Frame inside the SplitViewContent. Other Pages with TextBlock as childrens cover the whole screen as i want. The code for the SplitView is:
<Page
x:Class="MyProject.ViewModels.HomePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyProject.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Click="HamburgerButton_Click" Background="LightGray"/>
<!--<Button Name="BackButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Visibility="Visible" Background="LightGray"/>-->
<CommandBar Name="Bar" RelativePanel.AlignRightWithPanel="True" ClosedDisplayMode="Compact" RelativePanel.RightOf="HamburgerButton" Visibility="Visible" Background="LightGray" IsOpen="False" IsSticky="True" >
<CommandBar.Content>
<TextBlock Name="BarTitle" Text="Title" FontSize="24" Margin="24,8,0,12" HorizontalAlignment="Center" VerticalAlignment="Center" />
</CommandBar.Content>
</CommandBar>
</RelativePanel>
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="Overlay"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single"
Name="IconsListBox"
SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="SymbolsListBoxItem">
<StackPanel Orientation="Horizontal">
<Image Source="x" Width="36" Height="36" HorizontalAlignment="Center" VerticalAlignment="Center"> </Image>
<TextBlock x:Uid="Symbols" Text="[Symbols]" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content >
<Frame Name="FrameHolder"></Frame>
</SplitView.Content>
</SplitView>
<Frame Name="HomePageFrame" >
<!-- Frame not used by now-->
</Frame>
</Grid>
The full code page snippet is(with more children) and the result the same, big blank empty space to the right:
<Page
x:Class="MyProject.ViewModels.SymbolsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyProject.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:data="using:MyProject.Models"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="ListView" x:Key="myListViewStyle">
<Setter Property="AllowDrop" Value="False" />
<Setter Property="CanReorderItems" Value="False" />
<Setter Property="Width" Value="36"/>
<Setter Property="Height" Value="140"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Padding" Value="0,4,0,0"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="1" />
</Style>
<Style TargetType="TextBlock" x:Key="SymbolViewer">
<Setter Property="FontFamily" Value="/Fonts/etc"/>
<Setter Property="FontSize" Value="30" />
<Setter Property="Padding" Value="8"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<LinearGradientBrush x:Key="GradBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="White" Offset=".5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ItemGradBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="White" Offset=".5"/>
<GradientStop Color="LightGray" Offset="1"/>
</LinearGradientBrush>
</Page.Resources>
<!-- Spinners -->
<StackPanel Background="AliceBlue" HorizontalAlignment="Stretch" Padding="0">
<StackPanel Background="{StaticResource GradBackground}" >
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" >
<ListView Name="Uno" ItemsSource="{x:Bind UnoItems}" Style="{StaticResource myListViewStyle}" BorderBrush="White"
BorderThickness="2" IsItemClickEnabled="True" ItemClick="Uno_ItemClick">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" FontFamily="/Fonts/etc"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<!-- Not user interactive-->
<TextBlock Text="0" Width="36" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center" ></TextBlock>
<!-- Spinner 2 -->
<ListView Name="Dos" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}"
IsItemClickEnabled="True" ItemClick="Dos_ItemClick">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Tres" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Cuatro" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Cinco" ItemsSource="{x:Bind DosItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}" ></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ListView Name="Seiss" ItemsSource="{x:Bind TresItems}" Style="{StaticResource myListViewStyle}">
<ListView.ItemTemplate >
<DataTemplate x:DataType="data:Thingy">
<TextBlock Text="{x:Bind Symbol}"></TextBlock>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</StackPanel>
</StackPanel>

You just need to remove the "RowDefinition" without height and change the "Auto" Rows to "*".
Something like this:
<Grid Background="GreenYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Content="Black" Background="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="1" Content="Black" Background="Gray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Button Grid.Row="2" Content="Black" Background="Blue" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>

DatePicker item height in flyout

How can I adjust height of the item (LoopingSelectorItem) in the DatePicker's flyout in Universal Windows Platform? It's always 44px.

this for TimePickerFlyout but I hope to help you
<Style TargetType="TimePickerFlyoutPresenter">
<Setter Property="Width" Value="242" />
<Setter Property="MinWidth" Value="242" />
<Setter Property="MaxHeight" Value="396" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="FontSize" Value="25" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="AutomationProperties.AutomationId" Value="TimePickerFlyoutPresenter" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource DateTimeFlyoutBorderThickness}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePickerFlyoutPresenter">
<Border x:Name="Background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
MaxHeight="396">
<Grid x:Name="ContentPanel">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" x:Name="FirstPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="SecondPickerHostColumn" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" x:Name="ThirdPickerHostColumn" />
</Grid.ColumnDefinitions>
<!--********************************this line should change, Height Property-->
<Rectangle x:Name="HighlightRect" Height="44" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Grid.Column="0" Grid.ColumnSpan="5" VerticalAlignment="Center">
<!---->
</Rectangle>
<Border x:Name="FirstPickerHost" Grid.Column="0" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
<Rectangle x:Name="FirstPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="1" >
</Rectangle>
<Border x:Name="SecondPickerHost" Grid.Column="2" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
<Rectangle x:Name="SecondPickerSpacing" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" HorizontalAlignment="Center" Width="2" Grid.Column="3" >
</Rectangle>
<Border x:Name="ThirdPickerHost" Grid.Column="4" >
<interact:Interaction.Behaviors>
<interactcore:EventTriggerBehavior EventName="Tapped">
<interactcore:InvokeCommandAction Command="{Binding ClosePopUp}"/>
</interactcore:EventTriggerBehavior>
</interact:Interaction.Behaviors>
</Border>
</Grid>
<Grid Grid.Row="1" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Height="2" VerticalAlignment="Top" Fill="{ThemeResource SystemControlForegroundBaseLowBrush}" Grid.ColumnSpan="2" />
<Button x:Name="AcceptButton" Grid.Column="0" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
<Button x:Name="DismissButton" Grid.Column="1" Content="" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="16" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource DateTimePickerFlyoutButtonStyle}" Margin="0,2,0,0" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

XAML Element responsive width on Orientation change

I am building a Windows 8.1 Universal app. On the orientation change for the phone, the outer "Grid" element doesn't change in width when the phone is switched to Landscape mode (and vice versa if the app is originally opened in landscape - doesn't change width when orientation=portrait). The Width is bound to the PivotItem Width and the PivotItem fills the entire screen on orientation change but the Grid does not.
<Page x:Name="page"
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:m="using:App1.Models"
xmlns:vm="using:App1.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
mc:Ignorable="d">
<Page.BottomAppBar>
<CommandBar Foreground="White" Background="{StaticResource CustomResource}">
<AppBarButton x:Name="BackButton" Label="Back" HorizontalAlignment="Center"
Click="BackButton_Click" Icon="Back" />
<AppBarButton x:Name="ForwardButton" Label="Forward" HorizontalAlignment="Center"
Click="ForwardButton_Click" Icon="Forward" />
<AppBarButton x:Name="HomeButton" Label="Home" HorizontalAlignment="Center"
Click="HomeButton_Click" Icon="Home" />
<AppBarButton x:Name="SettingsButton" Label="Settings" HorizontalAlignment="Center"
Click="SettingsButton_Click" Icon="Setting" />
</CommandBar>
</Page.BottomAppBar>
<Page.Resources>
<DataTemplate x:Key="myHeader">
<TextBlock Text="{Binding}" FontFamily="CustomFont" />
</DataTemplate>
<Style x:Key="PivotStyle" TargetType="Pivot">
<Setter Property="HeaderTemplate" Value="{StaticResource myHeader}"/>
</Style>
<!--<dict:NumberConverter x:Key="myNumberConverter" />-->
</Page.Resources>
<d:Page.DataContext>
<vm:DesignTimeDataSample />
</d:Page.DataContext>
<Grid>
<Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle}"
Background="{StaticResource CustomItem}"
SelectionChanged="MyPivot_SelectionChanged"
Foreground="Purple"
Grid.Row="1">
<PivotItem x:Name="Feed"
Header="news feed"
FontFamily="CustomFont">
<ScrollViewer Name="ScrollViewer">
<StackPanel x:Name="stackPanel">
<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomItem}" BorderBrush="{StaticResource CustomItem}" Foreground="{StaticResource CustomItem}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="Margin" Value="0,10,0,10" />
<Setter Property="Foreground" Value="{StaticResource CustomItem}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Image Source="{Binding ImagePath}" Margin="20"/>
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="0,0,0.333,53" Grid.RowSpan="2" HorizontalAlignment="Stretch">
<TextBlock VerticalAlignment="Center"
LineStackingStrategy="BlockLineHeight"
LineHeight="20" MaxHeight="80"
TextWrapping="WrapWholeWords"
Text="{Binding Headline}" FontSize="18"
FontFamily="CustomItem" />
</Grid>
<Grid Grid.Row="1" Margin="0,0.333,0.333,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5" Text="{Binding Date}"
Foreground="#FFBDBDBD"
FontFamily="CustomItem" />
</Grid>
<Grid Grid.Column="1">
<AppBarButton
Style="{StaticResource CustomItem}"
VerticalAlignment="Center"
Margin="0,0,0,2"
HorizontalAlignment="Right"
Icon="Read"
CommandParameter="{Binding Url}"
Click="StoryButton_Click" FontFamily="Global User Interface"/>
</Grid>
</Grid>
</Grid>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Foreground="White" Content="Send Notification" Grid.Row="0" HorizontalAlignment="Stretch" Name="ToastButton" Click="ToastButton_Click" Margin="0,0,0,25.333"/>
</StackPanel>
</ScrollViewer>
</PivotItem>
<PivotItem x:Name="News" Header="news">
<WebView x:Name="MyWebView" NavigationCompleted="MyWebView_NavigationCompleted"/>
</PivotItem>
</Pivot>
</Grid>
</Page>

Windows Phone 8.1 Grid Row Auto Scroll

I have created Page where there is grid with three rows. In first row I have two button working as Toggle button. This button will visible or collapsed the content of the second and third row.
In second row I have form bigger than screen and in third row there ListView with Sticky and Grouped Style Header
Now the issue is that as the content in second grid row is more I have kept Page level scroll but when I put page level scroll than it will stop sticky header effect in ListView and when I remove page level scroll then ListView sticky header starts working properly but second row which have form bigger than screen will not scroll. So I was looking something that make my second row auto scroll.
Please somebody help to resolve it.
My XAML Code
<Page.Resources>
<Style TargetType="Button" x:Name="ToggleButtonStyle">
<Setter Property="Width" Value="195"/>
<Setter Property="FontFamily" Value="Copperplate Gothic Light"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="BorderBrush" Value="#0c3757"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{Binding Background, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Height="40">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<TextBlock x:Name="ButtonTextElement" Foreground="{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Text="{TemplateBinding Content}" VerticalAlignment="{TemplateBinding VerticalAlignment}" TextAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock" x:Name="Label">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Margin" Value="6,6"/>
<Setter Property="FontSize" Value="14"/>
</Style>
<Style TargetType="TextBox" x:Name="Text">
<Setter Property="Margin" Value="6,0"/>
<Setter Property="Background" Value="#e6e6e6"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
<Style TargetType="Button" x:Name="DropDownButton">
<Setter Property="Background" Value="#e6e6e6"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="{Binding Margin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}" Height="35">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Stretch="None" Grid.Column="0" HorizontalAlignment="Left"/>
<TextBlock x:Name="ButtonTextElement"
Text="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}" Grid.Column="1"
VerticalAlignment="{TemplateBinding VerticalAlignment}" />
<Image Source="{TemplateBinding local:BookAFlight.ImageSource}"
Stretch="Uniform" Grid.Column="2" HorizontalAlignment="Right"
Height="35"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--KAC Offices Style-->
<Style x:Key="RegionContainerStyle" TargetType="ListViewHeaderItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
<DataTemplate x:Key="RegionTemplate">
<Border Background="Red">
<TextBlock Foreground="White" FontSize="28"
Text="{Binding Name}"/>
</Border>
</DataTemplate>
<DataTemplate x:Name="CityTemplate">
<TextBlock Text="{Binding Name}" FontSize="24" MaxWidth="320" TextTrimming="WordEllipsis"
Foreground="Black"/>
</DataTemplate>
<model:GroupedModel x:Key="VM"/>
<CollectionViewSource x:Key="CVS" Source="{Binding Regions, Source={StaticResource VM}}"
IsSourceGrouped="True"
ItemsPath="Cities"/>
</Page.Resources>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto">-->
<Grid x:Name="LayoutRoot" Background="#FFFFFF">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Content="$$Contact Us$$" x:Name="btnContactUs" x:Uid="ContactUs"
Style="{StaticResource ToggleButtonStyle}" Grid.Column="0" Foreground="White"
Margin="7,7,0,0" Click="ContactUs_Click" Background="#0c3757" />
<Button Content="$$KACOffices$$" x:Name="KACOffices" x:Uid="KACOffices" Foreground="Gray"
Style="{StaticResource ToggleButtonStyle}" Grid.Column="1"
Margin="0,7,7,0" Click="KACOffices_Click"/>
</Grid>
<Grid Grid.Row="1" x:Name="grdContactUs" Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--<StackPanel x:Name="spContactUs" ScrollViewer.VerticalScrollMode="Auto">-->
<TextBlock x:Uid="FullName" Text="$$Full Name$$" Grid.Row="0"
Style="{StaticResource Label}"/>
<TextBox x:Name="FullName" Style="{StaticResource Text}" Grid.Row="1" KeyDown="FullName_KeyDown"/>
<TextBlock x:Uid="Company" Text="$$Company$$" Grid.Row="2"
Style="{StaticResource Label}"/>
<TextBox x:Name="Company" Style="{StaticResource Text}" Grid.Row="3" KeyDown="Company_KeyDown"/>
<TextBlock x:Uid="Telephone" Text="$$Telephone$$" Grid.Row="4"
Style="{StaticResource Label}"/>
<TextBox x:Name="Telephone" Style="{StaticResource Text}" Grid.Row="5" KeyDown="Telephone_KeyDown"/>
<TextBlock x:Uid="Email" Text="$$Email$$" Grid.Row="6"
Style="{StaticResource Label}"/>
<TextBox x:Name="Email" Style="{StaticResource Text}" Grid.Row="7" KeyDown="Email_KeyDown"/>
<TextBlock x:Uid="ContactArea" Text="$$Contact Area$$" Grid.Row="8"
Style="{StaticResource Label}"/>
<Grid Grid.Row="9" Height="35">
<Button Style="{StaticResource DropDownButton}" x:Name="ContactArea"
local:BookAFlight.ImageSource="/Assets/drop-down-icon.png" Margin="6,0">
<Button.Flyout>
<ListPickerFlyout x:Name="contactAreaListPicker" ItemsSource="{Binding ContactAreas}">
<ListPickerFlyout.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock>
<Run Text="{Binding contactArea}"/>
</TextBlock>
<Line X1="0" X2="480" Y1="0" Y2="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Bottom" StrokeThickness="1" Stroke="LightGray" />
</StackPanel>
</DataTemplate>
</ListPickerFlyout.ItemTemplate>
</ListPickerFlyout>
</Button.Flyout>
</Button>
</Grid>
<TextBlock x:Uid="Occupation" Text="$$Occupation$$" Grid.Row="10"
Style="{StaticResource Label}"/>
<TextBox x:Name="Occupation" Style="{StaticResource Text}" Grid.Row="11" KeyDown="Occupation_KeyDown"/>
<TextBlock x:Uid="Comments" Text="$$Comments$$" Grid.Row="12"
Style="{StaticResource Label}"/>
<TextBox x:Name="Comments" Style="{StaticResource Text}" Grid.Row="13"
AcceptsReturn="True" Height="80"/>
<Button x:Name="Submit" x:Uid="Submit" Background="#0c3757" Grid.Row="14"
Foreground="White" Content="$$Submit$$" Margin="25,0,25,0"
HorizontalAlignment="Stretch" Click="Submit_Click"/>
<!--</StackPanel>-->
</Grid>
<Grid Grid.Row="2" x:Name="grdKACOffices" Visibility="Collapsed">
<lv:DebugListView x:Name="TheListView"
ItemsSource="{Binding Source={StaticResource CVS}}"
ItemTemplate="{StaticResource CityTemplate}">
<ListView.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource RegionTemplate}"
HeaderContainerStyle="{StaticResource RegionContainerStyle}"/>
</ListView.GroupStyle>
</lv:DebugListView>
</Grid>
</Grid>
<!--</ScrollViewer>-->
P.S. :- It is Silverlight windows phone 8.1 application

One simple solution would be to put the just Grid in your second row into a ScrollViewer.
It will work but the user experience would be really, having a page with two separate scrollable parts. I would suggest you split to page into two separate pages, one with the Grid from the second row and another with the ListView from the third row.