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

Strange behaviour of ListBoxItems

5 Answers 56 Views

ListBox

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

This question is locked. New answers and comments are not allowed.

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

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. 

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

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.