XamlParseException on Initialize component WP8 - xaml

As the title says I get a XamlParseException when I try to run the app. I have only just started learning xaml and am currently following a tutorial from a book called Windows Phone 8 game development here is the exception it is giving me.
System.Windows.Markup.XamlParseException occurred
HResult=-2146233087
Message=The property 'System.Windows.Controls.Panel.Children' is set more than once. [Line: 53 Position: 74]
Source=System.Windows
LineNumber=53
LinePosition=74
StackTrace:
at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at SpaceAim3D.Views.MenuPage.InitializeComponent()
at SpaceAim3D.Views.MenuPage..ctor()
InnerException:
here is my code
public partial class MenuPage : PhoneApplicationPage
{
private Dictionary<String, String> m_urls = new Dictionary<string, string>();
public MenuPage()
{
InitializeComponent();
m_urls["play"] = "/Views/GamePage.xaml";
m_urls["ranks"] = "/Views/RanksPage.xaml";
m_urls["map"] = "/Views/MapPage.xaml";
m_urls["world"] = "/Views/WorldPage.xaml";
m_urls["help"] = "/Views/HelpPage.xaml";
m_urls["web"] = "/Views/WebPage.xaml";
m_urls["settings"] = "/Views/SettingsPage.xaml";
}
//This is a common event handler used by all entities on menu page
private void BrdPage_Tap(object sender, GestureEventArgs e)
{
//To get the tag name we case the sender object and get the tag as a string
String page = ((Border)sender).Tag as String;
NavigationService.Navigate(new Uri(m_urls[page], UriKind.Relative));
}
}
and here is my Xaml code
<phone:PhoneApplicationPage
x:Class="SpaceAim3D.Views.MenuPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Landscape" Orientation="Landscape"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="125" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Assets/asteroid.png" />
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock" x:Key="ButtonText">
<Setter Property="FontSize" Value="40"/>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0"
Style="{StaticResource PhoneTextTitle1Style}">
Space Aim <Bold>3D</Bold>
</TextBlock>
<Grid.Background>
<ImageBrush ImageSource="/Assets/background.png" />
</Grid.Background>
<Border Grid.Row="1" Margin="10,5,536,194" Tap="BrdPage_Tap" Tag="play">
<TextBlock Style="{StaticResource ButtonText}" Text="PLAY!"/>
</Border>
<Border Margin="255,74,291,221" Grid.RowSpan="2" Tap="BrdPage_Tap" Tag="ranks">
<TextBlock Style="{StaticResource ButtonText}" Text="RANKS!" Margin="12,66,10,66" Width="160"/>
</Border>
<Border Grid.Row="1" Margin="12,162,534,37" Tap="BrdPage_Tap" Tag="map">
<TextBlock Style="{StaticResource ButtonText}" Text="MAP"/>
</Border>
<Border Grid.Row="1" Margin="238,189,308,10" Tap="BrdPage_Tap" Tag="world">
<TextBlock Style="{StaticResource ButtonText}" Text="WORLD"/>
</Border>
<Border Grid.Row="1" Margin="420,76,126,123" Tap="BrdPage_Tap" Tag="web">
<TextBlock Style="{StaticResource ButtonText}" Text="WEB"/>
</Border>
<Border Grid.Row="1" Margin="556,148,-10,51" Tap="BrdPage_Tap" Tag="help">
<TextBlock Style="{StaticResource ButtonText}" Text="HELP"/>
</Border>
<Border Margin="503,54,12,241" Grid.RowSpan="2" Tap="BrdPage_Tap" Tag="settings">
<TextBlock Style="{StaticResource ButtonText}" Text="SETTINGS"/>
</Border>
</Grid>
</phone:PhoneApplicationPage>

I moved all the xaml code with border tags above the grid.background and it worked

Related

making the XAML list view header sticky with full scroll bar

I have a list view which has a header template
<Grid Margin="70,0,0,0">
<ListView x:Name="LanguagesListView" DataContext="{x:Bind ViewModel}" Grid.Row="2" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,70,0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
<TextBlock Grid.Row="1" Text="{Binding Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,30" TextTrimming="CharacterEllipsis"/>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
</Grid>
and the style for the list view is
<Style x:Key="LanguagesListViewStyle" TargetType="ListView">
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="0,0,50,55" />
<Setter Property="IsItemClickEnabled" Value="True" />
<Setter Property="ItemContainerStyle" Value="{StaticResource LanguagesListViewItemContainerStyle}" />
<Setter Property="ItemTemplate" Value="{StaticResource LanguagesListViewItemTemplate}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTransitions="{TemplateBinding HeaderTransitions}"/>
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
TabNavigation="{TemplateBinding TabNavigation}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter
Footer="{TemplateBinding Footer}"
FooterTemplate="{TemplateBinding FooterTemplate}"
FooterTransitions="{TemplateBinding FooterTransitions}"
Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My aim is to make the Header of the list view sticky which works but I would like to have the scroll viewer of the list view to span across the header area as well. Currently the scroll bar appears below the header.
I would like to get the scroll viewer to the top right, still keeping the header sticky.
Any helps appreciated.
I found an alternate solution for this. Basically keeping the header out of the list view header and move it to a Grid with 2 rows. Header content and the list view will be in the same row and keeping a padding for the list view to keep the list view below the Header. use a ListViewClipBehavior to fix the scrolling issue.
<Grid Margin="70,0,0,0">
<Grid Margin="0,58,70,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{x:Bind Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
<TextBlock Grid.Row="1" Text="{x:Bind Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,0" TextTrimming="CharacterEllipsis"/>
</Grid>
<ListView x:Name="LanguagesListView" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" Padding="0,160,0,0" Margin="0,0,0,0">
<interactivity:Interaction.Behaviors>
<behaviors:ListViewClipBehavior Padding="0,160,0,0" />
<interactivity:Interaction.Behaviors>
</ListView>
</grid>
making the XAML list view header sticky with full scroll bar
The problem is you have placed the header out of the ScrollViewer, it could make the header sticky but the scroll bar will not full.
You have many ways to make sticky header, derive from your screenshot. it looks contain only one group. please check Windows Community Toolkit ScrollHeader, and use StickyHeaderBehavior directly.
For example
<ListView Name="listView">
<interactivity:Interaction.Behaviors>
<behaviors:StickyHeaderBehavior />
</interactivity:Interaction.Behaviors>
<ListView.Header>
<Grid MinHeight="100" Background="#FF0078D7">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sample Text"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Grid MinHeight="25" Margin="10">
<TextBlock Text="{Binding}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
<x:String>Five</x:String>
<x:String>Six</x:String>
<x:String>Seven</x:String>
<x:String>Eight</x:String>
<x:String>Nine</x:String>
<x:String>Ten</x:String>
<x:String>Eleven</x:String>
<x:String>Twelve</x:String>
<x:String>Thirteen</x:String>
<x:String>Fourteen</x:String>
<x:String>Fifteen</x:String>
<x:String>Sixteen</x:String>
<x:String>Seventeen</x:String>
<x:String>Eighteen</x:String>
<x:String>Nineteen</x:String>
<x:String>Twenty</x:String>
</ListView.Items>
</ListView>

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.

