ListView - disable the mouse-down behavior - xaml

I have a ListView in my Windows Store app. I want it to be a static list (I'm using it because it supports virtualization, but if I should be using something else, let me know!). I've managed to disable most of the UI changes with mouse over, etc. However, one thing I've not figured out how to do is remove the click behavior. When you click on an item it shrinks a bit to give you feed back that it has been clicked. How do I turn that off?
Here is my ListView XAML:
<ListView x:Name="SlideStrip"
SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource PlainOldList}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<local:PDFPageUserControl
Margin="0 0 5 0"
ViewModel="{Binding}"
RespectRenderingDimension="Vertical" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The PlainOldList style is as follows:
<Style x:Key="PlainOldList" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter x:Name="listViewItemPresenter"
CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
ContentMargin="0"
ContentTransitions="{TemplateBinding ContentTransitions}"
CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
PointerOverBackgroundMargin="0"
PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
SelectionCheckMarkVisualEnabled="True"
SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}"
SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
</ListViewItemPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I'm pretty convinced what I need to do is edit the visual states for the item container style. But I'm at a complete loss as to what visual state. Clicking on them in blend never show a transform that is active. I tried setting one or two to be zero explicitly, but that failed (perhaps because I didn't know how to override a default behavior or chose the wrong state).
Any help appreciated!

See ListViewItemExpanded style with all visual states.
I removed all unnecessary
<Style TargetType="ListViewItem" x:Key="ListViewItemWithoutEffectStyle">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed"/>
<VisualState x:Name="CheckboxPressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected"/>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable" />
<VisualState x:Name="DataPlaceholder"/>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualState x:Name="NoMultiSelect" />
<VisualState x:Name="ListMultiSelect"/>
<VisualState x:Name="GridMultiSelect"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualState x:Name="ReorderEnabled"/>
<VisualState x:Name="Reorderable"/>
<VisualState x:Name="ReorderDisabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint" />
<VisualState x:Name="BottomReorderHint"/>
<VisualState x:Name="RightReorderHint"/>
<VisualState x:Name="TopReorderHint"/>
<VisualState x:Name="LeftReorderHint"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Border x:Name="ContentContainer">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />
</Grid>
</Border>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

How to keep radiobutton width from expanding when text is bolded on click

I have these two radio buttons, and on click i am making the text inside the radio button bold. When this happens, the width of the radio button increases by a few pixels. How can I keep this from happening? In this example the "Content" inside the radio button is hard coded, but this wont be hard coded in the future, so giving the buttons a set width is not an option. Any ideas on how i can accomplish this?
<Page
x:Class="ButtonTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
<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="0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="Purple" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
<Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
<Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
</VisualState.Setters>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height="32" VerticalAlignment="Top">
<Border x:Name="TopBorder" BorderBrush="#FF054EEA" BorderThickness="0,5,0,0" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="82" Margin="15,1,-77,0" Visibility="Collapsed"></Border>
</Grid>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
<ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="13,183,231,411">
<RadioButton Content="RadioButton" x:Name="Radio1" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
</Grid>
<Grid Margin="13,257,227,341">
<RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" />
</Grid>
</Grid>
Just place this invisible TextBlock next to your ContentPresenter.
<TextBlock Text="{TemplateBinding Content}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextWrapping="Wrap"
Opacity="0"
IsHitTestVisible="False"
FontWeight="Bold"
Margin="{TemplateBinding Padding}" />

Keep PointerOver from changing text color of Checked button

I am having issue trying to have a set of radio buttons behave as buttons, and my goal is to have the text color of the buttons change on hover, and to have it go back to original color and be bolded on click. I am implementing recomendations on a previous similar question here but I seem to be doing something wrong because I am not getting the desired behavior. When I hover over the buttons the PointerOver is still changing the text color of a "Checked" button
<Page.Resources>
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
<Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
<Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>
<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="FocusVisualMargin" Value="-7,-3,-7,-3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="Purple" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
<Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
<Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,165,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
<RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,235,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
<RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,94,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" />
</Grid>
I think you are almost there except some minor padding issues.
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
<Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
<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="0" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Padding" Value="16,12" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="ContentPresenter.Foreground" Value="Purple" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
</VisualState>
<VisualState x:Name="Disabled">
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
<Setter Target="ContentPresenter.FontWeight" Value="Bold" />
<Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
<Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
<ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to add custom tooltip for a listbox items

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.

How to Style PivotItem Header

I have an existing Pivot header template I am using, but it is not giving me the effect I need. I need the currently selected PivotItem to have a blue foreground and white background, while all other pivot items have a standard disabled foreground and background look. Currently below I have what I believe is everything except the blue foreground on the selected PivotItem, but I cannot figure out how to apply a foreground correctly to only the selected item?
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="21,0,1,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneDisabledColor}"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneBackgroundColor}"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="{TemplateBinding Background}">
<ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
<ContentControl x:Name="TitleElement" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,0,0,-7" Style="{StaticResource PivotTitleStyle}"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" FontSize="70"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Change the <ContentPresenter> to a <TextBlock>
Like so
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
<ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Green"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0:0:1" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="PaleGreen"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
<ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border_highlight" Background="{TemplateBinding Background}" >
<!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>-->
<TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"></TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you can animate the Foreground. Here's a screenshot of the above code. With Selected Color = Blue and Unselected Color = Green. You will need to add back in your background animation though.
#Teysz, I think that with Windows 10 UWP you better start from the default style for PivotItemHeader and make a copy of that in the ..Resources section of your XAML file. The default style cannot be inserted by Visual Studio 2015 so you have to get it yourself from:
%ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
I found this at http://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/

windows phone listbox ItemTemplate binding to listBoxItem

I have a Button in my ListBox's ItemTemplate and I want to binding its Visibility to ListBox Item IsSelected. So, the Button is showed when the item is selected.
I find the following code which work fine on WPF:
<Button Visibility="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}, AncestorLevel=1},Path=IsSelected}"ļ¼ŒConverter={StaticResource BooleanToVisibilityConverter}/>
But RelativeResource on windows phone is not support FindAncestor mode.
Anyone have any advice ?
Use can use ItemContainerStyle of ListBox:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}" Visibility="{Binding Visibility}" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="testbutton">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="Center" Margin="{TemplateBinding Padding}" VerticalContentAlignment="Center"/>
<Button x:Name="testbutton" Visibility="Collapsed" Width="200" Height="100" Content="Test button"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And,
<ListBox Width="480" Background="DarkGray"
ItemContainerStyle="{StaticResource ListBoxItemStyle}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="{Binding Header}" TextAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>