How to Change a Pivot Items Body Default Colors - xaml

I have been using a general custom Pivot style in my app, but it is changing the header foreground as well as body foreground to the same color (Blue). I only need the header foreground to change accordingly to my specifications, but the body foreground should remain to be the default application foreground. How might I make that change in the following template?
<Style x:Key="PivotStyleBlue" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<!--<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>-->
<Setter Property="Foreground" Value="Blue"/>
<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 CacheMode="BitmapCache" Grid.RowSpan="2" >
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0.0" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<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"/>
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Change Foreground of HeadersListElement only.
<Primitives:PivotHeadersControl
x:Name="HeadersListElement"
Foreground="Blue"
Grid.Row="1" />

Related

Change Label forground on Stackpanel mouseover

How can I change the foreground of the Label and the TextBlock in my code with just xaml?
Or is it even possible to change the Label foreground as soon as the Stackpanel IsMouseOver event takes place, with just with xaml?
<Window x:Class="MouseOverTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MouseOverTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<!--Color-->
<SolidColorBrush x:Key="BorderDesign" Color="#A73838"/>
<LinearGradientBrush x:Key="ColorDesign" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#A73838" Offset="0"/>
<GradientStop Color="#D87878" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ColorMouseOverDesign" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#D87878" Offset="0"/>
<GradientStop Color="#A73838" Offset="1"/>
</LinearGradientBrush>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="7*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="7*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="SP" Orientation="Vertical" Grid.Column="1" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<StackPanel.Resources>
<Style TargetType="{x:Type StackPanel}">
<Setter Property="Background" Value="{StaticResource ColorDesign}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource ColorMouseOverDesign}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<Button x:Name="BT" Content="TestButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" Margin="0,10,0,5"/>
<Label x:Name="L" Content="Test Label" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBlock x:Name="TB" Text="This is a Test, a Test TextBlock..." VerticalAlignment="Center" HorizontalAlignment="Center" Width="200" Height="50"/>
</StackPanel>
</Grid>
</Window>
The only way I have found so far, was to change it with C# Methods.
But as an result i had for 4 StackPanels 8 Methods...
I can´t find of a proper way to solve this, i would appreciate your help on this problem.
Thanks in advants.
First Question: You can use the Foreground property inside your Label or TextBlock.
Second Question: I've just took one of your Styles and modified it a bit:
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
<Label Margin="10" HorizontalAlignment="Center" Content="Your text" FontSize="20"/>
If you now use a Label as soon as you hover over the Label the Foreground color changes.

UWP - SemanticZoom Header Height

I am currently implementing SemanticZoom for a Windows UWP app. As you may know, items will be grouped into different section (e.g. Group A, Group B, etc.)
The Group name will be the header.
I have changed the default style for SemanticZoom Group Header. Too bad I still can't figure out how to change the height of the header.
Screenshot:
The height of the header is too high for my taste
The Code for the custom SemanticZoom Style
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#ff00fe"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="10"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0 10 10 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML Code for the SemanticZoom
<SemanticZoom >
<SemanticZoom.ZoomedOutView>
<GridView>
...
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView>
<GridView.ItemTemplate>
....
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
Looking forward to your help.
There's couple properties you should set for your custom template: MinHeight and Padding.
The default GridViewHeaderItem template can be found from C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic
From there you can find the things you should change:
Here's the full default style for GridViewHeaderItem.
<!-- Default style for Windows.UI.Xaml.Controls.GridViewHeaderItem -->
<Style TargetType="GridViewHeaderItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource GridViewHeaderItemThemeFontSize}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,4"/>
<Setter Property="Padding" Value="12,8,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="MinHeight" Value="{ThemeResource GridViewHeaderItemMinHeight}"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewHeaderItem">
<StackPanel Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
StrokeThickness="0.5"
Height="1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Margin="12,8,12,0"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using listview instead of gridview,
you have to do three adjustment
1) change minheight and height
2) change the height of grid as highlighted below
3) change the textblock font size also highlighted
<Style x:Key="MyHeaderStyle" TargetType="ListViewItem">
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Top" />
<Setter Property="Height" Value="30" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Margin" Value="0,10,10,0"/>
</Style>
and,
<SemanticZoom.ZoomedInView>
<ListView ItemsSource="{Binding Source={StaticResource Collection}}" ItemContainerStyle="{StaticResource MyHeaderStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
Change the height according to your requirement currently i set
to 30 looking fine also adjust font size of textblock
<!-- Adjust grid height -->
<Grid Name="AdjustmeGrid" Height="30" Margin="0,0,10,0" Width="370">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<!-- Adjust textblock fontsize -->
<TextBlock Name="AdjustmeTextblock" Grid.Column="1" Text="{Binding Title}" VerticalAlignment="Center" Foreground="Black" FontSize="28" />
</Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text='{Binding Key}' Foreground="Black" FontSize="38" />
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
</SemanticZoom.ZoomedInView>
Output