StackPanel Orientation stops page load

First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>

How do I place a border around a VariableSizedWrapGrid?

This one is driving me crazy and I am sure there must be a straightforward answer (that I haven't been able to spot).
I have a grouped gridview control which uses a VariableSizedWrapGrid for the grouped panel. The designs approved by my client include a top and bottom border on each group. I thought I could do one of two things:
Specify the border on the VariableSizedWrapGrid; or
Create a line in the GroupStyle.HeaderTemplate and apply the same to a footer.
So it seems I can't do either of those things as VariableSizedWrapGrid inherits from Panel which doesn't support the border property (only adding the border as a child element) and the GridView class doesn't include a grouped footer property. Is there a way of applying a border to the VariableSizedWrapGrid? Xaml is quite new to me as I normally specialise in server side code rather than presentation.
If I've understood you correctly they what you are trying to achieve is something like this:
This is the code for that, and it should work with a variablesizegrid as well. If I've missunderstood please add some more details and the code you already have so we can see how we can best help you.
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App14.ItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App14"
xmlns:data="using:App14.Data"
xmlns:common="using:App14.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="groups" IsSourceGrouped="true" />
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.Resources>
<DataTemplate x:Key="groupTemplate">
<Grid>
<Border BorderBrush="White" BorderThickness="0,10" Padding="20">
<StackPanel >
<Border Background="DarkGreen" Padding="10" Margin="10">
<TextBlock Text="{Binding Name}"/>
</Border>
<Border Background="Yellow" Padding="10" Margin="10">
<Image Width="100" Height="100" Stretch="Uniform" Source="{Binding Image}"/>
</Border>
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
ItemsSource="{Binding Source={StaticResource groups}}"
ItemTemplate="{StaticResource groupTemplate}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="10">
<TextBlock Text='{Binding Key}' Foreground="White" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
and the code:
namespace App14
{
public sealed partial class ItemsPage : App14.Common.LayoutAwarePage
{
public ItemsPage()
{
this.InitializeComponent();
groups.Source = GetAllGrouped(LoadCats());
}
public IEnumerable<IGrouping<string, FakeCat>> GetAllGrouped(IEnumerable<FakeCat> cats)
{
return cats.OrderBy(x => x.Name).GroupBy(x => x.Name);
}
IEnumerable<FakeCat> LoadCats()
{
return new List<FakeCat>
{
new FakeCat {Name = "Naomi", Image = "../Assets/cat1.jpg"},
new FakeCat {Name = "Naomi", Image = "../Assets/cat2.jpg"},
new FakeCat {Name = "Peter", Image = "../Assets/cat3.jpg"},
new FakeCat {Name = "Spencer", Image = "../Assets/cat4.jpg"},
};
}
}
public class FakeCat
{
public string Name { get; set; }
public string Image { get; set; }
public int ItemSize { get; set; }
}
}
Problem solved! I guess I was having trouble figuring out what controls the templates for the group rather than the actual items. I would like to take credit for solving this, but the answer came courtesy of a member of a LinkedIn group. The following style works when applied to the GridView's GroupStyle's ContainerStyle:
<Style x:Key="GroupItemStyle1" TargetType="GroupItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentControl x:Name="HeaderContent" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Content="{TemplateBinding Content}" IsTabStop="False" Margin="{TemplateBinding Padding}" TabIndex="0"/>
<Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
<ItemsControl x:Name="ItemsControl" IsTabStop="False" ItemsSource="{Binding GroupItems}" Grid.Row="1" TabIndex="1" TabNavigation="Once">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<AddDeleteThemeTransition/>
<ContentThemeTransition/>
<ReorderThemeTransition/>
<EntranceThemeTransition IsStaggeringEnabled="False"/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
</ItemsControl>
<Rectangle Grid.Row="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="1" Fill="White" Margin="5,0,15,0" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then in the XAML for the GridView:
<GridView.GroupStyle>
<GroupStyle HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle1}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<!-- Header Template here -->
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,0,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>