wp8 pivot control how to change style of unselected pivots - xaml

i have a pivot control and i'm wanting to change the style of the unselected pivots. in particular, I want to change the opacity.
I know it has something to do with Primitives:PivotHeadersControl, but I can't figure out what to set on the style for this control.
I have the following style for my pivot
</Grid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="{StaticResource TabHeaderBackgroundBrush}" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock Text="{Binding}" FontSize="28" Margin="15,0,15,0"
Foreground="{StaticResource ForegroundBrush}"/>
</Border>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Transparent" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1" >
</Primitives:PivotHeadersControl>
<Border Margin="0,-1,0,0" BorderBrush="White"
BorderThickness="1" Grid.Row="2"
Background="{StaticResource TabBackgroundBrush}">
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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>

How can I scale text and image in uwp?

I want to scale text and image content.I want to an output like that :
But result like that:
My code is below. What is the problem?
<UserControl.Resources>
<DataTemplate x:Key="ImageTemplate" x:DataType="model:NoteBlock">
<Grid>
<Viewbox Stretch="UniformToFill" StretchDirection="Both" Grid.Row="0">
<ScrollViewer MinZoomFactor="1" MaxZoomFactor="3" VerticalScrollMode="Disabled" HorizontalScrollMode="Disabled">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Margin="0" Source="{x:Bind BlockData}" Holding="Image_Holding" PointerPressed="Image_PointerPressed" />
</ScrollViewer>
</Viewbox>
</Grid>
</DataTemplate>
<DataTemplate x:Key="TextTemplate" x:DataType="model:NoteBlock">
<Grid>
<Viewbox StretchDirection="Both" Stretch="Uniform" VerticalAlignment="Top">
<RichEditBox Name="richEditor" BorderThickness="0" l:RtfText.RichText="{x:Bind BlockData}" Margin="0" GotFocus="richEditor_GotFocus" >
</RichEditBox>
</Viewbox>
</Grid>
</DataTemplate>
<DataTemplate x:Key="GapTemplate">
<Grid Height="20" >
</Grid>
</DataTemplate>
<l:NoteTypeTemplateSelector x:Key="NoteTypeTemplateSelector"
TextTemplate="{StaticResource TextTemplate}"
ImageTemplate="{StaticResource ImageTemplate}"
GapTemplate="{StaticResource GapTemplate}"></l:NoteTypeTemplateSelector>
</UserControl.Resources>
<Grid Name="ContainerGrid" Background="White" PointerPressed="ContainerGrid_PointerPressed" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<ToggleSwitch Margin="0" Name="Mode" HorizontalAlignment="Right" OffContent="Read Mode" OnContent="Edit Mode"></ToggleSwitch>
<ListView x:Name="NoteList" Background="Transparent"
Grid.Row="1"
ItemsSource="{x:Bind ds}"
ItemTemplateSelector="{StaticResource NoteTypeTemplateSelector}"
ScrollViewer.VerticalScrollMode="Enabled">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
<SwapChainPanel Name="DxPanel" Grid.Row="0"></SwapChainPanel>
</Grid>
</UserControl>
Could you please help about that?
You can try using one of the Transform for your "ImageTemplate" and "TextTemplate" to scale the image/Text.
https://learn.microsoft.com/en-us/windows/uwp/graphics/transforms-overview
I think ScaleTransform should solve your problem.

Wp 8.1 xaml issue

I have TemplatedControl defined as:
<Style TargetType="controls:HeaderedContentControl">
<Setter Property="HintAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:HeaderedContentControl">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="Gray">
<TextBlock Text="{TemplateBinding Header}"
FontSize="25"
Foreground="White"
TextWrapping="Wrap"
Margin="0,10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ScrollViewer Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource strConv}}"
Text="{TemplateBinding Hint}"
TextAlignment="{TemplateBinding HintAlignment}"
TextWrapping="Wrap"
Foreground="Gray"
FontSize="17"
Margin="10"/>
<ContentPresenter Content="{TemplateBinding Content}"
Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sometimes after navigation to the page with this control I see
this
instead of
this
I think this occurs because of BottomAppBar on the page. How can I get round this issue?
Layout where this control is used:
<controls:HeaderedContentControl Header="Регистрация">
<StackPanel Margin="10,40">
<TextBlock Text="Номер телефона:"
FontSize="20"/>
<Grid Margin="0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="8"
Margin="10,0"
VerticalAlignment="Center"
FontSize="20"/>
<controls:PhoneTextBox Value="{Binding PhoneNumber, Mode=TwoWay}"
AddContactVisibility="Collapsed"
Margin="0"
Grid.Column="1"/>
</Grid>
<TextBlock Text="Номер вводится без 8-ки. Пример: (XXX)XXX-XX-XX"
FontSize="15"
Foreground="Gray"
TextWrapping="WrapWholeWords"/>
</StackPanel>
</controls:HeaderedContentControl>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Далее"
Icon="Accept"
Command="{Binding RegisterCommand}"/>
</CommandBar>
</Page.BottomAppBar>

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.

XAML: accessing nested control property

Can I access the 'Background' property of a grid that lies inside this control, so that I could override the default image where it is required.
<LocalControls:HeaderedContentControl
Style="{StaticResource MultilineHyperlinkStyle}"
Header="autocompletebox"
Content="Completion of text based on items"
/>
The default image is defined here in this Style.
<Style TargetType="LocalControls:HeaderedContentControl">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="LocalControls:HeaderedContentControl">
<Grid>
<Grid.Background>
<!-- ::: DEFAULT IMAGE ::: -->
<ImageBrush ImageSource="/eSurveyWin7;component/Images/50x50.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="50"/>
<ColumnDefinition Width="Auto" MinWidth="173"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter
Grid.Column="1"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
<ContentPresenter
Grid.Column="1"
Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I only want to modify the first snippet.