how change DataTemplate of ListView Item by VisualState in winrt? - xaml

I Try When Tap Edit TextBlock change the DataTemplate of listViewItem by VisualState but does not change for me
my View
<Page
................
DataContext="{Binding Categories, Source={StaticResource Locator}}"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<DataTemplate x:Key="Template">
<local:MyTemplate Width="393"/>
</DataTemplate>
</Page.Resources>
<Grid x:Name="Layout">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding EditText}" Margin="10" FontSize="25" HorizontalAlignment="Right" VerticalAlignment="Center">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding EditCommand}"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</TextBlock>
<ListView Grid.Row="1"
ItemsSource="{Binding AllCategories}"
ItemTemplate="{StaticResource Template}"
SelectionMode="Single"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
</ListView>
</Grid>
and my UserControl
<UserControl>
..................................
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="TamplateState">
<VisualState x:Name="EditeState">
<Storyboard>
........................................................
</Storyboard>
</VisualState>
<VisualState x:Name="Default"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<i:Interaction.Behaviors>
<core:DataTriggerBehavior Binding="{Binding IsEdit}" Value="True">
<core:GoToStateAction StateName="EditeState"/>
</core:DataTriggerBehavior>
<core:DataTriggerBehavior Binding="{Binding IsEdit}" Value="False">
<core:GoToStateAction StateName="Default"/>
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>
IsEdit is boolean property in viewMoedl.

i fixed by belend
<i:Interaction.Behaviors>
<core:DataTriggerBehavior x:Name="dataTriggerBehavior" Binding="{Binding Main.IsEdit, Source={StaticResource Locator}}" Value="True">
<core:GoToStateAction StateName="EditeState"/>
</core:DataTriggerBehavior>
<core:DataTriggerBehavior Binding="{Binding Main.IsEdit, Source={StaticResource Locator}}" Value="False">
<core:GoToStateAction StateName="Default"/>
</core:DataTriggerBehavior>
</i:Interaction.Behaviors>
</Grid>

Related

UWP AdaptiveTrigger Not Triggering

I have the VisualStateManager inside the root grid, but it's not triggering the AdaptiveTrigger. I'm trying to change the textblock inside the StackPanel. Also, what are the rules on priority of VisualState setters over the default? For example, the textblock CreateNewAccount is using x:Uid to get a string resource, but when the setter tries to change the Text value, which one gets priority? Same with FontSize being set by a static resource style.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Style/ApparentTheme.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="MainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="20 0 20 0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Mobile_720">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="CreateNewAccount.FontSize" Value="12"/>
<Setter Target="CreateNewAccount.Text" Value="Test"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="FormStackPanel" Grid.Row="0" Grid.Column="1" Orientation="Vertical">
<TextBlock x:Name="CreateNewAccount" x:Uid="CreateNewAccount" Style="{StaticResource TitleTextBlockStyle1366}"/>
<TextBox x:Uid="EmailField" x:Name="emailField"
Style="{StaticResource TextBoxStyle1366}" InputScope="EmailNameOrAddress"
Text="{Binding NewSignUp.Email, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox x:Uid="FirstNameField" x:Name="firstNameField"
Style="{StaticResource TextBoxStyle1366}" InputScope="AlphanumericFullWidth"
Text="{Binding NewSignUp.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox x:Uid="LastNameField" x:Name="lastNameField"
Style="{StaticResource TextBoxStyle1366}" InputScope="AlphanumericFullWidth"
Text="{Binding NewSignUp.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<PasswordBox x:Uid="PasswordField" x:Name="passwordField"
Style="{StaticResource PasswordBoxStyle1366}"
Password="{Binding NewSignUp.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<PasswordBox x:Uid="PasswordConfirmField" x:Name="passwordConfirmField"
Style="{StaticResource PasswordBoxStyle1366}"
Password="{Binding NewSignUp.PasswordConfirm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<Button x:Uid="CreateAccountButton"
Style="{StaticResource ButtonStyle1366}"
Command="{Binding CreateAccountCommand}" Click="CreateAccountButton_Click"/>
<TextBlock x:Name="errorMessage"
FontSize="16pt" Foreground="Red" Margin="0 5 0 0"
Text="{Binding SignUpErrorMessage, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
<ProgressRing x:Name="signUpProgressRing"
HorizontalAlignment="Center" IsActive="False" Height="30" Width="30"/>
</StackPanel>
</Grid>
It is better to design for a small form factor, and use AdaptiveTrigger for larger widths and heights. Because I was doing the opposite, and testing on a smaller mobile screen, I was unable to see the changes. Here is the revised XAML:
<Page
x:Class="apparent_uwp.View.SignUpPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:apparent_uwp.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Style/ApparentTheme.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="MainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="20 0 20 0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Mobile_720">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="CreateNewAccount.FontSize" Value="24"/>
<Setter Target="MainGrid.ColumnDefinitions[0].Width" Value="*"/>
<Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="*"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="FormStackPanel" Grid.Row="0" Grid.Column="1" Orientation="Vertical" Margin="10 0 10 0">
<TextBlock x:Name="CreateNewAccount" x:Uid="CreateNewAccount" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBox x:Uid="EmailField" x:Name="emailField"
Style="{StaticResource TextBoxStyle}" InputScope="EmailNameOrAddress"
Text="{Binding NewSignUp.Email, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox x:Uid="FirstNameField" x:Name="firstNameField"
Style="{StaticResource TextBoxStyle}" InputScope="AlphanumericFullWidth"
Text="{Binding NewSignUp.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<TextBox x:Uid="LastNameField" x:Name="lastNameField"
Style="{StaticResource TextBoxStyle}" InputScope="AlphanumericFullWidth"
Text="{Binding NewSignUp.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<PasswordBox x:Uid="PasswordField" x:Name="passwordField"
Style="{StaticResource PasswordBoxStyle}"
Password="{Binding NewSignUp.Password, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<PasswordBox x:Uid="PasswordConfirmField" x:Name="passwordConfirmField"
Style="{StaticResource PasswordBoxStyle}"
Password="{Binding NewSignUp.PasswordConfirm, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
<Button x:Uid="CreateAccountButton"
Style="{StaticResource ButtonStyle}"
Command="{Binding CreateAccountCommand}" Click="CreateAccountButton_Click"/>
<TextBlock x:Name="errorMessage"
FontSize="16pt" Foreground="Red" Margin="0 5 0 0"
Text="{Binding SignUpErrorMessage, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"/>
<ProgressRing x:Name="signUpProgressRing"
HorizontalAlignment="Center" IsActive="False" Height="30" Width="30"/>
</StackPanel>
</Grid>

