Strange behaviour of ListBoxItems

[Manfred]

Hi there,

the list in my last post also shows a very strange behaviour:
In this list I have a property called OrderOfPriority which shows in which order the selected Items (they representing report pages) should be added to the report.
Therefore I have first a List of int with no items.
Selecting one Report, the list of int will get on item with value 1 and all Comboboxes of the ListItems are bound to this list.
after selecting the second report, the next item of the list will be added with the value 2.
if I now change the selected Item of the second report to one, it automatically changes the first Item to 2 and so on.
If I set the selected item of the list to 0, it will be deselected and all OrdersOfPriority of the selected reports will be recalculated.

But now to my problem:
if I select the first 4 reports and scroll down so that three reports are not visible in my UserControl, the will be deselected and my OrderOfPriority was recalculated, some times in a right way, somoe times in a wrong way.

Any idea what causes this behaviour?
Hope, my english wasn't that bad, so that you understand what I want to tell :)

Best Regards
Manfred

[Kalin]

Hi Manfred,

The explained issue is probably caused by the ListBox virtualization and the use of ItemContainerStyleSelector. In order to avoid that behavior I would suggest you to use an ItemTemplateSelector instead or if you have small amount of items you can change the ListBox ItemsPanel to StackPanel (which is not virtualized).

Hope this helps. If you have any further questions let us know.

Regards,
Kalin
Telerik

 

 

[Manfred]

Hi Kalin,

I supposed that it was the virtualization :)
Can you describe more precisely how to use the Stackpanel in that case?
I send you my XAML to have a look at it:

