Style for Jumplist in Resources

[AJ]

I am using several jumplists and so would like to have a style that I can easily apply and have consistency of look.

Most of the templates can be styled easily and attached thus:

<telerikData:RadJumpList
     x:Name="radJumpList"
    Style="{StaticResource radJumpStyleTitle}"
>

With a styles.xaml file that looks like this:

<Style x:Key="radJumpStyleTitle" TargetType="telerikData:RadJumpList">
        <Setter Property="ItemTemplate" Value="{StaticResource MyDataTemplateTitle}"/>
        <Setter Property="EmptyContentTemplate" Value="{StaticResource NoDataItemsTextBlock}" />
        <Setter Property="GroupPickerItemsPanel" Value="{StaticResource radItemsWrapPanel}" />
        <Setter Property="GroupHeaderTemplate" Value="{StaticResource radGroupHeaderTextBlock}"/>
        <Setter Property="ScrollBarMode" Value="AlwaysVisible" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="Margin" Value="12,17,0,28"/>
    </Style>

All well and good however my question is how to style the PhoneBookTemplateSelector (copied from the example code supplied with the toolkit).
When I try to create a style for this I get an error saying 'Object reference not set'

<Style TargetType="local:PhoneBookTemplateSelector">
    <Setter Property="LinkedItemTemplate" >
        <Setter.Value>
            <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>
        </Setter.Value>
    </Setter>
    <Setter Property="EmptyItemTemplate">
            <Setter.Value>
                <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>
            </Setter.Value>
        </Setter>
</Style>

The error occurs on the first Setter Property.

Is there a way to do this? Help or explanation gratefully received.

[Kiril Stanoev]

Hello AJ,

Thank you for contacting us. Setting a style is possible only on items that inherit from FrameworkElement. The PhoneBookTemplateSelector descends from DependencyObject which prevents it from using a Style. So, for your scenario to work, you need to modify it in the following way:

<Style x:Key="radJumpStyleTitle" TargetType="telerik:RadJumpList">
    <!--<Setter Property="ItemTemplate" Value="{StaticResource MyDataTemplateTitle}"/>-->
    <Setter Property="EmptyContentTemplate" Value="{StaticResource NoDataItemsTextBlock}" />
    <Setter Property="GroupPickerItemsPanel" Value="{StaticResource radItemsWrapPanel}" />
    <Setter Property="GroupHeaderTemplate" Value="{StaticResource radGroupHeaderTextBlock}"/>
    <Setter Property="ScrollBarMode" Value="AlwaysVisible" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Margin" Value="12,17,0,28"/>
    <Setter Property="ItemTemplateSelector">
        <Setter.Value>
            <local:PhoneBookTemplateSelector>
                <local:PhoneBookTemplateSelector.EmptyItemTemplate>
                    <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:PhoneBookTemplateSelector.EmptyItemTemplate>
                <local:PhoneBookTemplateSelector.LinkedItemTemplate>
                    <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:PhoneBookTemplateSelector.LinkedItemTemplate>
            </local:PhoneBookTemplateSelector>
        </Setter.Value>
    </Setter>
</Style>

Please note that due to a limitation, you cannot use the PhoneBookTemplateSelector as a static resource, similar to:

<Setter Property="ItemTemplateSelector" Value="{StaticResource ItemTemplateSelector}" />

Regards,
Kiril Stanoev
the Telerik team

[AJ]

mmm good reply but so far no go.

If I modify my code in the manner suggested I do not get any error marks in the xml but the app does not run as it complains at app startup thus:

System.Windows.Markup.XamlParseException occurred  
Message=The type 'PhoneBookTemplateSelector' was not found. [Line: 16 Position: 25

I tried a couple of times using Setter Property="GroupPickerItemTemplateSelector" as well as Setter Property="ItemTemplateSelector".

Both give me the same error.

I removed reference to the GroupPickerItemTemplateSelector in the radJumplist definition in the View.
Is this right or does it need something there?

It might be relevant to point out here that my style is in a ResourceDictionary which is linked off the App.xaml file.

[Kiril Stanoev]

Hello AJ,

Do you have an application reproducing the issue? If you have one, could you please send it to us so we can take a look at the problem. This way we would be better able to assist you. Thank for your cooperation. 

Kind regards,
Kiril Stanoev
the Telerik team

[AJ]

I have submitted a support ticket with my example files.

I have arrived at a compromise which is acceptable and allows me to continue on.
This is using data templates in the stylesheet but specifies the local object in the page.
Good enough for my purposes.

   <telerikDataControls:RadJumpList  x:Name="jumpList"

              Style="{StaticResource radJumpStyleTitle}" >         

          <telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>

           <local:PhoneBookTemplateSelector x:Name="templateSelector"

               LinkedItemTemplate="{StaticResource radLinkedItem}"

               EmptyItemTemplate="{StaticResource radEmptyItem }"

           />

          </telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>

   </telerikDataControls:RadJumpList>