This is a migrated thread and some comments may be shown as answers.

Strange behaviour of ListBoxItems

5 Answers 19 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Manfred
Top achievements
Rank 2
Manfred asked on 14 Mar 2014, 08:03 AM
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

5 Answers, 1 is accepted

Sort by
0
Kalin
Telerik team
answered on 17 Mar 2014, 01:29 PM
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
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Manfred
Top achievements
Rank 2
answered on 18 Mar 2014, 09:42 AM
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


0
Kalin
Telerik team
answered on 18 Mar 2014, 10:19 AM
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
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
Manfred
Top achievements
Rank 2
answered on 18 Mar 2014, 10:37 AM
Hi Kalin,

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

Best regards
Manfred
0
Manfred
Top achievements
Rank 2
answered on 18 Mar 2014, 10:38 AM
Hi Kalin,

thanks a lot :)
That saves my day :)

Best regards
Manfred
Tags
ListBox
Asked by
Manfred
Top achievements
Rank 2
Answers by
Kalin
Telerik team
Manfred
Top achievements
Rank 2
Share this question
or