001.<sip:SipModuleBase x:Class="Enercon.Sip.ReportModule.ReportPage"
002.                                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
003.                                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
004.                                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
005.                                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
006.                                     xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
007.                                     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
008.                                     xmlns:behaviors="clr-namespace:Enercon.Silverlight.Controls.Behaviors;assembly=Enercon.Silverlight.Controls"
009.                                     xmlns:sip="clr-namespace:Enercon.Sip;assembly=Enercon.Sip"
010.                                     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
011.                                     xmlns:viewModel="clr-namespace:Enercon.Sip.ReportModule.VM;assembly=Enercon.Sip.ReportModule.VM"
012.                                     xmlns:enControls="clr-namespace:Enercon.Silverlight.Controls;assembly=Enercon.Silverlight.Controls"
013.                                     mc:Ignorable="d"
014.                                     d:DesignHeight="500"
015.                                     d:DesignWidth="800">
016.
017.    <UserControl.DataContext>
018.        <viewModel:ReportPageVM/>
019.    </UserControl.DataContext>
020.    <UserControl.Resources>
021.        <viewModel:BoolToVisibilityConverter x:Key="Bool2VisibleConverter"/>
022.        <viewModel:IntToBoolConverter x:Key="Int2BoolConverter"/>
023.        <viewModel:StringToDateConverter x:Key="String2DateConverter" />
024.        <Style TargetType="telerik:RadListBoxItem">
025.            <Setter Property="Visibility" Value="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}" />
026.        </Style>
027.        <DataTemplate x:Key="TextSingleSerialItemTemplate">
028.            <Grid >
029.                <Grid.ColumnDefinitions>
030.                    <ColumnDefinition/>
031.                    <ColumnDefinition/>
032.                </Grid.ColumnDefinitions>
033.                <sdk:Label Grid.Column="0"
034.                                     Margin="2"
035.                                     Content="{Binding Name}"
036.                                     VerticalContentAlignment="Center"
037.                                     Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
038.                <TextBox VerticalContentAlignment="Center"
039.                                 HorizontalContentAlignment="Left"
040.                                 Grid.Column="1"
041.                                 Margin="2"
042.                                 Text="{Binding DataContext.Serial, RelativeSource={RelativeSource AncestorType=sip:SipModuleBase}, Mode=TwoWay}"
043.                                 Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
044.            </Grid>
045.        </DataTemplate>
046.        <DataTemplate x:Key="TextMultiSerialItemTemplate">
047.            <Grid Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}">
048.                <Grid.ColumnDefinitions>
049.                    <ColumnDefinition/>
050.                    <ColumnDefinition/>
051.                </Grid.ColumnDefinitions>
052.                <sdk:Label Grid.Column="0"
053.                                     Margin="2"
054.                                     Content="{Binding Name}"
055.                                     VerticalContentAlignment="Center"
056.                                     Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
057.                <TextBox VerticalContentAlignment="Center"
058.                                 HorizontalContentAlignment="Left"
059.                                 Grid.Column="1"
060.                                 Text="{Binding DataContext.Serials, RelativeSource={RelativeSource AncestorType=sip:SipModuleBase}, Mode=TwoWay}"
061.                                 Margin="2"
062.                                 Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
063.            </Grid>
064.        </DataTemplate>
065.        <DataTemplate x:Key="DateDayItemTemplate">
066.            <Grid>
067.                <Grid.ColumnDefinitions>
068.                    <ColumnDefinition/>
069.                    <ColumnDefinition/>
070.                </Grid.ColumnDefinitions>
071.                <sdk:Label Grid.Column="0"
072.                                     Margin="2"
073.                                     Content="{Binding Name}"
074.                                     VerticalContentAlignment="Center"
075.                                     Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
076.                <telerik:RadDatePicker VerticalContentAlignment="Center"
077.                                                             HorizontalContentAlignment="Left"
078.                                                             Grid.Column="1"
079.                                                             Margin="2"
080.                                                             DateSelectionMode="Day"
081.                                                             SelectedDate="{Binding Value, Mode=TwoWay, Converter={StaticResource String2DateConverter}}"
082.                                                             Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
083.            </Grid>
084.        </DataTemplate>
085.        <DataTemplate x:Key="DateMonthItemTemplate">
086.            <Grid>
087.                <Grid.ColumnDefinitions>
088.                    <ColumnDefinition/>
089.                    <ColumnDefinition/>
090.                </Grid.ColumnDefinitions>
091.                <sdk:Label Grid.Column="0"
092.                                     Margin="2"
093.                                     Content="{Binding Name}"
094.                                     VerticalContentAlignment="Center"
095.                                     Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
096.                <telerik:RadDatePicker VerticalContentAlignment="Center"
097.                                                             HorizontalContentAlignment="Left"
098.                                                             Grid.Column="1"
099.                                                             Margin="2"
100.                                                             DateSelectionMode="Month"
101.                                                             SelectedDate="{Binding Value, Mode=TwoWay, Converter={StaticResource String2DateConverter}}"
102.                                                             Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
103.            </Grid>
104.        </DataTemplate>
105.        <DataTemplate x:Key="DateYearItemTemplate">
106.            <Grid>
107.                <Grid.ColumnDefinitions>
108.                    <ColumnDefinition/>
109.                    <ColumnDefinition/>
110.                </Grid.ColumnDefinitions>
111.                <sdk:Label Grid.Column="0"
112.                                     Margin="2"
113.                                     Content="{Binding Name}"
114.                                     VerticalContentAlignment="Center"
115.                                     Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
116.                <telerik:RadDatePicker VerticalContentAlignment="Center"
117.                                                             HorizontalContentAlignment="Left"
118.                                                             Grid.Column="1"
119.                                                             Margin="2"
120.                                                             DateSelectionMode="Year"
121.                                                             SelectedDate="{Binding Value, Mode=TwoWay, Converter={StaticResource String2DateConverter}}"
122.                                                             Visibility="{Binding IsVisible, Converter={StaticResource Bool2VisibleConverter}}"/>
123.            </Grid>
124.        </DataTemplate>
125.        <viewModel:FieldTemplateSelector x:Key="fieldSelector"
126.                                                                         TextMultiSerialItemTemplate="{StaticResource TextMultiSerialItemTemplate}"
127.                                                                         TextSingleSerialItemTemplate="{StaticResource TextSingleSerialItemTemplate}"
128.                                                                         DateDayItemTemplate="{StaticResource DateDayItemTemplate}"
129.                                                                         DateMonthItemTemplate="{StaticResource DateMonthItemTemplate}"
130.                                                                         DateYearItemTemplate="{StaticResource DateYearItemTemplate}"/>
131.
132.        <DataTemplate x:Key="reportTemplate">
133.            <Grid Margin="2">
134.                <Grid.ColumnDefinitions>
135.                    <ColumnDefinition Width="400*"/>
136.                    <ColumnDefinition Width="270"/>
137.                    <ColumnDefinition Width="30"/>
138.                    <ColumnDefinition Width="60"/>
139.                </Grid.ColumnDefinitions>
140.                <StackPanel VerticalAlignment="Center">
141.                    <sdk:Label Content="{Binding Name}"
142.                                         FontSize="14"
143.                                         Margin="2"
144.                                         Foreground="Black"/>
145.                    <TextBlock Text="{Binding Description}"
146.                                         FontSize="11"
147.                                         Margin="2"
148.                                         Foreground="Black"
149.                                         TextWrapping="Wrap"/>
150.
151.                </StackPanel>
152.                <telerik:RadListBox Grid.Column="1"
153.                                                        ItemsSource="{Binding ParameterList}"
154.                                                        ItemContainerStyle="{StaticResource RadListBoxItemStyle}"
155.                                                        ItemTemplateSelector="{StaticResource fieldSelector}"/>
156.                <CheckBox Grid.Column="2"
157.                                    VerticalAlignment="Center"
158.                                    HorizontalAlignment="Center"
159.                                    Tag="{Binding Name}"
160.                                    Checked="CheckBox_Checked"
161.                                    Unchecked="CheckBox_Unchecked"
162.                                    IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
163.                <telerik:RadComboBox Grid.Column="3"
164.                                                         VerticalAlignment="Center"
165.                                                         HorizontalAlignment="Center"
166.                                                         Tag="{Binding Name}"
167.                                                         IsEnabled="{Binding OrderOfPriority, Converter={StaticResource Int2BoolConverter}}"
168.                                                         SelectionChanged="ComboBox_SelectionChanged"
169.                                                         SelectedItem="{Binding OrderOfPriority, Mode=TwoWay}"
170.                                                         ItemsSource="{Binding DataContext.ListItemNumbers, RelativeSource={RelativeSource AncestorType=sip:SipModuleBase}}"/>
171.            </Grid>
172.        </DataTemplate>
173.    </UserControl.Resources>
174.    <enControls:BusyIndicator x:Name="BusyIndicator"
175.                                                        IsBusy="{Binding Path=IsBusy, Mode=TwoWay}"
176.                                                        BusyContent="{Binding Source={StaticResource Strings}, Path=Values.PleaseWait}"
177.                                                        DisplayAfter="00:00:00.2000000"
178.                                                        CanCancel="True"
179.                                                        CancelContent="{Binding Source={StaticResource Strings}, Path=Values.Cancel}">
180.        <Grid>
181.            <Grid.RowDefinitions>
182.                <RowDefinition Height="Auto"/>
183.                <RowDefinition/>
184.            </Grid.RowDefinitions>
185.
186.            <!--Grid containing reports-->
187.            <Grid Grid.Row="0">
188.                <Grid.RowDefinitions>
189.                    <RowDefinition Height="Auto"/>
190.                    <RowDefinition Height="Auto"/>
191.                </Grid.RowDefinitions>
192.                <Grid.ColumnDefinitions>
193.                    <ColumnDefinition/>
194.                    <ColumnDefinition Width="0.5*"/>
195.                </Grid.ColumnDefinitions>
196.                <Grid Grid.ColumnSpan="4">
197.                    <Border BorderThickness="5,5,5,5"
198.                                    BorderBrush="#FFD2E9E0"
199.                                    CornerRadius="0,0,6,6"/>
200.                    <StackPanel Grid.ColumnSpan="4"
201.                                            Margin ="4"
202.                                            Background="#FFD2E9E0">
203.
204.                        <TextBlock TextDecorations="Underline"
205.                                             Margin="6,6"
206.                                             FontSize="12"
207.                                             FontWeight="Bold"
208.                                             Text="{Binding Source={StaticResource Strings}, Path=Values.OperationReportStandard}"/>
209.                    </StackPanel>
210.                </Grid>
211.                <Grid Grid.Row="1">
212.                    <Grid.RowDefinitions>
213.                        <RowDefinition/>
214.                        <RowDefinition/>
215.                    </Grid.RowDefinitions>
216.                    <TextBlock TextWrapping="Wrap"
217.                                         Margin="10,10"
218.                                         Grid.Row="0"
219.                                         Text="{Binding Source={StaticResource Strings}, Path=Values.ReportSummary}"/>
220.                    <TextBlock TextWrapping="Wrap"
221.                                         Margin="10,10"
222.                                         Grid.Row="1"
223.                                         Text="{Binding Source={StaticResource Strings}, Path=Values.ReportMonthlyBased}"/>
224.
225.                </Grid>
226.                <Grid Grid.Column="1"
227.                            Grid.Row="1">
228.                    <Grid.RowDefinitions>
229.                        <RowDefinition/>
230.                        <RowDefinition/>
231.                    </Grid.RowDefinitions>
232.                    <Grid>
233.                        <Grid.ColumnDefinitions>
234.                            <ColumnDefinition/>
235.                            <ColumnDefinition Width="50"/>
236.                            <ColumnDefinition/>
237.                        </Grid.ColumnDefinitions>
238.                        <telerik:RadDatePicker VerticalAlignment="Center"
239.                                                                     Grid.Column="0"
240.                                                                     IsEnabled="True"
241.                                                                     DateSelectionMode="Month"
242.                                                                     SelectedDate="{Binding ReportParameter.StartPeriod, Mode=TwoWay}"
243.                                                                     DisplayFormat="Short"
244.                                                                     DateTimeWatermarkContent="{Binding Source={StaticResource Strings}, Path=Values.Date}"/>
245.                        <TextBlock VerticalAlignment="Center"
246.                                             HorizontalAlignment="Center"
247.                                             Grid.Column="1"
248.                                             Text="{Binding Source={StaticResource Strings}, Path=Values.To}"/>
249.
250.                        <telerik:RadDatePicker VerticalAlignment="Center"
251.                                                                     Grid.Column="2"
252.                                                                     DateSelectionMode="Month"
253.                                                                     SelectedDate="{Binding ReportParameter.EndPeriod, Mode=TwoWay}"
254.                                                                     DisplayFormat="Short"
255.                                                                     DateTimeWatermarkContent="{Binding Source={StaticResource Strings}, Path=Values.Date}"/>
256.                    </Grid>
257.                    <Button Grid.Row="1"
258.                                    Grid.Column="1"
259.                                    Margin="2,2,2,14"
260.                                    Command="{Binding GenerateOperationReportCommand}"
261.                                    Content="{Binding Source={StaticResource Strings}, Path=Values.ShowReport}"/>
262.                </Grid>
263.
264.            </Grid>
265.
266.            <Grid Grid.Row="1">
267.
268.                <Grid.RowDefinitions>
269.                    <RowDefinition Height="35"/>
270.                    <RowDefinition/>
271.
272.                </Grid.RowDefinitions>
273.                <Grid.ColumnDefinitions>
274.                    <ColumnDefinition/>
275.                    <ColumnDefinition/>
276.                    <ColumnDefinition/>
277.                    <ColumnDefinition/>
278.                </Grid.ColumnDefinitions>
279.                <Grid Grid.ColumnSpan="4"
280.                            Visibility="Visible">
281.
282.                    <Border BorderThickness="5,5,5,5"
283.                                    BorderBrush="#FFD2E9E0"
284.                                    CornerRadius="6,6,6,6"/>
285.                    <StackPanel Grid.ColumnSpan="4"
286.                                            Margin ="4"
287.                                            Background="#FFD2E9E0">
288.
289.                        <TextBlock TextDecorations="Underline"
290.                                             Margin="6,6"
291.                                             FontSize="12"
292.                                             FontWeight="Bold"
293.                                             Text="{Binding Source={StaticResource Strings}, Path=Values.OperationReportIndividual}"/>
294.                    </StackPanel>
295.                </Grid>
296.                <Grid Grid.Row="1"
297.                            ColumnSpan="4">
298.                    <Grid.ColumnDefinitions>
299.                        <ColumnDefinition/>
300.                        <ColumnDefinition/>
301.                        <ColumnDefinition/>
302.                        <ColumnDefinition/>
303.                    </Grid.ColumnDefinitions>
304.                    <Grid.RowDefinitions>
305.                        <RowDefinition Height="35"/>
306.                        <RowDefinition/>
307.                    </Grid.RowDefinitions>
308.                    <telerik:RadDatePicker VerticalAlignment="Center"
309.                                                                 Grid.Column="2"
310.                                                                 DateSelectionMode="Month"
311.                                                                 Margin="2"
312.                                                                 SelectedDate="{Binding StartPeriodCustom, Mode=TwoWay}"
313.                                                                 DisplayFormat="Short"
314.                                                                 DateTimeWatermarkContent="{Binding Source={StaticResource Strings}, Path=Values.Date}"/>
315.                    <telerik:RadDatePicker VerticalAlignment="Center"
316.                                                                 Grid.Column="3"
317.                                                                 Margin="2"
318.                                                                 DateSelectionMode="Month"
319.                                                                 SelectedDate="{Binding EndPeriodCustom, Mode=TwoWay}"
320.                                                                 DisplayFormat="Short"
321.                                                                 DateTimeWatermarkContent="{Binding Source={StaticResource Strings}, Path=Values.Date}"/>
322.                    <telerik:RadListBox Grid.Row="1"
323.                                                            Grid.ColumnSpan="4"
324.                                                            Margin="2"
325.                                                            Background="Transparent"
326.                                                            ItemsSource="{Binding ListReports}"
327.                                                            ItemContainerStyle="{StaticResource RadListBoxItemStyle}"
328.                                                            SelectedItem="{Binding CurrentReportEntry, Mode=TwoWay}"
329.                                                            ItemTemplate="{StaticResource reportTemplate}"/>
330.
331.                </Grid>
332.            </Grid>
333.
334.        </Grid>
335.
336.    </enControls:BusyIndicator>
337.</sip:SipModuleBase>

Best regards
Manfred

[Kalin]

Hello Manfred,

You will need to set the ItemsPanel the following way:

<telerik:RadListBox ItemsSource="{Binding ItemsSource}">
    <telerik:RadListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </telerik:RadListBox.ItemsPanel>
</telerik:RadListBox>

However please not that if you have a lot of items in the ListBox this may cause performance issues - if you have few ones it shouldn't be a problem.

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Manfred]

Hi Kalin,

thanks a lot, that saves my day :)
It works perfect :)

Best regards
Manfred

[Manfred]

Hi Kalin,

thanks a lot :)
That saves my day :)

Best regards
Manfred