I was trying to use ControlTemplate to make a custom RadioButton that doesn't have the little circle, but now I can't center the text to be in the middle, how could I center it, and I'm trying to use every way I can think of.
The code of the ControlTemplate I tried to use
<ControlTemplate x:Key="RadioButtonTemplate">
<Frame
Padding="0"
BackgroundColor="#D9D9D9"
BorderColor="#877373"
HasShadow="False"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="400"
CornerRadius="20"
>
<Grid Margin="4" WidthRequest="240">
Here is a small code that hides the circles
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#df6e57" />
<Setter Property="Padding" Value="5"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter TargetName="Check" Property="Opacity" Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BorderColor" Value="#F3F2F1" />
<Setter Property="Padding" Value="5"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter TargetName="Check" Property="Opacity" Value="0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
You can check the doc. And you can set it like this:
<RadioButton>
<RadioButton.Content>
<StackLayout>
<Label Text="xxx"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</RadioButton.Content>
</RadioButton>
Related
I want to change the background color of the selected item. I have tried the following solution but it didn't work.
<CollectionView x:Name="FlexCategoryType" Margin="0" HorizontalOptions="FillAndExpand" SelectionMode="Single" ItemsSource="{Binding ItemsCategory}" SelectedItem="{Binding SelectedCategory, Mode=TwoWay}" SelectionChanged="FlexCategoryType_SelectionChanged">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Name}"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
CollectionView SelectedItem is not highlighted in Xamarin Forms
Change background color of selected item in CollectionView not working on UWP
The problem is that you have not specific CollectionView SelectionMode, the default value is none. Please set it as Single. and add VisualStateGroups like the following
<CollectionView SelectionMode="Single">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Margin="10">
<Label Text="{Binding}" VerticalOptions="Center" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Yellow" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</CollectionView.ItemsSource>
</CollectionView>
Update
How to change ListView Cell selected color.
Here is FormsListViewItem style, please copy it to UWP App.xaml file and edit SelectedBackground as you want color.
For example
<Application.Resources>
<ResourceDictionary>
<Style x:Key="FormsListViewItem" 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="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
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="SeaGreen"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
How to enlarge the active Entry field. Active - a place that will trigger the activation of this place after pressing
You can use the Scale method to increase the size of the Entry.Every view has the property Scale which can be used to increase the size;
entry.Scale =2;
Have a look at the new Visual State Manager for Xamarin Forms 3.0
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager
It allows you to style your entry for different states. The common states are Normal, Focused, Disabled.
You can e.g. increase the FontSize and do stuff with other states as well. (have a look at the given link)
Your desired state is Focused.
<Entry FontSize="18">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Lime" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Property="FontSize" Value="36" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Pink" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Entry>
There are lots of ways to achieve that.
One of them is changing positional properties, like Margin:
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Entry">
<Style.Setters>
<Setter Property="Margin" Value="20,30,30,30"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="BackgroundColor" Value="AliceBlue"/>
</Style.Setters>
</Style>
<Style TargetType="Image">
<Style.Setters>
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Source" Value="icon"/>
</Style.Setters>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<Grid BackgroundColor="Silver">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0"/>
<Entry Grid.Column="1" Grid.Row="0"
x:Name="txtName"
Placeholder="Name"
Focused="GrowEntry"
Unfocused="ShrinkEntry"/>
<Image Grid.Column="0" Grid.Row="1"/>
<Entry Grid.Column="1" Grid.Row="1"
x:Name="txtEmail"
Placeholder="E-mail"
BackgroundColor="AliceBlue"
Focused="GrowEntry"
Unfocused="ShrinkEntry"/>
<Image Grid.Column="0" Grid.Row="2"/>
<Entry Grid.Column="1" Grid.Row="2"
x:Name="txtPassword"
Placeholder="Password"
Focused="GrowEntry"
Unfocused="ShrinkEntry"/>
</Grid>
<BoxView Color="White"
VerticalOptions="FillAndExpand"/>
</StackLayout>
And in the code behind, the GrowEntry and ShrinkEntry:
private void GrowEntry(object sender, EventArgs args)
{
var entry = (Entry)sender;
entry.Margin = new Thickness(6, 12, 12, 12);
}
private void ShrinkEntry(object sender, EventArgs args)
{
var entry = (Entry)sender;
entry.Margin = new Thickness(20, 30, 30, 30);
}
You'll get something like that:
I'm working on a schedule app for Windows 10 and using GridView to show lesson cards. They should have fixed width when window is wide and use full GridView width when it is narrow (actually, it should look like ListView).
I'm using VisualStateManager to set fixed GridViewItem width in Wide state, but I can't understand how to make it stretch.
Here are my styles:
<Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
<Setter Property="Margin" Value="10, 10, 10, 10" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
<Style x:Key="NarrowGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
<Setter Property="Width" Value="{Binding ActualWidth, ElementName=TimetableGrid}" />
</Style>
<Style x:Key="WideGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
<Setter Property="Width" Value="450"/>
</Style>
Visual States:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveStates" CurrentStateChanged="AdaptiveStates_OnCurrentStateChanged">
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationSplitView.DisplayMode" Value="CompactOverlay"/>
<Setter Target="HamburgerButton.Background" Value="#3F51B5"/>
<Setter Target="HamburgerButton.Foreground" Value="White"/>
<Setter Target="HeaderBorder.Margin" Value="20,0,0,0"/>
<Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=WideGridViewItemStyle}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And the GridView itself:
<GridView x:Name="TimetableGrid"
Margin="20, 0, 20, 10"
ItemTemplate="{StaticResource LessonTemplate}"
ItemsSource="{Binding Source={StaticResource TimetableViewSource}}">
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate x:DataType="data:Day">
<TextBlock Style="{ThemeResource TitleTextBlockStyle}" Margin="0, 20, 0, 0">
<Run Text="{Binding DayOfWeek}" />
<Run Text=", " />
<Run Text="{Binding Date}" />
</TextBlock>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Actual result:
Wide State:
Narrow State:
I'm new to UWP development and XAML and appreciate any help. Thanks.
You'll need to replace the ItemsPanelTemplate for the items to stretch.
Try defining a new resource in Page.Resources:
<ItemsPanelTemplate x:Key="NarrowItemsPanelTemplate">
<ItemsStackPanel />
</ItemsPanelTemplate>
Then modify your VisualStateManager to additionally set the ItemsPanel property for the NarrowState:
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TimetableGrid.ItemContainerStyle"
Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
<Setter Target="TimetableGrid.ItemsPanel"
Value="{StaticResource ResourceKey=NarrowItemsPanelTemplate}" />
</VisualState.Setters>
</VisualState>
There's no need to modify the WideState in any way.
My GridView re-populated when the user chooses ComboBox item. The problem starts when the user scroll the gridView somewhere to to the middle of the gridview and when he chooses different item in the comboBox, what happens is thee scroll looks like it went to the start, but now when you try to move a bit right or left you see that the scroll position updated and appears where it has been at the moment when the user chose differnt combobox item. In addition, although the scroll appears for a second in the beginning, you can see that for this sec the gridview shows the middle-r groups (it's a grouped grid view).
So As mentioned above I want to reset gridview scrool position (to the start position) after the gridview populated.
Here is the the gridview belongings:
<GridView x:Name="GridGames"
Grid.Row="3"
Grid.Column="1"
Grid.ColumnSpan="2"
VerticalAlignment="Top"
IsItemClickEnabled="True"
ItemClick="OnGameClick"
ItemTemplate="{StaticResource listView}"
ItemsSource="{Binding Source={StaticResource viewSource}}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.IsVerticalScrollChainingEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,0,0">
<TextBlock FlowDirection="LeftToRight"
Style="{StaticResource eaderStyle}"
Text="{Binding Key}" />
</Grid>
<!-- <local:GroupHeader Width="800" Height="35" /> -->
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="0,0,20,0" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</Grid>
And this in the local resources:
<Style TargetType="GridView">
<Setter Property="Padding" Value="0,0,0,10" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
<Setter Property="IsSwipeEnabled" Value="True" />
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition />
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<!--
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridView">
<ItemsPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
-->
</Style>
<Style TargetType="GridViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="LayoutRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Disabled" />
<VisualState x:Name="Pressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected" />
<VisualState x:Name="SelectedUnfocused" />
<VisualState x:Name="SelectedDisabled" />
<VisualState x:Name="SelectedPointerOver" />
<VisualState x:Name="SelectedPressed" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="InnerGrid" Background="Transparent">
<Rectangle x:Name="PressedBackground"
Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}"
Opacity="0" />
<ContentPresenter x:Name="ContentPresenter"
Margin="0,0,5,5"
HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}" />
<Rectangle x:Name="FocusVisualWhite"
Opacity="0"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset=".5"
StrokeEndLineCap="Square" />
<Rectangle x:Name="FocusVisualBlack"
Opacity="0"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeDashArray="1,1"
StrokeDashOffset="1.5"
StrokeEndLineCap="Square" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do you (re)populate the gridview? Are you setting it to empty before repopulating? That might help.
e.g. try adding this before you set the source for the gridview after the user selects the combobox item:
GridGames.ItemsSource = Nothing
I want to add a header to my ListBoxes and I do this by using a template.
The problem is that if I extend the ListBox's template it seems that the listbox's virtualizingstackpanel doesn't work anymore as expected: it loads all content before I can scroll it.
I found some relevant questions in stackoverflow like this (VirtualizingStackPanel stops working when overriding the default control template for ScrollViewer) but the solution given there cannot be applied to WP7: I can't find the property named "CanContentScroll" of the scrollviewer.
my code
<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}">
<StackPanel>
<TextBlock Text="..."/>
<ItemsPresenter/>
</StackPanel>
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To be honest, I'm really not sure what the actual problem is here; the VirtualizingStackPanel is still in the visual tree, but it seems that none of the items actually added. Enough of the bad news, the good news is I've found a way to work round it, by changing the default style of the ScrollViewer to place the header there instead, which results in two styles that look like this:
<Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollViewer">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ScrollStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Scrolling">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="VerticalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="HorizontalScrollBar"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="NotScrolling">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="{TemplateBinding Padding}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Header" Style="{StaticResource PhoneTextLargeStyle}"/>
<ScrollContentPresenter x:Name="ScrollContentPresenter"
Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
<ScrollBar x:Name="VerticalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Height="Auto"
Width="5"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{TemplateBinding VerticalOffset}"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}" />
<ScrollBar x:Name="HorizontalScrollBar"
Grid.RowSpan="2"
IsHitTestVisible="False"
Opacity="0"
Width="Auto"
Height="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
IsTabStop="False"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{TemplateBinding HorizontalOffset}"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ListBoxStyle2" TargetType="ListBox">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
Style="{StaticResource ScrollViewerStyle1}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>