XAML- VisualStateManager not working

I am working on a Universal Windows App. I need to adapt the layout according to the screen. To accomplish that, I am using a Visual State Manager. However, when I test the application, the layout does not change. I am not an expert on XAML, but I do not see anything wrong with my code.
<Grid Background="#6A0888"
HorizontalAlignment="Stretch"
SizeChanged="Grid_SizeChanged">
<Grid.RowDefinitions>
<RowDefinition Height="46"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<WebView
Grid.Row="1"
x:Name="lan_Browser"
NavigationCompleted="lan_Browser_NavigationCompleted_Desktop"
LoadCompleted="lan_Browser_LoadCompleted"
ContentLoading="lan_Browser_ContentLoading"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Height="Auto"
Width="Auto"/>
<StackPanel Orientation="Horizontal"
Grid.Row="0"
VerticalAlignment="Top"
HorizontalAlignment="Right">
<ProgressRing
x:Name="lan_ProgressRing"
Foreground="White"
IsActive="True"
Width="40"
Height="40"
VerticalAlignment="Center"
/>
<Button x:Name="lan_Backward"
Click="lan_Backward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Forward"
Click="lan_Forward_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Refresh"
Click="lan_Refresh_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
<Button x:Name="lan_Home"
Click="lan_Home_Click"
Background="#6A0888"
FontSize="24"
Margin="05,05,05,05"
HorizontalContentAlignment="Stretch"
Width="Auto">
<TextBlock FontFamily="Segoe MDL2 Assets"
Text=""
Width="Auto"
Height="Auto"
Foreground="White"/>
</Button>
</StackPanel>
<Grid Grid.Row="1" Name="Languages_Home">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
<Setter Target="English_Button.Grid.Row" Value="0"></Setter>
<Setter Target="English_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Row" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.ColumnSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Row" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.ColumnSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="English_Button.Grid.Column" Value="0"></Setter>
<Setter Target="English_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Translator_Button.Grid.Column" Value="1"></Setter>
<Setter Target="Translator_Button.Grid.RowSpan" Value="3"></Setter>
<Setter Target="Spanish_Button.Grid.Column" Value="2"></Setter>
<Setter Target="Spanish_Button.Grid.RowSpan" Value="3"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Button x:Name="English_Button"
HorizontalAlignment="Stretch"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Red"
VerticalContentAlignment="Center"
FontSize="60"
Click="English_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/britain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">English</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Translator_Button"
HorizontalAlignment="Stretch"
Grid.Column="1"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="Green"
VerticalContentAlignment="Center"
FontSize="60"
Click="Translator_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/translator.png" Height="300" Width="300"></Image>
<TextBlock FontSize="60" HorizontalAlignment="Center">Translator</TextBlock>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Traductor</TextBlock>
</StackPanel>
</Button>
<Button x:Name="Spanish_Button"
HorizontalAlignment="Stretch"
Grid.Column="2"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Center"
Background="#FFBF00"
VerticalContentAlignment="Center"
FontSize="60"
Click="Spanish_Button_Click"
Grid.RowSpan="3">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Image Source="Assets/spain-flag.jpg" Height="300" Width="300"></Image>
<TextBlock FontFamily="60" HorizontalAlignment="Center">Español</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
Thanks for your help. By the way, I am new here, so I apologize if I broke any rules.
The states are not authored correctly. For example, this Setter:
<Setter Target="Spanish_Button.Foreground" Value="White"></Setter>
Instead, that should be something like:
<VisualState x:Name="Narrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<Storyboard>
<ColorAnimation Duration="0" To="#FFCE0000" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Spanish_Button" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
I agree with Matthais. Blend for Visual Studio might be a useful tool there and provides an easy WYSIWYG way to author these states.

