StickyHeader ???

[Justin]

I'm not sure why this box appears above my headers, but it does. I'm able to click on it and it brings up the GroupPicker view, however it doesn't have any letters on it.

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikDataControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    xmlns:Telerik_Windows_Controls_JumpList="clr-namespace:Telerik.Windows.Controls.JumpList;assembly=Telerik.Windows.Controls.Data"
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    x:Class="WPTracker.ViewModels.Phones.PhoneMainView"
    xmlns:local="clr-namespace:WPTracker"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False"
    mc:Ignorable="d">

    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="CheckBoxesIndicatorStyle" TargetType="Rectangle">
            <Setter Property="Fill" Value="{StaticResource PhoneAccentBrush}"/>
        </Style>
        <Style x:Key="ExtendedScrollViewerStyle" TargetType="ScrollViewer">
            <Setter Property="ManipulationMode" Value="System"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Hidden"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="VerticalCompression">
                                    <VisualState x:Name="NoVerticalCompression"/>
                                    <VisualState x:Name="CompressionTop"/>
                                    <VisualState x:Name="CompressionBottom"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HorizontalCompression">
                                    <VisualState x:Name="NoHorizontalCompression"/>
                                    <VisualState x:Name="CompressionLeft"/>
                                    <VisualState x:Name="CompressionRight"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                                <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Orientation="Vertical" Visibility="Collapsed" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
                                <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Visibility="Collapsed" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="telerikDataControls:RadJumpList">
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Background" Value="#00ffffff"/>
            <Setter Property="MinHeight" Value="100"/>
            <Setter Property="MinWidth" Value="100"/>
            <Setter Property="CheckBoxesIndicatorStyle" Value="{StaticResource CheckBoxesIndicatorStyle}"/>
            <Setter Property="VirtualizationStrategyDefinition">
                <Setter.Value>
                    <telerikPrimitives:StackVirtualizationStrategyDefinition Orientation="Vertical"/>
                </Setter.Value>
            </Setter>
            <Setter Property="EmptyContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock HorizontalAlignment="Center" Text="{Binding}" VerticalAlignment="Center"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="StickyHeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Stretch">
                            <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Text="{Binding}" VerticalAlignment="Bottom"/>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="GroupHeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Stretch">
                            <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="6" Text="{Binding}" VerticalAlignment="Bottom"/>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="GroupPickerItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{StaticResource PhoneAccentBrush}" HorizontalAlignment="Stretch" Margin="6" VerticalAlignment="Stretch">
                            <TextBlock  FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="4" Text="{Binding}" VerticalAlignment="Stretch"/>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="GroupPickerOpenAnimation">
                <Setter.Value>
                    <telerik:RadTileAnimation Duration="0:00:.1" InitialDelay="0:0:.08" IsTranslationEnabled="False" InOutAnimationMode="In" PerspectiveAngleY="0" PerspectiveAngleX="90" SequentialMode="FirstToLast" SequentialItemDelay="0"/>
                </Setter.Value>
            </Setter>
            <Setter Property="GroupPickerCloseAnimation">
                <Setter.Value>
                    <telerik:RadTileAnimation Duration="0:00:.1" InitialDelay="0:0:.05" IsTranslationEnabled="False" InOutAnimationMode="Out" PerspectiveAngleY="0" PerspectiveAngleX="90" SequentialMode="FirstToLast" SequentialItemDelay="0"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikDataControls:RadJumpList">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="PART_ManipulationContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_ItemsPanel">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_VerticalScrollbar">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_EmptyContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NoData">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="PART_ManipulationContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_ItemsPanel">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_VerticalScrollbar">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PART_EmptyContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="LayoutRoot">
                                <ScrollViewer x:Name="PART_ManipulationContainer" Style="{StaticResource ExtendedScrollViewerStyle}">
                                    <Canvas x:Name="PART_ScrollableContent" VerticalAlignment="Top">
                                        <Canvas x:Name="PART_ItemsPanel">
                                            <Rectangle x:Name="PART_CheckBoxesPressIndicator" IsHitTestVisible="False" Opacity="0" Style="{TemplateBinding CheckBoxesIndicatorStyle}" Width="24" Canvas.ZIndex="1"/>
                                        </Canvas>
                                    </Canvas>
                                </ScrollViewer>
                                <ScrollBar x:Name="PART_VerticalScrollbar" HorizontalAlignment="Right" Opacity="0"/>
                                <ContentPresenter x:Name="PART_EmptyContentPresenter" ContentTemplate="{TemplateBinding EmptyContentTemplate}" Content="{TemplateBinding EmptyContent}" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/>
                                <telerikPrimitives:RadWindow x:Name="groupPickerWindow" CloseAnimation="{TemplateBinding GroupPickerCloseAnimation}" IsFullScreen="True" OpenAnimation="{TemplateBinding GroupPickerOpenAnimation}">
                                    <Telerik_Windows_Controls_JumpList:JumpListGroupPicker x:Name="groupPicker" Background="Transparent" HorizontalAlignment="Stretch" ItemsPanel="{TemplateBinding GroupPickerItemsPanel}" ItemTemplate="{TemplateBinding GroupPickerItemTemplate}" VerticalAlignment="Stretch"/>
                                </telerikPrimitives:RadWindow>
                                <ContentPresenter x:Name="PART_StickyHeader" ContentTemplate="{TemplateBinding StickyHeaderTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Top"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontSize" Value="32"/>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.FontFamily>
        <StaticResource ResourceKey="PhoneFontFamilyNormal"/>
    </phone:PhoneApplicationPage.FontFamily>
    <phone:PhoneApplicationPage.FontSize>
        <StaticResource ResourceKey="PhoneFontSizeNormal"/>
    </phone:PhoneApplicationPage.FontSize>
    <phone:PhoneApplicationPage.Foreground>
        <StaticResource ResourceKey="PhoneForegroundBrush"/>
    </phone:PhoneApplicationPage.Foreground>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="all devices..." Style="{StaticResource PhoneTextLargeStyle}"/>
            <ProgressBar x:Name="progressBar1"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <telerikDataControls:RadJumpList HorizontalAlignment="Left" Margin="6,0,0,0" x:Name="radJumpList1" VerticalAlignment="Top" DataVirtualizationMode="Automatic" IsStickyHeaderEnabled="False">
                <telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>
                    <local:GroupPickerItemTemplateSelector>
                        <local:GroupPickerItemTemplateSelector.DisabledGroupTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource PhoneChromeBrush}" Width="96" Height="96" Margin="6" IsHitTestVisible="False">
                                    <TextBlock Margin="8" Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="{StaticResource PhoneDisabledBrush}"/>
                                </Border>
                            </DataTemplate>
                    </local:GroupPickerItemTemplateSelector.DisabledGroupTemplate>

                    <local:GroupPickerItemTemplateSelector.NormalGroupTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource PhoneAccentBrush}" Width="96" Height="96" Margin="6">
                                    <TextBlock Margin="8" Text="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                                </Border>
                            </DataTemplate>
                        </local:GroupPickerItemTemplateSelector.NormalGroupTemplate>
                    </local:GroupPickerItemTemplateSelector>
            </telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>

            <telerikDataControls:RadJumpList.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding FullName}" FontFamily="Segoe WP SemiLight" Margin="50,10,0,10" FontSize="32" />
                </DataTemplate>
            </telerikDataControls:RadJumpList.ItemTemplate>

            <telerikDataControls:RadJumpList.GroupPickerItemsPanel>
                <ItemsPanelTemplate>
                    <telerikPrimitives:RadWrapPanel Margin="12,0,12,0" ItemWidth="104" ItemHeight="104" />
                </ItemsPanelTemplate>
            </telerikDataControls:RadJumpList.GroupPickerItemsPanel>
            </telerikDataControls:RadJumpList>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Microsoft.WindowsAzure.MobileServices;
