Wp 8.1 xaml issue - xaml

I have TemplatedControl defined as:
<Style TargetType="controls:HeaderedContentControl">
<Setter Property="HintAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:HeaderedContentControl">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Background="Gray">
<TextBlock Text="{TemplateBinding Header}"
FontSize="25"
Foreground="White"
TextWrapping="Wrap"
Margin="0,10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ScrollViewer Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Visibility="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource strConv}}"
Text="{TemplateBinding Hint}"
TextAlignment="{TemplateBinding HintAlignment}"
TextWrapping="Wrap"
Foreground="Gray"
FontSize="17"
Margin="10"/>
<ContentPresenter Content="{TemplateBinding Content}"
Grid.Row="1"/>
</Grid>
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sometimes after navigation to the page with this control I see
this
instead of
this
I think this occurs because of BottomAppBar on the page. How can I get round this issue?
Layout where this control is used:
<controls:HeaderedContentControl Header="Регистрация">
<StackPanel Margin="10,40">
<TextBlock Text="Номер телефона:"
FontSize="20"/>
<Grid Margin="0,15">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="8"
Margin="10,0"
VerticalAlignment="Center"
FontSize="20"/>
<controls:PhoneTextBox Value="{Binding PhoneNumber, Mode=TwoWay}"
AddContactVisibility="Collapsed"
Margin="0"
Grid.Column="1"/>
</Grid>
<TextBlock Text="Номер вводится без 8-ки. Пример: (XXX)XXX-XX-XX"
FontSize="15"
Foreground="Gray"
TextWrapping="WrapWholeWords"/>
</StackPanel>
</controls:HeaderedContentControl>
<Page.BottomAppBar>
<CommandBar>
<AppBarButton Label="Далее"
Icon="Accept"
Command="{Binding RegisterCommand}"/>
</CommandBar>
</Page.BottomAppBar>

Related

Overlay element over ContentControl's ContentPresenter

I am trying to get this seemingly simple scenario to work.
I have a ContentControl MyControl, and I would like one of it's elements to overflow on top of the ContentPresenter while remaining an element of a border.
<Page
x:Class="Playground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Playground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Playground"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="local:MyControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" BorderBrush="GreenYellow" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
<Rectangle x:Name="Overflow" Grid.Column="1" Width="100" Height="200" Fill="Gold" HorizontalAlignment="Center"/>
<Rectangle Grid.Column="2" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
</Grid>
</Border>
<ContentPresenter Grid.Row="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<controls:MyControl Grid.Row="0" BorderBrush="Gold" BorderThickness="1">
<Ellipse Fill="Silver"/>
</controls:MyControl>
</Page>
I have tried playing with Canvas.ZIndex but I cannot get this particular scenario to work. Just to re-iterate, I would like the gold rectangle to overflow over all of the content in the ContentPresenter, but I would like the border and two squares to remain as they are.
Edit: The source for this project is here if anybody s interested in playing with it.
So you want the middle rectangle to be a part of your border but it should go out of the border bounds?
For this you can only use negative Margin.
In order to overlay the content you border should be the second child of the the parents Grid.
sumarizing everithing we have:
<Style TargetType="local:MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1" />
<Border
Grid.Row="0"
BorderBrush="GreenYellow"
BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle
Grid.Column="0"
Width="50"
Height="50"
HorizontalAlignment="Center"
Fill="Silver" />
<!--Pay attention to Margin="0,0,0,-100"-->
<Rectangle
x:Name="Overflow"
Grid.Column="1"
Width="100"
Height="200"
Margin="0,0,0,-100"
HorizontalAlignment="Center"
Fill="Gold" />
<Rectangle
Grid.Column="2"
Width="50"
Height="50"
HorizontalAlignment="Center"
Fill="Silver" />
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hacky workaround I came up with - problem is the rectangle is no longer part of the border and as such can't be easily laid out with respect to the border.
<Page
x:Class="Playground.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Playground"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Playground"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="local:MyControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="1"/>
<Border Grid.Row="0" BorderBrush="GreenYellow" BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
<Rectangle Grid.Column="2" Width="50" Height="50" Fill="Silver" HorizontalAlignment="Center"/>
</Grid>
</Border>
<Rectangle Grid.Row="0" Grid.RowSpan="2" x:Name="Overflow" Grid.Column="1" Width="100" Height="200" Fill="Gold" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<controls:MyControl Grid.Row="0" BorderBrush="Gold" BorderThickness="1">
<Ellipse Fill="Silver"/>
</controls:MyControl>
</Page>

Wait for binding update, then lose focus on ListViewItem