How to dynamic change ItemTemplate width and height in ListView UWP?

I have a ListView like this
<ListView Name="lvTrailers"
Grid.Row="3"
SelectionChanged="lvTrailers_SelectionChanged"
SizeChanged="lvTrailers_SizeChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="65" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Thumbnail}"
Stretch="UniformToFill" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="{Binding Title}"
TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void lvTrailers_SizeChanged(object sender, SizeChangedEventArgs e)
{
// add some userful code
// not working
lvTrailers.ItemTemplate.SetValue(HeightProperty, e.NewSize.Height / 6);
}
In UWP apps users can resize window height and width so when it happen, I want to dynamic resize ListView ItemTemplate too. Any one could tell me how to do that?
You need to use AdaptiveTrigger. Here is an example to achieve that :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<DataTemplate x:Key="MyCustomItemDataTemplate">
<UserControl>
<Grid x:Name="content"
Margin="8"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5*" />
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="ms-appx:///Assets/StoreLogo.png"
Stretch="Uniform" />
<TextBlock Grid.Column="1"
Margin="10,5"
Text="blabla"
VerticalAlignment="Center"
TextWrapping="Wrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="30" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="content.Height"
Value="Auto" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
</DataTemplate>
</Grid.Resources>
<ListView Name="items"
ItemTemplate="{StaticResource MyCustomItemDataTemplate}" />
</Grid>

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.

Listboxitem stop showing highlited on select in Windows phone 8

I am using listbox to show my data in windows phone 8. I have added some logic for enable/disable click of listboxitem. Its working correct now but how I don't know on tap color change for listbox is now stop working can anyone please help me to get out from this.
here is my code
<ListBox Name="lstCourses"
ItemsSource="{StaticResource ListOfCourse}"
toolkit:TiltEffect.IsTiltEnabled="True"
SelectionChanged="lstCourses_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter IsHitTestVisible="{Binding IsEnabled}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock TextWrapping="Wrap"
Grid.Row="0"
FontFamily="Segoe WP SemiLight"
FontSize="25"
Text="{Binding CourseName}"/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="Wrap"
Grid.Column="0"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Foreground="{StaticResource PhoneSubtleBrush}"
Text="Instructor: "/>
<TextBlock TextWrapping="Wrap"
Grid.Column="1"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
Foreground="{StaticResource PhoneSubtleBrush}"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
That happens because you override the default ItemContainerStyle which is null and setting a new style for the ListBoxItem without a storyboard for the Selected / Unselected Visual States.
Have a look at the default styles. What you should do will be straightforward after you read the article.
EDIT
Here's an example.
<ListBox
Name="lstCourses"
ItemsSource="{StaticResource ListOfCourse}"
toolkit:TiltEffect.IsTiltEnabled="True"
SelectionChanged="lstCourses_SelectionChanged">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid
IsHitTestVisible="{Binding IsEnabled}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionState">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox1"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox2"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="textbox3"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame
KeyTime="0:0:0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock
x:Name="textbox1"
TextWrapping="Wrap"
Grid.Row="0"
FontFamily="Segoe WP SemiLight"
FontSize="25"
Text="{Binding CourseName}"
/>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock
x:Name="textbox2"
TextWrapping="Wrap"
Grid.Column="0"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Foreground="{StaticResource PhoneSubtleBrush}"
Text="Instructor: "
/>
<TextBlock
x:Name="textbox3"
TextWrapping="Wrap"
Grid.Column="1"
FontFamily="Segoe WP SemiLight"
FontSize="20"
Text="{Binding CourseInstructor, Converter={StaticResource InstructorConvertor}}"
Foreground="{StaticResource PhoneSubtleBrush}"
/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Also,if you are manipulating through code ,you can set "YourListBox.SelectedItem.Background" property in Selection_changed event handler of ListBox.
If you are using styles then just update Selected / Unselected Visual States accordingly.