UWP Listview in Gridview not increasing - xaml

I've got a GridView to display some data. Each of the GridView items is a ListView which is increasing during runtime.
I'd like the GridView to increase as well - but it is only showing a scrollbar inside the GridView item.
One further requirement would be that each GridView Item should be aligned on top of the item.
<GridView ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="1080">
<GridView.ItemTemplate>
<DataTemplate>
<ListView ItemsSource="{Binding ListData}" HorizontalAlignment="Center">
<ListView.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="🎂"
FontSize="20"
Grid.Column="0"
Margin="0,0,10,10"
FontFamily="Sergoe UI"
Style="{StaticResource BasicTextBlock}"/>
<TextBlock Text="{Binding NameString, Converter={StaticResource DataBindingDebugConverter}}"
Grid.Column="2"
Margin="10,0,0,0"
FontSize="16"
Style="{StaticResource BasicTextBlock}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0,20,0,0"/>
<Setter Property="Width" Value="360" />
</Style>
</GridView.ItemContainerStyle>
</GridView>

the correct answer for this question is (based on the hint of JustinXL)
<GridView ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="1080">
<GridView.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding ListData, Converter={StaticResource DataBindingDebugConverter}}" x:Name="BirthdayListView" HorizontalAlignment="Center" Margin="0,20,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="🎂"
FontSize="16"
Grid.Column="0"
Margin="0,0,10,10"
FontFamily="Sergoe UI"
Style="{StaticResource BasicTextBlock}"/>
<TextBlock Text="{Binding NameString, Converter={StaticResource DataBindingDebugConverter}}"
Grid.Column="2"
Margin="10,0,0,0"
FontSize="16"
Style="{StaticResource BasicTextBlock}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="ContentControl">
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0,20,0,0"/>
<Setter Property="Width" Value="360" />
<Setter Property="VerticalContentAlignment" Value="Top" />
</Style>
</GridView.ItemContainerStyle>
</GridView>

Related

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>

Clickable Table Cells instead of Rows in Windows Universal App

I'm using a ListView to display a table of data in a Universal Windows App.
Each row is clickable now, but i want each Cell to be clickable.
This is my DataTemplate:
<DataTemplate x:Key="TaskTemplate">
<Grid Background="white" Height="43" Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding Name}" Grid.Column="0" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding TaskType}" Grid.Column="1" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding Priority}" Grid.Column="2" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding State}" Grid.Column="3" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding StartDate}" Grid.Column="4" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding EndDate}" Grid.Column="5" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding Officer}" Grid.Column="6" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
<TextBlock Margin="10,8,8,8" Style="{StaticResource CrisamTitleTextBlockStyle}" Text="{Binding Completed}" Grid.Column="7" TextTrimming="CharacterEllipsis" TextWrapping="NoWrap"/>
</Grid>
</DataTemplate>
This is the ListView:
<ListView Width="auto" Grid.Row="2"
x:Name="taskGridView"
Padding="20"
AutomationProperties.AutomationId="TaskGridView"
AutomationProperties.Name="Tasks In Group"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemsSource="{Binding Collection}"
ItemTemplate="{StaticResource TaskTemplate}"
HorizontalContentAlignment="Center"
HeaderTemplate="{StaticResource TaskHeaderTemplate}"
>
<Interactivity:Interaction.Behaviors>
<Behaviors:ListViewEventBehavior/>
</Interactivity:Interaction.Behaviors>
<ListView.Resources>
</ListView.Resources>
<ListView.ItemContainerStyle>
<StaticResource ResourceKey="CrisamListViewItemContainerStyle"/>
</ListView.ItemContainerStyle>
</ListView>
and this is the ListViewItemContainerStyle:
<Style x:Key="CrisamListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
CheckBrush="DimGray"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Overlay"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
BorderThickness="2" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The result looks like this:
result

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.

Windows phone 8.1 Textblock width to Fill

I want to create the layout as shown in the following image's first section.
But with the code attached, I can only get the layout output as show in the bottom section of the image attached.
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You don't need the StackPanel in the DataTemplate - the Grid you have is enough for this.
Also, in order to get the items to stretch, define a simple ListView.ItemContainerStyle in your ListView:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
So, full code:
<ListView Grid.Row="1"
ItemsSource="{Binding Items}"
Margin="0,20,0,0">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="40" />
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap"
TextTrimming="WordEllipsis"
Grid.Column="0"
Text="{Binding Name}"
Style="{ThemeResource ListViewItemTextBlockStyle}" />
<Image Grid.Column="1"
Source="image.png"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Try it
<ColumnDefinition Width="100" />
instead of Width="*"

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>