So I have a ListView. It has a ItemSource and a SelectedItem.
The SelectedItem has a bool property that toggles the visibility of the Button and TextBox.
When you press in the ListViewItem I want to be able to toggle the visibility on and off, even if I just spam the row.
The solution is partly working, except that SelectedItem is only fired when the Item don't have focus. So when I have toggled one time, I have to do it to another item to toggle the first again.
I have thought about code-behind, add something to the GotFocus-method, but can't think of what I have to do there.
Suggestions?
XAML:
<ListView ScrollViewer.VerticalScrollMode="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.IsVerticalRailEnabled="False"
Background="White"
ItemsSource="{Binding Activities}"
SelectedItem="{Binding SelectedActivity, Mode=TwoWay}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ListViewItemPresenter
ContentTransitions="{TemplateBinding ContentTransitions}"
SelectionCheckMarkVisualEnabled="True"
CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
PlaceholderBackground="White"
PointerOverBackground="LightGray"
PointerOverForeground="DarkGray"
SelectedBackground="White"
SelectedForeground="DimGray"
SelectedPointerOverBackground="White"
PressedBackground="White"
SelectedPressedBackground="White"
DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
ContentMargin="{TemplateBinding Padding}"
CheckMode="Inline"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.Header>
<StackPanel Background="#8c8c8c"
Orientation="Horizontal"
FlowDirection="LeftToRight"
Padding="8,8,8,8">
<TextBlock Text="{Binding Title}"
FontSize="18"
Foreground="White"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="10,0,0,0"/>
</StackPanel>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="0,10,0,10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical"
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="6,2,6,2">
<TextBlock FontSize="20"
VerticalAlignment="Center"
Foreground="DimGray"
TextWrapping="WrapWholeWords"
Text="{Binding Activity.Description}"/>
<TextBlock FontSize="15"
VerticalAlignment="Center"
Foreground="DimGray"
Text="{Binding Activity.Condition}"/>
</StackPanel>
<Button Grid.Row="0"
Grid.Column="1"
Grid.RowSpan="2"
Margin="6"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Background="Transparent"
BorderBrush="Transparent"
BorderThickness="0"
Command="{Binding ToggleMeasureCompletionCommand}">
<Grid>
<TextBlock FontFamily="Segoe MDL2 Assets"
FontSize="35"
Foreground="DimGray"
Text=""
Margin="8"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Visibility="{Binding IsCompleted, Converter={StaticResource InverseBooleanToVisibilityConverter}}"/>
<TextBlock FontFamily="Segoe MDL2 Assets"
FontSize="35"
Foreground="DimGray"
Text=""
Margin="8"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Visibility="{Binding IsCompleted, Converter={StaticResource BoolToVis}}"/>
</Grid>
</Button>
<Grid Visibility="{Binding IsInFocus, Converter={StaticResource BoolToVis}}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,10,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" PlaceholderText="Kommentar til tiltak" HorizontalAlignment="Stretch" Padding="5" Margin="0,0,10,0"/>
<Button Grid.Column="1" Content="Flag" HorizontalAlignment="Right" Foreground="White" Padding="10,5,10,5">
<Button.Background>
<SolidColorBrush Color="Red" Opacity="0.5" />
</Button.Background>
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
C# - property:
public SelectedItemViewModel SelectedActivity
{
get { return _selectedActivity; }
set
{
_selectedActivity = value;
SelectedActivity.IsInFocus = !SelectedActivity.IsInFocus;
OnPropertyChanged();
}
}
Write this code SelectedActivity.IsInFocus = !SelectedActivity.IsInFocus inside ItemClick event of listview.
You can write inside Taped event also

UWP ListView not data

I have a ListView defined like this:
<ListView x:Name="phonesListView"
Grid.Row="5"
Background="Black"
IsItemClickEnabled="True"
Foreground="Gray" >
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid>
<Border x:Name="myback" Background="Transparent">
<ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="20, 0, 20, 0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="auto" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid
Grid.Row="0">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ComboBox
Grid.Column="0"
VerticalAlignment="Center"
Background="Black"
Foreground="White" >
<ComboBoxItem Content="Home" IsSelected="True"/>
<ComboBoxItem Content="Work"/>
<ComboBoxItem Content="Office"/>
<ComboBoxItem Content="Fax"/>
<ComboBoxItem Content="School"/>
</ComboBox>
<Button
Grid.Column="1"
Height="30"
Width="30"
Foreground="Black"
Margin="0, 5, 0, 5"
HorizontalAlignment="Center" Click="RemovePhone">
<Button.Background>
<ImageBrush Stretch="Fill" ImageSource="Assets/appbar.close.png" />
</Button.Background>
</Button>
</Grid>
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number}"
InputScope="TelephoneNumber" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
In code i have attribute:
ObservableCollection<Phone> phones = new ObservableCollection<Phone>();
Everything works fine, I can add and delete items in list view by either
phones.Add or phones.Remove
The problem is for when I'm leaving a page or Save button is pressed the count of this collections is exactly it is supposed to be but there are no data i have filled in input field. Could you help me with that? Thanks.
If you want that the edited data in your ListView flows back to the items so you can save the edits, you'll have to use 2-way binding. When the control (in the sample below your TextBox) loses focus, the value of Text property gets stored back into the bound field (in your sample Number).
<TextBox
Grid.Row="1"
Background="White"
Foreground="Black"
FontSize="18"
Text="{Binding Number, Mode=TwoWay}"
InputScope="TelephoneNumber" />
For more details about binding, read the MSDN article.

