ControlTemplate(Style) binding ItemsSource property - xaml

I want to do a data binding in a Style(ControlTemplate) in a ListView
My ListView looks like:
<ListView ItemTemplateSelector="{StaticResource ItemTemplate_Selector}" ItemContainerStyleSelector="{StaticResource ItemContainerStyle_Selector}"/>
Most of properties fetched from ItemsSource are binding in the DataTemplate:
e.g.
<DataTemplate x:Key="OneOfItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Name}"/>
<StackPanel Grid.Row="1">
<RichTextBlock Grid.Column="0" local:HyperlinkExtensions.Text="{Binding Message}"/>
<TextBlock Grid.Column="1" Text="{Binding Time}"/>
</StackPanel>
</Grid>
</DataTemplate>
For the reason that there's a area that will be affected by different visual state and there's a property displayed in that area, so I have to binding it in the ItemContainerStyle like:
e.g.
<Style x:Key="HeadPicStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Header" Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock x:Name="HeaderText" Text="{Binding Header}"/>
</Grid>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveStatesTest">
<VisualState x:Name="DefaultStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideStateChangeThreshold}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="NarrowStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowStateWindowWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Header.Width" Value="100"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
On my perspective, the itemContainerStyle is targeted to the itemSource in the ListView, so I can access it's property (means I can directly binding the property name)
However, the HeaderText's text can not be seen in the app.
I'm wondering if my binding in the style is wrong or not?

Related

How to apply same style to all the textbox's at visual state setters in a single setter using uwp

I want to apply same width to all the textbox's. So if the screen size changes then I need to change the textboxs width. For that I want apply a style in a single setter at visual state (xaml).
How can I achieve this?
I agree with #Chris W, and if I didn't misunderstand your question, you wanted to create one single style for all the TextBoxs and you want to change the width in this style when window's size changed.
If you insist to design your layout in this way, you can create a VisualStateGroup in the default template style of TextBox for example like this:
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<!--<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />-->
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.Resources>
...
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
</VisualStateGroup>
<VisualStateGroup x:Name="ButtonStates">
...
</VisualStateGroup>
<VisualStateGroup>
<VisualState x:Name="Mobile">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BorderElement.Width" Value="250" />
<Setter Target="HeaderContentPresenter.Width" Value="250" />
<Setter Target="ContentElement.Width" Value="210" />
<Setter Target="PlaceholderTextContentPresenter.Width" Value="250" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PC">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="BorderElement.Width" Value="450" />
<Setter Target="HeaderContentPresenter.Width" Value="450" />
<Setter Target="ContentElement.Width" Value="410" />
<Setter Target="PlaceholderTextContentPresenter.Width" Value="450" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" />
<ContentPresenter x:Name="HeaderContentPresenter" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{ThemeResource TextControlHeaderForeground}" FontWeight="Normal" Margin="0,0,0,8" Grid.Row="0" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollVie
<ContentControl x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Content="{TemplateBinding PlaceholderText}" Foreground="{ThemeResource TextControlPlaceholderForeground}" IsHitTestVisible="False" IsTabStop="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" />
<Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" Margin="{ThemeResource HelperButtonThemePadding}" MinWidth="34" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" V
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And you can apply this style in all your textboxs for example like this:
<TextBox Style="{StaticResource TextBoxStyle}" Height="100" />

Menu button at the bottom UWP Hamburger Navigation pane