using Newtonsoft.Json;
using Telerik.Windows.Controls;
using Telerik.Windows.Controls.Primitives;
using Telerik.Windows.Data;
using System.Windows.Threading;
using System.Collections.ObjectModel;

namespace WPTracker.ViewModels.Phones
{
    public class Phones
    {
       //Content hidden
    }

    public partial class PhoneMainView : PhoneApplicationPage
    {
        private MobileServiceCollection<Phones, Phones> items;
        private IMobileServiceTable<Phones> phoneTable =
            App.MobileService.GetTable<Phones>();

        private ObservableCollection<Phones> source = new ObservableCollection<Phones>();
        private DispatcherTimer timer;

        public PhoneMainView()
        {
            InitializeComponent();
            App.SelectedPhone = null;

            string alphabet = "abcdefghijklmnopqrstuvwxyz";

            List<string> groupPickerItems = new List<string>(32);
            foreach (char c in alphabet)
            {
                groupPickerItems.Add(new string(c, 1));
            }
            this.radJumpList1.GroupPickerItemsSource = groupPickerItems;

            GenericGroupDescriptor<Phones, string>
            groupByFirstName = new GenericGroupDescriptor<Phones, string>(device => device.FullName.Substring(0, 1).ToUpper());
            this.radJumpList1.GroupDescriptors.Add(groupByFirstName);

            this.timer = new DispatcherTimer();
            this.timer.Interval = TimeSpan.FromSeconds(2);
            this.timer.Tick += (object sender, EventArgs args) =>
            {

            };

            this.radJumpList1.GroupHeaderItemTap += this.OnGroupHeader_ItemTap;
            this.radJumpList1.DataRequested += this.jumpList_DataRequested;
            this.radJumpList1.GroupPickerItemTap += this.radJumpList_GroupPickerItemTap;
            this.LoadData();
            this.radJumpList1.ItemTap += this.OnJumpList_ItemTap;
        }

