ListBox and States on individual controls in the ItemTemplate

[Debbie]

Hi there

I need to create a databound listbox with an ItemTemplate consisting of several controls, and style it (and the items) according to our designs. The listbox also needs to have certain states associated with it e.g. a mouseover and selected state.
If my listbox looked like this:

<telerik:ListBox ItemTemplate="{StaticResource listboxItemTemplate}" />

with an itemtemplate like this:

<DataTemplate x:Key="listboxItemTemplate">
    <Grid>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding Mode=OneWay, Path=Name}" TextWrapping="Wrap"/>
        <TextBlock HorizontalAlignment="Left" VerticalAlignment="Top" Text="{Binding Mode=OneWay, Path=Surname}" TextWrapping="Wrap"/>
        <Button HorizontalAlignment="Left" VerticalAlignment="Top" Content="Hit me"/>
    </Grid>
</DataTemplate>

How would I be able to change properties of individual elements in the itemtemplate in the states? e.g. on mouseover I want the foreground of the second textblock to change colour? I can't seem to create an itemcontainerstyle which contains the states, and even so, that would normally just contain a contentpresenter...

Many thanks in advance!
Debbie

[Valeri Hristov]

Hello Debbie,

Unfortunately the Silverlight VisualStateManager is not supported outside a ControlTemplate, which means that you cannot easily create visual states of a DataTemplate. I figured two options, which are relatively similar:
1) Create UserControl, that will be used as a DataTemplate. It will contain the needed states and the needed visuals of the DataTemplate. This is useful if you want states, that are not supported by the ListBoxItem. I attached a very simple example for this case.

2) Instead of using DataTemplates, use ControlTemplates for the ListBoxItem controls. Set those templates with the ItemContainerStyle or ItemContainerStyleSelector properties. Something like this:

<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        ... states ...
                    </vsm:VisualStateManager.VisualStateGroups>

                    ... the visuals that would be in the DataTemplate ...
                    <TextBlock Text={Binding Title} x:Name="TitleText" />
                </Grid>
            </ControlTemplate>            
        </Setter.Value>
    </Setter>
</Style>
...
<telerik:ListBox ItemContainerStyle={StaticResource ListBoxItemStyle} ... />

Best wishes,
Valeri Hristov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Debbie]

Thanks Valeri!

The second method won't really work if we want to reuse the style, but I've tried out the first method and it works, so thank you!

Debbie

[Debbie]

Hi again

I'm using your solution but have run into another problem. My main control is a ListBox, and I've created my separate UserControl which contains the DataTemplate (grid with a border and two textblocks) and the associated states.

In the codebehind I see you wire up the mouseevents and call 

VisualStateManager

 

.GoToState()..
Because this control is a UserControl, how do I get access to the ListBox's Selected event? I want to be able to change states when the ListBox's selection changes (select and DEselect). Please educate me as to how to do this!

Thanks,
Debbie

 

 

 

 

 

[Valeri Hristov]

Hi Debbie,

Please, find attached a new sample, that demonstrates how to implement your new requirement. Let me know if it does not work for you.

Sincerely yours,
Valeri Hristov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.