I am currently building a hamburger menu for my UWP app build using SplitView.Pane. The "Buttons" are listBoxItems in a listBox. Is there a way to make the setting icon be located at the bottom of the SplitView.Pane like in the native windows new App...Thanks
try this sample .....
it's working good like a native app
https://mohamedsaqer.wordpress.com/category/xaml/
use 2 ListBox inside a RelativePanel. in down listbox set RelativePanel.AlignBottomWithPanel="True" and when select item from the fist listbox set the selectedIndex=-1 for the other listBox
<SplitView.Pane>
<RelativePanel>
<ListBox x:Name="UpperListBox">
<ListBoxItem .....
</ListBox>
<ListBox x:Name="DownListBox" RelativePanel.AlignBottomWithPanel="True">
<ListBoxItem .....
</ListBox>
</RelativePanel>
There is no easy (if any) way to align part of ListBox items on the top and another part on the bottom, so the answer is pretty simple - don't use ListBox and build necessary layout manually. For example, like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Button x:Name="TopButton1" Grid.Row="0" Content="TopButton" />
<Button x:Name="TopButton2" Grid.Row="1" Content="TopButton" />
<Button x:Name="TopButton3" Grid.Row="2" Content="TopButton" />
<Button x:Name="BottomButton" Grid.Row="4" Content="BottomButton" />
</Grid>
Btw, it's recommended to use ListView instead of ListBox in UWP apps.
I have an app with ham menu and I use Radio Buttons. In the group propertie of radio button I use the same group name. That way you can use any layout you like, for ex grid, with stack panels and your buttons can be anywhere. When you tapp any button it will selected like listview and tapping another one will unselect and select the new one.
Hum Menu
<SplitView.Pane>
<Grid>
<StackPanel>
<ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Tapped="HamburgerButton_Tapped" Foreground="White"
FontSize="16" FontWeight="Bold" Style="{StaticResource HamburgerToggleButtonStyle}" />
<RadioButton Content="Top 1" x:Name="btn1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 2" x:Name="btn2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="True" Foreground="White" GroupName="HamMenu"/>
<RadioButton Content="Top 3" x:Name="btn3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
<StackPanel VerticalAlignment="Bottom">
<RadioButton Tag="" Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
<RadioButton Tag="" Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Style="{StaticResource RadioButtonStyle1}" IsChecked="False" Foreground="White" GroupName="HamMenu"/>
</StackPanel>
</Grid>
</SplitView.Pane>
Radio button Style
<Style x:Key="RadioButtonStyle1" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="Padding" Value="8,6,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="UseSystemFocusVisuals" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="MainRadioGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#7FFFFFFF" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SecondaryRadioGrid" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="MainRadioGrid.(Panel.Background)">
<Setter.Value>
<SolidColorBrush Color="White"/>
</Setter.Value>
</Setter>
<Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate">
<VisualState.Setters>
<Setter Target="ContentPresenter.(ContentPresenter.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="IconTextHum.(TextBlock.Foreground).(SolidColorBrush.Color)">
<Setter.Value>
<Color>Black</Color>
</Setter.Value>
</Setter>
<Setter Target="SecondaryRadioGrid.(Panel.Background).(SolidColorBrush.Color)">
<Setter.Value>
<Color>#02000000</Color>
</Setter.Value>
</Setter>
<Setter Target="MainRadioGrid.(Panel.Background)">
<Setter.Value>
<SolidColorBrush Color="White"/>
</Setter.Value>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SecondaryRadioGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#02000000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="grid1" Height="50" VerticalAlignment="Top" Width="50">
<TextBlock x:Name="IconTextHum" TextWrapping="Wrap" Text="{TemplateBinding Tag}" d:LayoutOverrides="Width, Height" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="21.333"/>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" TextWrapping="Wrap" VerticalAlignment="Center" Margin="10,0,0,0"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You should use a RelativePanel element:
<SplitView.Pane>
<RelativePanel>
<StackPanel RelativePanel.AlignTopWithPanel="True">
...
</StackPanel>
<StackPanel RelativePanel.AlignBottomWithPanel="True">
...
</StackPanel>
</RelativePanel>
</SplitView.Pane>

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>

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.

how to display data in rows and columns XAML windows 8

In metro style windows 8 application, how can i display the data using xaml similar to this (https://dl.dropbox.com/u/59251888/img.png)image. is it possible using ListBox,ListView,GrdView.. ?
Yes, but you need to style it up so that it looks like a datagrid. (Assuming you are developing in XAML based on the tags you've assigned to this question). The trick is to make a data template that uses a Grid with columns with proper widths, alignments etc.
I've done something similar - using a ListView. This could be modified to make the backgrounds appear only for cells as opposed to rows - which I have done. Hope this helps:
XAML:
<ListView
VerticalAlignment="Top"
Margin="0,5"
ItemsSource="{Binding HighestExpensesAlternatingList}"
ItemTemplate="{StaticResource HighestExpensesTemplate}"
BorderBrush="#19FFFFFF" BorderThickness="1,0,0,0"
SelectionMode="None" IsItemClickEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemContainerStyle="{StaticResource SimpleListViewItemStyle}"
IsHitTestVisible="False"/>
<DataTemplate x:Key="HighestExpensesTemplate">
<Grid Width="500" VerticalAlignment="Center" Margin="5,0"
Background="{Binding AlternatingIndexBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.DateString}" />
<TextBlock Grid.Column="1" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.Description}" />
<TextBlock Grid.Column="2" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.AmountStringCurrencyFormat}"
HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
<Style x:Key="SimpleListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="False"/>
<Setter Property="IsDoubleTapEnabled" Value="False"/>
<Setter Property="IsRightTapEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="Container"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Container">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>