Bind ListViewItem's height to the ListView from dataTemplate

I have a ListView in my Windows Store App, which selects a template through dataTemplateSelector. In the ItemTemplate of ListView, i have an image. I don't want to fix the height and width of the image, i want to allow it to adjust itself with the space available. So the image can be displayed bigger in big screen size.
Following is my ListView XAML:
<ListView Name="MyListView" ItemTemplateSelector="{StaticResource MyTemplateConverter}"
Height="{Binding ActualHeight, ElementName=scroll, Converter={StaticResource BottomMarginConverter}}" Width="{Binding ActualWidth, Converter={StaticResource GVWIdthConverter}, ElementName=scroll}"
Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="MyGridView_Tapped">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Background" Value="LightCyan" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have set VerticalContentAlignment to Stretch, this stretches my ListViewItem to the size of ListView, but the problem is when the image inside the Item is bigger, it increases the size of ListViewItem larger than ListView. I have also tried setting the height of ListViewItem in the above code by adding
<Setter Property="Height" Value="{Binding ActualHeight, ElementName=MyGridView}" />
Following is the code of my ItemTemplate, which is being selected through ItemTemplateSelector,
<DataTemplate x:Key="PhotoTemplate">
<Grid x:Name="PhotoTemplateGrid" Width="400" Margin="2" Background="LightPink" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding from.photoUrl}" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70" />
<StackPanel Orientation="Vertical" Margin="10,10,0,0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Grid.Column="1" Text="{Binding from.Name}" Style="{StaticResource SubHeaderText}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" Foreground="{StaticResource StalkerBlueThemeBrush}" />
<TextBlock Text="{Binding created_Time, Converter={StaticResource TextDateConverter}}" Margin="0,0,0,0" Style="{StaticResource BaselineTextStyle}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" FontSize="12" />
</StackPanel>
</Grid>
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,5,0" TextAlignment="Center" MaxHeight="40" HorizontalAlignment="Stretch" Text="{Binding message}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" MaxHeight="20" Margin="5,0,5,0" TextAlignment="Center" Text="{Binding description}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
<Image Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Source="{Binding picture}" Margin="2" />
</Grid>
<Grid Grid.Row="2" Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="Auto" Background="White" >
<Polygon Points="15,0 0,15 30,15" Stroke="LightGray" Fill="LightGray" Margin="20,0,0,0" />
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0" Text="View all comments" Style="{StaticResource BaselineTextStyle}" Foreground="{StaticResource BlueThemeBrush}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,5,0">
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/CtBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding CtCount}" Foreground="White" />
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/LeBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding LeCount}" Foreground="White" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</DataTemplate>
The Grid at Row Number 1 <Grid Grid.Row="1" >, contains the image which makes the height go larger than the ListView. I want to allow this Grid to stretch itself to the size of its parent. But not cross the size of its parent. in other word, i simply want to bind its height to its parent. Please help me out, i am stuck here.
have you tried to change the Row Definition applied for that image to 'Auto'?
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
I have managed to solve this in my own project by binding the Height of the Grid in the DataTemplate to the ActualHeight of the ListView. I does not seem to work if the binding is in the ListView.ItemContainerStyle style as a setter.
<DataTemplate>
<Grid Height="{Binding ActualHeight, ElementName=MyListView}">
...
</Grid>
</DataTemplate>

wp8 pivot control how to change style of unselected pivots

i have a pivot control and i'm wanting to change the style of the unselected pivots. in particular, I want to change the opacity.
I know it has something to do with Primitives:PivotHeadersControl, but I can't figure out what to set on the style for this control.
I have the following style for my pivot
</Grid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="{StaticResource TabHeaderBackgroundBrush}" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock Text="{Binding}" FontSize="28" Margin="15,0,15,0"
Foreground="{StaticResource ForegroundBrush}"/>
</Border>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Transparent" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1" >
</Primitives:PivotHeadersControl>
<Border Margin="0,-1,0,0" BorderBrush="White"
BorderThickness="1" Grid.Row="2"
Background="{StaticResource TabBackgroundBrush}">
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>