Background Highlight SelectedItem on ItemTap event

[Phil]

First of all I'd like to thank Telerik for making up for the shortfalls of the LongListSelector, the radJumpList is a pleasure to work with and super quick/smooth.

I see there is no Background colour property of a Textblock, so what I thought would be a nice look would be to highlight a Grid set next to the TextBlock in the radJumplist and change its colour to red on the Tap event to identify it's been selected.

<telerikDataControls:RadJumpList x:Name="radJumpListCust" Margin="0,327,0,168"  ItemTap="RJLCtap">
           <telerikDataControls:RadJumpList.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Grid x:Name="THGrid2" Width="20" Height="27"  Background="{StaticResource PhoneAccentBrush}">/Grid>
                            <TextBlock Text="" Width="2" Height="27" FontSize="19"/>
                            <TextBlock Text="{Binding Lname}" Width="100" Height="27" VerticalAlignment="Center" FontSize="19"/>
                            <TextBlock Text="{Binding Fname}" Width="100" Height="27" VerticalAlignment="Center" FontSize="19"/>
                         </StackPanel>
                    </DataTemplate>
                 </telerikDataControls:RadJumpList.ItemTemplate>
            </telerikDataControls:RadJumpList>

After a while I had the tap event firing, captured the selected item, but now I'm very stuck, what I thought was a simple task is baffling me, I can't see a way of getting from the Selected Item to the Grid element "THGrid2" in the selectedItem and setting its backGround colour.

private void RJLCtap(object sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
{
       var s = (CustList)radJumpListCust.SelectedItem;

      //Code to turn the Background of the Grid "THGrid2" to Red?
}

From reading these forums, I know Telerik are great for answering questions. Thank you for your help, I come from Qt, this C# lark is quite new to me! :)

Regards
Phil

[Deyan]

Hi Phil,

Thanks for writing and please excuse us for the delayed answer.

The ItemTapEventArgs object exposes the Item property which gives you the visual container that has been tapped. You can use the Telerik ElementTreeHelper.FindVisualDescendant<Grid>(args.Item) method to find the Grid element within your template and change its background.

Regards,
Deyan
Telerik

[Phil]

Hi Deyan,

You're an absolute star, thank you very much, works perfectly, I've spent days trying to figure this out!!!!! radJumpLists really are superb.

Regards
Phil

[Phil]

I seem to have come across a bit of a problem with the JumpList, (or I'm being daft.)

Whilst it appeared to work correctly, I soon noticed the a single tap would highlight multiple items in the jumplist about 96 rows apart.

I've replicated the problem in a jumplist example project and it seems to happen for the Grid.Background, and the Textblock.Foreground, and writing values into the textblock.

First attempt results in multiple textblocks being highlighted on a single tap.

private void PhilsIT(object sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
 {
      TextBlock tb = Telerik.Windows.Controls.ElementTreeHelper.FindVisualDescendant<TextBlock>(e.Item);

      tb.Foreground = new SolidColorBrush(Colors.Red);

//single column jumplist with 400 rows of text
}

Back to Google, new approch resulted in exactly the same problem. :(

private void PhilsIT(object sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
{
     TextBlock TB = Telerik.Windows.Controls.ElementTreeHelper.FindVisualDescendant<TextBlock>(e.Item,
               (t) =>
               {
                    if (t as TextBlock != null && (t as TextBlock).Name == "tb1")
                    {
                        return true;
                    }
                  return false;
                });
           TB.Foreground = new SolidColorBrush(Colors.Yellow);
}

Am I doing something daft?

Many thanks for your help.

[Deyan]

Hello Phil,

Thanks for writing back.

This is expectable behavior. The JumpList creates a limited amount of visual containers and reuses them while you're scrolling. So if you set a given property explicitly on a container, it will persist. You may consider implementing a mechanism for storing the last container which you have set a property on and reset it before setting the same property on the new one.

Regards,
Deyan
Telerik

[Phil]

It wasn't expected by me! That's for sure! :)

Thank you for your explanation. I honestly thought it was a bug.

Sadly my knowledge of the internal make-up of the JumpList is extremely limited, do you know of any example on the web where someone has achieved the container resetting method, or could you help me with a bit of code.

Regards
Phil.

[Deyan]

Hi Phil,

Is it alright for you to send me the source code of your app so that I implement this mechanism for you?

You should open a new support ticket and attach your project in ZIP format.

Regards,
Deyan
Telerik

[Phil]

Thank you very much for your kind offer, just sent it, ticket id 711065.

Once I receive it back, I'll document it here exactly how to do it so others can benefit as well. 

[Deyan]

Hello Phil,

Please refer to the support ticket you've opened regarding the case.

I will consider this thread closed for now. You can paste the solution here as soon as it works for you.

Regards,
Deyan
Telerik

[Phil]

Incredible, I would have never have figured that out! .... I've been on this for over a week and your code works flawlessly. Thank you so much for your help, Deyan! Teleriks got themselves a customer for life. :D

Bare with us, going to do a bit more testing before I do the write-up here and transfer from the Nokia licence to the official one!

Thanks again, Deyan.

Regards
Phil

 

 

[Phil]

As promised, here is the code that Deyan kindly provided me with to MULTIPLE-highlight the foreground or background of textblock or grid etc in a radJumpList so the whole community can benefit from his help. :)

First of all you need to add an ItemTap & ItemStateChange events to you radJumpLists xaml.

x:Name="radJumpList" ItemTap="itemTap" ItemStateChanged="radJumpList_ItemStateChanged"

Next you'll need to declare a new list in the constructor to hold the selected values, JLsource it the JumpList source dataset in this example.

private List<JLsource> selected_Items = new List<JLsource>();

The tap event is where the magic happens, selected items are added or removed from the selected_items list, and the highlight/un-highlight events are fired.

private void itemTap(object sender, Telerik.Windows.Controls.ListBoxItemTapEventArgs e)
        {
if (this.selected_items.Contains<JLsource>(s))
            {
                this.selected_items.Remove(s);
                this.ResetContainer(e.Item);
            }
            else
            {
                this.selected_items.Add(s);
                this.MarkContainer(e.Item);
            }
        }

Highlighting an item, the ElementTreeHelper looks for the textBlock "TB1_name", once found, the Foreground can be set.

private void MarkContainer(RadDataBoundListBoxItem item)
        {
            TextBlock TB1 = Telerik.Windows.Controls.ElementTreeHelper.FindVisualDescendant<TextBlock>(item,
               (t) =>
               {
if (t as TextBlock != null && (t as TextBlock).Name == "TB1_name")
                   {
                       return true;
                   }
                   return false;
               });
                TB1.Foreground = new SolidColorBrush(Colors.Red);
}

As with the above, it can now be cleared, or even set to another colour.

private void ResetContainer(RadDataBoundListBoxItem item)

        {
TextBlock TB1 = Telerik.Windows.Controls.ElementTreeHelper.FindVisualDescendant<TextBlock>(item,

               (t) =>

               {

if (t as TextBlock != null && (t as TextBlock).Name == "TB1_Name")

                   {

                       return true;

                   }

                   return false;

               });

                TB1.ClearValue(TextBlock.ForegroundProperty);

But this is the bit that got me, the radjumpList reuses containers, so selecting one, will set that containers colour throughout the whole JumpList. One Tap will set multiple items. But, to get round this, Deyan kindly wrote this bit of code which makes sure only selected items are highlighted rather than the reusable containers.

private void radJumpList_ItemStateChanged(object sender, ItemStateChangedEventArgs e)

        {

            if (e.State == ItemState.Realized)

            {

                RadJumpList jl = sender as RadJumpList;

 

                if (this.selected_items.Contains(e.DataItem as JLsource)) // noteselected_items in the list of items


                {

                    this.MarkContainer(jl.GetContainerForItem(e.DataItem) as RadDataBoundListBoxItem);

                }

                else

                {

                            if (this.selected_items.Count > 0) // stops it firing at app startup

                    {

                       this.ResetContainer(jl.GetContainerForItem(e.DataItem) as RadDataBoundListBoxItem);

                    }

                }

            }

        }

Tested on a JumpList containing 1000 records and 100s of selected items, no negative effect on the running of the JumpList at all.

Many thanks to Deyan for his time, effort, and exceptional technical support.