I have a ListView like this
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Transparent" VerticalAlignment="Stretch"
SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Multiple" HorizontalAlignment="Stretch" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0 0 0 1"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
When this Listview Renders on-page, it comes with Default Checkbox inside each item. I want to hide those Checkboxes and show only data. how can I achieve this?
This is how the ListView looks now
Hide Default checkbox inside MultiSelect ListView (UWP)
That could be approached easily by edit the <Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">,(in generic.xaml file) you could find the checkbox was made with MultiSelectSquare Border, we just add the edit Normal VisualState like the following, and the checkbox will be hidden when Multiple SelectionMode.
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Usage
<ListView
Name="TestList"
IsItemClickEnabled="True"
ItemClick="ListView_ItemClick"
ItemContainerStyle="{StaticResource ListViewItemExpanded}"
SelectionMode="Multiple"
Visibility="Visible"
>
You can fix it by changing ListView to ListBox:
<ListBox
ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}"
Background="Transparent"
VerticalAlignment="Stretch"
SelectionChanged="StudentsList_SelectionChanged"
x:Name="StudentsList"
SelectionMode="Multiple"
HorizontalAlignment="Stretch" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0 0 0 1"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Related
I have an Hamburger menu with ListBox ,(Image and Title of the menu item), i bind the list of these data(image and title) to the ListBox, Upto its fine, I want to show a tooltip with the item Title text(on mouse hover on image) with a Teal Background
If you want to show Tooltip on your ListViewItem, Add ToolTipService Like Below.
<ListViewItem Content="Hello" ToolTipService.Placement="Bottom" >
<ToolTipService.ToolTip>
<Grid>
<Rectangle Fill="Teal" />
<TextBlock Text="Hello" Foreground="White" Margin="10"/>
</Grid>
</ToolTipService.ToolTip>
</ListViewItem>
If you want to do it in DataTemplate
<DataTemplate >
<ToolTipService.ToolTip>
<Grid>
<Rectangle Fill="Teal" />
<TextBlock Text="Hello" Foreground="White" Margin="10"/>
</Grid>
</ToolTipService.ToolTip>
</DataTemplate>
Now you can notice that Tool Tip will show you the text with Teal Background. Problem is you still have a faded white border around your Teal Background.
To Correct this, Add below to your Application.Resources in App.xaml
<Application.Resources>
<!-- Default style for Windows.UI.Xaml.Controls.ToolTip -->
<Style TargetType="ToolTip">
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeHighBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ToolTipBorderThemeThickness}" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ToolTipContentThemeFontSize}" />
<Setter Property="Padding" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<ContentPresenter x:Name="LayoutRoot"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
MaxWidth="320"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
TextWrapping="Wrap" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OpenStates">
<VisualState x:Name="Closed">
<Storyboard>
<FadeOutThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="Opened">
<Storyboard>
<FadeInThemeAnimation TargetName="LayoutRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
If you notice i changed Padding to 0.
I want to remove the animation effect after drop the gridviewitem in gridview.
I have edited the ItemContainerStyle as follows, but don't know which VisualStates has to be change
<GridView SelectionMode="None" Margin="10" AllowNewGroup="True" ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollMode="Enabled" BeforeDrop="MyGridView_BeforeDrop"
Drop="MyGridView_Drop" AllowDrop="True" CanReorderItems="True"
CanDragItems="True" IsSwipeEnabled="True" ItemsSource="{Binding}"
ItemTemplate="{StaticResource ItemTemplate}" >
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
...
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GridView.ItemContainerStyle>
</GridView>
So if we go check out a Style template and weed our way through all the noise you should come across;
<VisualState x:Name="DraggingTarget">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="ContentBorder" />
</Storyboard>
</VisualState>
That should be your culprit you can pull out or comment out or whatever you want to do. DropTargetItemThemeAnimation is better explained by the docs. Hope this helps, have a great weekend!
I have a template written in xaml. Can you write how a template is turned on for TextBox?
<Grid.Resources>
<Storyboard x:Key="FlashErrorIcon">
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:03.2000000" Value="{x:Static Visibility.Visible}"/>
<DiscreteObjectKeyFrame KeyTime="00:00:01" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="Background" Value="Pink"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="True"
ToolTip="{Binding ElementName=controlWithError,Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<Ellipse DockPanel.Dock="Right"
ToolTip="{Binding ElementName=controlWithError,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
Width="15" Height="15"
Margin="-25,0,0,0"
StrokeThickness="1" Fill="IndianRed" >
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFFA0404" Offset="0"/>
<GradientStop Color="#FFC9C7C7" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource FlashErrorIcon}"/>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<TextBlock DockPanel.Dock="Right"
ToolTip="{Binding ElementName=controlWithError,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
Foreground="White"
FontSize="10"
Margin="-15,5,0,0" FontWeight="Bold">!
<TextBlock.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource FlashErrorIcon}"/>
</EventTrigger>
</TextBlock.Triggers>
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder Name="controlWithError"/>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
I tried to include in TextBox different ways, but I didn't manage to do it. How to include this template?
<TextBox>?????????What should I write here???????????>
?????????What should I write here???????????
</TextBox>
How to turn on the template? Any help will be appreciated!
You forgot to add the key textBoxInError to your TextBox style:
<Grid.Resources>
...
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
...
</Style>
...
</Grid.Resources>
Without that key the Style is handled as default style for TextBox. In that case you would not explicitly reference a Style in your TextBox declaration, and would have to remove the Style="{StaticResource textBoxInError}" part.
EDIT: If your Style is contained in a resource dictionary (like Grid.Resources in your XAML) and has a Key as shown above (textBoxInError), you would use that Style like this:
<Grid>
<Grid.Resources>
<Style x:Key="textBoxInError" TargetType="{x:Type TextBox}">
...
</Style>
...
</Grid.Resources>
...
<TextBox Style="{StaticResource textBoxInError}" ... />
</Grid>
You style has the following deceleration:
This means this style will be applied to all textboxs. Unless you set a different style yourself.
When you write this:
<TextBox Validation.ErrorTemplate="{StaticResource FlashErrorIcon}"
Style="{StaticResource textBoxInError}" TabIndex="1" Margin="147,145,168,131">
You're changing the default style (to the one named textboxInError ) ...
So just remove the Style attribute from the textbox.
Another Solution
If you want to give the style a specific name and not make it the default style, use:
<Style TargetType="{x:Type TextBox}" x:Key="textBoxInError" >
And then your original code will work correctly
e.g.
<TextBox Style="{StaticResource textBoxInError}" />
I'm trying to change the background color on a "ListBox" on a WinRT page (XAML). When I use the "Background" property, it changes the background how I want it when the control doesn't have the focus. When it gets the focus, it changes to White and I can't figure out how to override it.
My question, how to I force the background of the ListBox to always be Gray whether it's selected/has focus or not?
XAML #1:
<ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0">
<ListBoxItem>Menu Item 1</ListBoxItem>
<ListBoxItem>Menu Item 2</ListBoxItem>
<ListBoxItem>Menu Item 3</ListBoxItem>
</ListBox>
XAML #2 (with each item also set):
<ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top">
<ListBoxItem Background="LightGray">Menu Item 1</ListBoxItem>
<ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem>
<ListBoxItem Background="LightGray">Menu Item 3</ListBoxItem>
</ListBox>
As temporary solution, I set the ListBox to only be a hard coded height, then used a border on that column to fill in the rest of the space with LightGray. I really would like to just always set the Background color on the ListBox though, is this possible?
You can just put some colour brush overrides in your XAML resource file to override the default ListBox control template colours.
<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="Transparent" />
Use Visual Studio Blend 2012 and edit the ListBox ItemTemplate or it's template, which will create a hard copy in the XAML, where you can edit it's properties.
I ran into the same issue and I used the help of Visual studio Blend. Hope this helps.
Add a style to the ListBoxMenu as follows:
<ListBox x:Name="ListBoxMenu" Style="{StaticResource ListBoxStyle1} Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top">
<ListBoxItem Background="LightGray">Menu Item 1</ListBoxItem>
<ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem>
<ListBoxItem Background="LightGray">Menu Item 3</ListBoxItem>
</ListBox>
Then specify the styling as follows:
<Style x:Key="ListBoxStyle1" TargetType="ListBox">
<Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
<Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppBarBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ScrollViewer">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer">
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The above sample would replace the background of you List box container to Black when the focus is set to the ListBox.
If you need some more help on customizing the colors of Items in a ListBox, ListView or GridView, they all work on the same principle, just be sure to update the TargetType properties, I'd recommend having a look at Vito DeMercurio's blog post Styling a GridViewItem in WinRT
I created a style and controltemplate for my ComboBox and I would like to dress it up with an animation.
How do I create a storyboard animation for when I hover in a ComboBoxItem the highlight will fade in and once I hover out, the highlight fades out as well? Thanks!
Here is my code so far:
<!--Area which contains selected items in the ComboBox-->
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<!--THIS MUST BE NAMED AS Part_ContentHost-->
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}"/>
</ControlTemplate>
<!--ComboBox Style. Uses ComboBoxToggleButton to expand and collapse a Popup control SimpleScrollViewer to all items to be scrolled and SimpleComboBoxItem to define the look of each item. The Popup shows a list of items in a StackPanel-->
<Style TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<!--The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen-->
<ToggleButton Grid.Column="2" Template="{DynamicResource ComboBoxToggleButton}" x:Name="ToggleButton" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="True"/>
<!--The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it-->
<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" IsReadOnly="{TemplateBinding IsReadOnly}" />
<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{DynamicResource ComboBoxWindowBackgroundBrush}" BorderBrush="{DynamicResource ComboBoxSolidBorderBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<!-- This forces the DropDown to have a minimum size if it is empty -->
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--This is used for each item inside of the ComboBox. You can change the selected color of each item below-->
<Style TargetType="ComboBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Grid SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.004*"/>
<ColumnDefinition Width="0.996*"/>
</Grid.ColumnDefinitions>
<Border x:Name="BorderItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border x:Name="BorderSelectedItem" Grid.Column="1" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Path x:Name="ItemSelectedArrow" Data="M0.5,0.25 L0.5,22.25 19.5,22.25 z" Fill="#FFFFB14C" HorizontalAlignment="Left" Width="10.248" Height="10" Stretch="Fill" StrokeThickness="0" Margin="-0.376,-0.168,0,-0.332" Grid.Column="1" Visibility="Hidden">
</Path>
</Border>
<ContentPresenter x:Name="ContentSite" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2,2,0,2"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Change IsHighlighted SelectedBackgroundBrush to set the selection color for the items -->
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Background" Value="{DynamicResource ComboBoxSelectedBackgroundBrush}" TargetName="BorderSelectedItem"/>-->
<Setter Property="Visibility" Value="Visible" TargetName="ItemSelectedArrow"/>
<Setter Property="Margin" Value="10,2,0,2" TargetName="ContentSite"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource ComboBoxHighlightBackgroundBrush}" TargetName="BorderItem"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So with your Item Template opened in blend go to your States Tab (Or just do it directly in your VisualStateManager XAML for your MouseOver State) and for starters adjust your Time Duration to a longer time to decrease the speed of the transition and make the fade effect appear. You can also set your Transition Effect and Easing Function to provide some further coolness to your simple transition. It's easiest just using blend but here's a quick n dirty xaml example that might give a better idea. Hope it helps, good luck!
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal" **GeneratedDuration="0:0:0.15"** To="MouseOver">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseIn" Exponent="7"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="MouseOver" **GeneratedDuration="0:0:0.15"** To="Normal">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition GeneratedDuration="0:0:0.15"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverBorder">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="1.0" KeySpline="0,0,0.0299999993294477,0.920000016689301"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="{StaticResource BaseColor2}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
</Storyboard>
</VisualState>