Manipulate ItemTemplate in Code Behind C#

4 posts, 1 answers
  1. Aaron
    Aaron avatar
    13 posts
    Member since:
    Dec 2012

    Posted 11 Jan 2013 Link to this post

    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?
  2. Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 14 Jan 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Aaron
    Aaron avatar
    13 posts
    Member since:
    Dec 2012

    Posted 15 Jan 2013 Link to this post

    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.
  5. Answer
    Deyan
    Admin
    Deyan avatar
    2037 posts

    Posted 16 Jan 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner