[Solved] Converting from ListBox to RadDataBoundListBox : ItemContainerStyle, VisualStateManager

[Edouard]

Hi,

I've a ListBox which hasn't good performances with a lot of items, so I decided to use RadDataBoundListBox.

In my ListBoxItem, there are a CheckBox, an Image and a TextBlock. There are two possible Background colors for the ListBoxItem, depending on the state of the CheckBox (checked or unchecked).

Because when the Page started, some items have the CheckBox checked, and some others not (with the corresponding background colors), the SolidColorBrush is a property on the items in the ItemsSource collection.

To change the Background on the Checked and Unchecked events , I'm using the VisualStateManager.GoToState method.

Here is my ListBoxItem Style :

<Style x:Key="IT_Chaine_Style" TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border BorderBrush="{StaticResource Border_Color2}" Width="432" BorderThickness="0,0,0,1">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CustomStates">
                                    <VisualState x:Name="CustomUnselect">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Grid_Chaine" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="#99E7E7E7" Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="CustomSelect">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Grid_Chaine" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" To="#19E20031" Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Name="Grid_Chaine" Background="{Binding Background}" my:TiltEffect.IsTiltEnabled="True" Margin="0,1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <CheckBox Name="{Binding GetCbName}" IsChecked="{Binding IsMyChaine}" Checked="CB_IsMyChaine_Checked" Unchecked="CB_IsMyChaine_Unchecked" Margin="12,0,0,0" />
                                <Image Grid.Column="1" Source="{Binding Image}" Stretch="Uniform" Width="75" Height="75" CacheMode="BitmapCache" />
                                <TextBlock Grid.Column="2" Text="{Binding Nom}" VerticalAlignment="Center" Style="{StaticResource PhoneTextTitle2Style}" Foreground="{StaticResource PhoneForegroundBrush}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

There is just an ItemContainerStyle, no ItemTemplate.

I tried the TargetTypes ("ListBoxItem") by "telerikPrimitives:RadDataBoundListBoxItem", build a specific ItemTemplate, but never had the same results as with the ListBox.

Thanks,

[Deyan]

Hello Edouard,

Thanks for contacting us.

In order to completely understand the case and be able to assist you further we would like to receive some further details like a description of the behavior you would like to achieve, as well as a sample Windows Phone 7 application that reproduces the case. In this way we will be able to directly see what goes wrong and help you solve the issue.

Please note that you will have to open a new support ticket in order to be able to upload your project.

Thanks for your time.

We look forward to receiving the requested details.

Greetings,
Deyan
the Telerik team

[Edouard]

Hello,

Thanks for your answer.

Here is a sample of my custom ListBox : ListBoxItemBackgrounds 

It has exactly the functions I need : each ListBoxItem has one border, inside this border a grid with a checkbox and some other components. The background of the grid is initialized my databinding (as the status of the checkbox). When the state of the checkbox changes, the background of the grid is changed too.

I can't get to have a RadDataBoundListBox working with the same results.

Thanks for your help,

[Deyan]

Hello Edouard,

Thanks for getting back to me and for the provided demo project.

I have further investigated the case and have been able to determine the reason for the erroreous behavior. We have scheduled this issue in our TODO list for fixes and we will provide the fix for the upcoming Q1 2011 SP1 release of RadControls for Windows Phone 7.

There is also a workaround for this which you can use until the update is released. Take a look at the code snippet below:

public MainPage()
{
    InitializeComponent();
    this.LB_Genres.ItemStateChanged += new EventHandler<ItemStateChangedEventArgs>(LB_Genres_ItemStateChanged);
    LayoutUpdated += new EventHandler(MainPage_LayoutUpdated);
    needLayoutUpdate = true;
}

void LB_Genres_ItemStateChanged(object sender, ItemStateChangedEventArgs e)
{
    if (e.State == ItemState.Realized)
    {
        RadDataBoundListBoxItem container = this.LB_Genres.GetContainerForItem(e.DataItem) as RadDataBoundListBoxItem;

        container.DataContext = e.DataItem;
    }
}

As you can see, I am using the ItemStateChanged event of the RadDataBoundListBox. This event is fired each time the UI virtualization state of a data item is changed. That said, when a data item is about to be bound to a visual item and shown on the viewport the state will be Realizing. After an item has been bound to a visual item and shown on the viewport the state will be Realized etc. In the event handler of this event I look for the Realized state and when an item is realized I simply get its visual container and set its DataContext to the corresponding data item.

I hope this is helpful.

I have updated your Telerik points for bringing our attention to this issue.

Do not hesitate to get back to me in case you have further questions or need assistance.

Regards,
Deyan
the Telerik team

[Edouard]

Hi,

Thanks a lot for your answer, your help, and the precision of your message.

It's working great !

Best regards,

[Deyan]

Hi Edouard,

Thanks for writing back and for your feedback. I am happy that this workaround works for you.

For now, we will consider this ticket closed.

You can write back anytime you have further questions or need assistance.

Best wishes,
Deyan
the Telerik team