Manipulate ItemTemplate in Code Behind C#

[Aaron]

I have a RadJumpList as follows with a default image set initially and some text in the ItemTemplate as follows:

<telerikDataControls:RadJumpList Height="645" VerticalAlignment="Top" Foreground="White" Margin="12 4 12 4" Grid.Row="1" x:Name="jumpList" IsStickyHeaderEnabled="True" SelectionChanged="jumpList_SelectionChanged">

<telerikPrimitives:RadContextMenu.ContextMenu>

<telerikPrimitives:RadContextMenu Opening="RadContextMenu_Opening" OpenGesture="Hold">

<telerikPrimitives:RadContextMenuItem Content="delete" Tap="RadContextMenuItem_Tap" />

</telerikPrimitives:RadContextMenu>

</telerikPrimitives:RadContextMenu.ContextMenu>

<telerikDataControls:RadJumpList.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal" Margin="4">

<Image x:Name="imgTest" Source="Assets/test.png" Width="64" Height="64" Margin="0,4,12,4"/>

<TextBlock Foreground="White" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" x:Name="txtTest" Text="{Binding}" VerticalAlignment="Center" />

</StackPanel>

</DataTemplate>

</telerikDataControls:RadJumpList.ItemTemplate>

<telerikDataControls:RadJumpList.GroupHeaderTemplate>

<DataTemplate>

<Border Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4" BorderThickness="0">

<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>

</Border>

</DataTemplate>

</telerikDataControls:RadJumpList.GroupHeaderTemplate>

<telerikDataControls:RadJumpList.StickyHeaderTemplate>

<DataTemplate>

<Border BorderThickness="0" HorizontalAlignment="Stretch" Background="Transparent" Padding="0, 0, 0, 8">

<Border VerticalAlignment="Top" Background="{StaticResource PhoneAccentBrush}" Width="64" Height="64" HorizontalAlignment="Left" Margin="4, 4, 4, 4" BorderThickness="0">

<TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" Text="{Binding Key}" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>

</Border>

</Border>

</DataTemplate>

</telerikDataControls:RadJumpList.StickyHeaderTemplate>

<telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>

<local:PhoneBookTemplateSelector x:Name="templateSelector">

<local:PhoneBookTemplateSelector.LinkedItemTemplate>

<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.LinkedItemTemplate>

<local:PhoneBookTemplateSelector.EmptyItemTemplate>

<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.EmptyItemTemplate>

</local:PhoneBookTemplateSelector>

</telerikDataControls:RadJumpList.GroupPickerItemTemplateSelector>

<telerikDataControls:RadJumpList.GroupPickerItemsPanel>

<ItemsPanelTemplate>

<telerikPrimitives:RadWrapPanel Margin="8,30,0,0" ItemWidth="115" ItemHeight="106"/>

</ItemsPanelTemplate>

</telerikDataControls:RadJumpList.GroupPickerItemsPanel>

</telerikDataControls:RadJumpList>

This is basically from the sample code that was provided.  I am wondering if I could manipulate the image set here:

<telerikDataControls:RadJumpList.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal" Margin="4">

<Image x:Name="imgTest" Source="Assets/test.png" Width="64" Height="64" Margin="0,4,12,4"/>

<TextBlock Foreground="White" FontSize="{StaticResource PhoneFontSizeExtraLarge}" FontFamily="{StaticResource PhoneFontFamilyLight}" x:Name="txtTest" Text="{Binding}" VerticalAlignment="Center" />

</StackPanel>

</DataTemplate>

</telerikDataControls:RadJumpList.ItemTemplate>

When the control is bound.  So as the rows are getting bound, I want to assign am image based on some condition on the TextBlock field.  Say if the value is 10 for txtTest, I am want image1.png to be shown and if it is value 20 I want image2.png to be shown.  Can this be done?

[Deyan]

Hi Aaron,

You can implement this behavior by using a Binding Converter and pass the value of the TextBlock as its parameter.

Another approach would be to bind the Source property of your Image to a property on your business object which returns different Image Uri based on the TextBlock value.

Something like that:

public string ImageUri
{
    get
    {
         if (this.textBlockProperty == "1")
         {
              return 'Images\Image1.png';
         }
         if (this.textBlockProperty == "2")
         {
              return 'Images\Image2.png';
         }
         ..................
    }
}

I hope this helps.

All the best,
Deyan
the Telerik team

[Aaron]

Is there any sample code for this.  I want to see how I bind the XAML as well as use the class in code behind.

[Deyan]

Hi Aaron,

Thanks for writing back.

Here is a very good article from Microsoft that should help you out:

http://msdn.microsoft.com/en-us/library/cc278072%28v=vs.95%29.aspx

Regards,
Deyan
the Telerik team