        /* This is the actual database query!
         */

        private async void RefreshPhoneItems()
        {
            progressBar1.IsEnabled = true;
            progressBar1.IsIndeterminate = true;

            try
            {
                items = await phoneTable
                    .Where(PhoneItem => PhoneItem.Publish == true)
                    .OrderBy(PhoneItem => PhoneItem.FullName)
                    .ToCollectionAsync();
            }
            catch (MobileServiceInvalidOperationException f)
            {
                MessageBox.Show(f.Response.Content.ToString(),
                        string.Format("{0} (HTTP {1})",
                        f.Response.Content,
                        f.Response.StatusCode), MessageBoxButton.OK);
            }

            radJumpList1.ItemsSource = items;

            progressBar1.IsEnabled = false;
            progressBar1.Visibility = System.Windows.Visibility.Collapsed;
            progressBar1.IsIndeterminate = false;

        }

        private void radJumpList_GroupPickerItemTap(object sender, GroupPickerItemTapEventArgs e)
        {
            foreach (DataGroup group in this.radJumpList1.Groups)
            {
                if (group.Key.ToString().ToLower() == e.DataItem.ToString().ToLower())
                {
                    e.DataItemToNavigate = group;
                    return;
                }
            }

            e.ClosePicker = false;
        }

        private void LoadData()
        {
            this.timer.Stop();
        }

        private void jumpList_DataRequested(object sender, EventArgs e)
        {
            if (!this.timer.IsEnabled)
            {
                this.timer.Start();
            }
        }

        private void DisableVirtualization()
        {
            this.radJumpList1.DataVirtualizationMode = DataVirtualizationMode.Automatic;
        }

        private void OnGroupHeader_ItemTap(object sender, GroupHeaderItemTapEventArgs e)
        {
            //Unkown
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            RefreshPhoneItems();
        }

        private void OnJumpList_ItemTap(object sender, ListBoxItemTapEventArgs args)
        {
            App.SelectedPhone = radJumpList1.SelectedItem as Phones;
            NavigationService.Navigate(new Uri("/ViewModels/Phones/PhoneItemView.xaml", UriKind.Relative));
        }
    }
}

[Deyan]

Hi Justin,

Thanks for writing and for the shared code.

The reason for this behavior is that you're overriding the JumpList's style. The new style that you're setting does not have some of the template parts needed by the JumpList and therefore the logic that handles the StickyHeader element fails.

You can still hide the JumpList's sticky header by setting the Visibility property of the corresponding template part within the Control's template (PART_StickyHeader). You can also extract the default JumpList style using the Visual Studio designer and modify it accordingly. It should contain all missing template parts.

I hope this helps.

Regards,
Deyan
Telerik