Display content in a UWP app - XAML Control

I am trying to display the content of a UWP app exactly the same way the content is displayed in the Store app (see above).
I used a ListView, but the Items appear right of the Header, instead of appearing straight below it, as you can see on the following screenshot:
This is my XAML:
<Page.Resources>
<local:Items x:Key="Item"/>
<DataTemplate x:Name="myListViewDataTemplate">
<Grid Margin="0" Width="200">
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Path=ItemImage}" Stretch="UniformToFill"/>
<TextBlock Grid.Row="1" Text="{Binding Path=ItemName}" Margin="0,5,0,0"
VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="20"/>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="LightGray">
<ListView ItemTemplate="{StaticResource myListViewDataTemplate}" ItemsSource="{StaticResource Item}">
<ListView.Header>
<TextBlock Margin="20,10,0,10" Text="Group of items" FontSize="22" FontWeight="SemiBold"/>
</ListView.Header>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
Any idea on how to solve the problem?
One easy workaround is to just use a TextBlock instead of specifying the Header and place it on top of the ListView, but I prefer your current approach as it's simply neater.
But to make it look like what you want, we will need to modify the default Style of the ListView, which wraps the Header and the items inside a StackPanel(child of an ItemsPresenter). We don't want that, so we first remove the tempate bindings of Header and HeaderTemplate from the ItemsPresenter, and then we replace the root Border with a Grid, finally we add a ContentPresenter as the Header and place it above the ScrollViewer (the parent of the ItemsPresenter).
You can refer to the following Style which does everything that I described above.
<Style x:Key="ListViewStyle1"
TargetType="ListView">
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="TabNavigation"
Value="Once" />
<Setter Property="IsSwipeEnabled"
Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode"
Value="Disabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled"
Value="False" />
<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="UseSystemFocusVisuals"
Value="True" />
<Setter Property="ItemContainerTransitions">
<Setter.Value>
<TransitionCollection>
<AddDeleteThemeTransition />
<ContentThemeTransition />
<ReorderThemeTransition />
<EntranceThemeTransition IsStaggeringEnabled="False" />
</TransitionCollection>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Grid BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ContentPresenter x:Name="Header" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}"
FooterTemplate="{TemplateBinding FooterTemplate}"
Footer="{TemplateBinding Footer}"
Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you just apply it to your ListView like this. Oh BTW, make sure you set the VerticalAlignment to Top too.
<ListView VerticalAlignment="Top"
Style="{StaticResource ListViewStyle1}"
...>
Hope this helps!

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 Change Size of Pivot Item Header in Template

I'm looking to be able to modify the default Pivot template to change the size of the Pivot Item headers. How might I do this with the following Style
<Style x:Key="PivotStyle" 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 CacheMode="BitmapCache" Grid.RowSpan="2" >
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Transparent" Offset="0.0" />
<GradientStop Color="Transparent" Offset="1.0" />
</LinearGradientBrush>
</Grid.Background>
</Grid>
<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" Foreground="{StaticResource PhoneForegroundBrush}" FontSize="28" Grid.Row="1"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am trying to get this to mimick the following
You can surely change your Pivot Header's font-size, family and so on by changing HeaderTemplate:
<phone:Pivot Title="PivotTest" Style="{StaticResource PivotStyle}">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontSize="10"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="One">
// item 1
</phone:PivotItem>
<phone:PivotItem Header="Two">
// item 2
</phone:PivotItem>
</phone:Pivot>
EDIT - within a style:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="myHeader">
<TextBlock Text="{Binding}" FontSize="10"/>
</DataTemplate>
<Style x:Key="PivotStyle" TargetType="phone:Pivot">
<Setter Property="HeaderTemplate" Value="{StaticResource myHeader}"/>
<Setter Property="Margin" Value="0"/>
....