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

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.

Related

How to make a Button expand to show its Text in Xamarin.Forms

I have created a Style for my Buttons but when I use longer texts, they are truncated.
This is the style:
<Style x:Key="DefaultButton" TargetType="Button">
<!--<Setter Property="WidthRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="150"
Tablet="200" />
</Setter.Value>
</Setter>
<Setter Property="HeightRequest">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="70"
Tablet="100" />
</Setter.Value>
</Setter>-->
<Setter Property="BackgroundColor" Value="{StaticResource BaseColor}" />
<Setter Property="TextColor" Value="White" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
<Setter Property="Margin" Value="5" />
<Setter Property="FontSize">
<Setter.Value>
<OnIdiom x:TypeArguments="x:Double"
Phone="20"
Tablet="25" />
</Setter.Value>
</Setter>
</Style>
The button:
<Button Grid.Row="1"
Grid.Column="1"
Style="{DynamicResource DefaultButton}"
Text="Basic button with long text" />
This is how that button with a longer text looks:
I could set a very large HeightRequest for the button but that would be very bad practice.
What should I do about this?
In this situation I will often used a Grid with a BoxView and a Label to make up the button and then put a GestureRecognizer on the Grid. Add all of this to a custom control for easy reuse if you want.
I did the GestureRecognizer below from memory so it might need some fixing:
<Grid x:Name="BasicButtonGrid"
VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.MinimumHeightRequest>
<OnIdiom x:TypeArguments="x:Double"
Phone="40"
Tablet="70"/>
</Grid.MinimumHeightRequest>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="OnBasicButtonTapped"/>
</Grid.GestureRecognizers>
<BoxView BackgroundColor="Blue"
VerticalOptions="EndAndExpand"
InputTransparent="True"
Grid.Row="0"
Grid.Column="0"/>
<Label Text="Basic Button with long text"
TextColor="White"
FontSize="Medium"
Grid.Row="0"
Grid.Column="0"/>
</Grid>
You can use the LineBreakModeproperty. Here is the documentation to help you choose the most suitable mode.
https://developer.xamarin.com/api/type/Xamarin.Forms.LineBreakMode/

Can't Resolve name on element

What is the Error in This Code? , I Have Exception :
Can't resolve name on Element
I Try to make validation using behaviors , try this before the logic code right
// I have class called BooleanToObjectConverter
<local:BooleanToObjectConverter x:Key="boolToStyleImage" x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource MVVM_Demo_And_Service.Images.error.png}" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Image">
<Setter Property="HeightRequest" Value="20" />
<Setter Property="Source" Value="{local:ImageResource MVVM_Demo_And_Service.Images.success.png}" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
<Style x:Key="baseStyle"
TargetType="Label">
<Setter Property="FontSize" Value="Micro" />
<Setter Property="FontAttributes" Value="Italic" />
</Style>
<local:BooleanToObjectConverter x:Key="boolToStyleName"
x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#F44336" />
<Setter Property="Text" Value="Enter your Name " />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#4CAF50" />
<Setter Property="Text" Value="Good" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
<local:BooleanToObjectConverter x:Key="boolToStyleEmail"
x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#F44336" />
<Setter Property="Text" Value="Enter a valid email" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#4CAF50" />
<Setter Property="Text" Value="Your email looks good" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
<local:BooleanToObjectConverter x:Key="boolToStyleAge"
x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#F44336" />
<Setter Property="Text" Value="Enter numeric values" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#4CAF50" />
<Setter Property="Text" Value="You are very young!" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
<local:BooleanToObjectConverter x:Key="boolToStylePassword"
x:TypeArguments="Style">
<local:BooleanToObjectConverter.FalseObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#F44336" />
<Setter Property="Text" Value="Enter numeric values" />
</Style>
</local:BooleanToObjectConverter.FalseObject>
<local:BooleanToObjectConverter.TrueObject>
<Style TargetType="Label" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="#4CAF50" />
<Setter Property="Text" Value="You are very Complex!" />
</Style>
</local:BooleanToObjectConverter.TrueObject>
</local:BooleanToObjectConverter>
<local:GenderConverter x:Key="genderConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<Entry Grid.Row="0" Grid.Column="1" Placeholder="UserName"
Text="{Binding SelectedUser.UserName, Mode=TwoWay}"
x:Name="NameEntry" >
<Entry.Behaviors>
<local:MaxLengthValidator MaxLength="10"/>
</Entry.Behaviors>
</Entry>
<Image Grid.Row="0" Grid.Column="2" x:Name="NameSucessErrorImage"
Style="{Binding Source={x:Reference nameValidator},
Path=IsValid,
Converter={StaticResource boolToStyleImage}}"/>
<Label Grid.Row="1" Grid.Column="1" Style="{Binding Source={x:Reference nameValidator},
Path=IsValid,
Converter={StaticResource boolToStyleName}}" />
<Entry Grid.Row="2" Grid.Column="1" Placeholder="Password"
Text="{Binding SelectedUser.UserPassword, Mode=TwoWay}"
x:Name="PassEntry" >
<Entry.Behaviors>
<local:NumberValidatorBehavior x:Name="passwordValidator"/>
<local:MaxLengthValidator MaxLength="15"/>
</Entry.Behaviors>
</Entry>
<Image Grid.Row="2" Grid.Column="2" x:Name="passSuccessErrorImage"
Style="{Binding Source={x:Reference passwordValidator},
Path=IsValid,
Converter={StaticResource boolToStyleImage}}"/>
<Label Grid.Row="3" Grid.Column="1" Style="{Binding Source={x:Reference passwordValidator},
Path=IsValid,
Converter={StaticResource boolToStylePassword}}" />
<Entry Grid.Row="3" Grid.Column="1" Text="{Binding SelectedUser.UserAge, Mode=TwoWay}"
x:Name="AgeEntry" >
<Entry.Behaviors>
<local:NumberValidatorBehavior x:Name="ageValidator"/>
<local:MaxLengthValidator MaxLength="2"/>
</Entry.Behaviors>
</Entry>
<Image Grid.Row="3" Grid.Column="2" x:Name="ageSuccessErrorImage"
Style="{Binding Source={x:Reference ageValidator},
Path=IsValid,
Converter={StaticResource boolToStyleImage}}"/>
<Label Grid.Row="4" Grid.Column="1" Style="{Binding Source={x:Reference ageValidator},
Path=IsValid,
Converter={StaticResource boolToStyleAge}}" />
</Grid>
<Button Text="ADD User"
Command="{Binding PostCommand}" Clicked="Button_Clicked" />
</StackLayout>
Any help ?
I Solved it , the error was in :
<Entry Grid.Row="0" Grid.Column="1" Placeholder="UserName"
Text="{Binding SelectedUser.UserName, Mode=TwoWay}"
x:Name="NameEntry" >
<Entry.Behaviors>
<local:MaxLengthValidator MaxLength="10" x:Name="nameValidator"/>
</Entry.Behaviors>
</Entry>
<Image Grid.Row="0" Grid.Column="2" x:Name="NameSucessErrorImage"
Style="{Binding Source={x:Reference nameValidator},
Path=IsValid,
Converter={StaticResource boolToStyleImage}}"/>
<Label Grid.Row="1" Grid.Column="1" Style="{Binding Source={x:Reference nameValidator},
Path=IsValid,
Converter={StaticResource boolToStyleName}}" />
I didn't define x:Name="nameValidator" at local:MaxLengthValidator tag to reference to Behavior in image and label tag.

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>

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.

Row of data on grid now showing

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>