Hi,
I am using RadListBox for one of my project and are binding the data into the box using Observable collections but its take a long time to render the UI for around 500 items onto the UI.
<
telerik:RadListBox
Name
=
"rlb"
ItemsSource
=
"{Binding Items}"
SelectedItem
=
"{Binding SelectedItem,Mode=TwoWay}"
ScrollViewer.HorizontalScrollBarVisibility
=
"Disabled"
>
<
telerik:RadListBox.DragVisualProvider
>
<
telerik:ScreenshotDragVisualProvider
/>
</
telerik:RadListBox.DragVisualProvider
>
<
telerik:RadListBox.DragDropBehavior
>
<
telerik:ListBoxDragDropBehavior
AllowReorder
=
"True"
/>
</
telerik:RadListBox.DragDropBehavior
>
<
telerik:RadListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<
telerik:RadWrapPanel
Orientation
=
"Horizontal"
/>
</
ItemsPanelTemplate
>
</
telerik:RadListBox.ItemsPanel
>
<
telerik:RadListBox.ItemTemplate
>
<
DataTemplate
>
<
Border
BorderThickness
=
"2"
BorderBrush
=
"Red"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
TextBlock
Text
=
"{Binding Id}"
Grid.Row
=
"0"
/>
<
TextBlock
Text
=
"{Binding Value}"
Grid.Row
=
"1"
/>
</
Grid
>
</
Border
>
</
DataTemplate
>
</
telerik:RadListBox.ItemTemplate
>
</
telerik:RadListBox
>
Hi,
I created a custom item template (checkbox + textblock). The problem is there is small 2 pixels border which doesn't react to the click events.
Is there a way to eliminate that border or make it hit testable?
Thanks!
When you Drag and drop an item onto itself it is creating a duplicate item in the listbox. Is this expected behavior and if so is there a way to prevent it from creating the duplicate item.
We don't handle the ghost entry so it isn't a real problem just visually its been annoying our users.
public
class
SpeakerStyleSelector : StyleSelector
{
public
Style NoEmailSpeakerStyle {
get
;
set
; }
public
override
Style SelectStyle(
object
item, DependencyObject container)
{
if
(item
is
Speaker)
return
this
.NoEmailSpeakerStyle;
return
null
;
}
}
}
<
Style
x:Key
=
"NoEmailSpeakerItemContainerStyle"
TargetType
=
"telerik:RadListBoxItem"
>
<
Setter
Property
=
"Foreground"
Value
=
"Red"
/>
</
Style
>
<
local:SpeakerStyleSelector
x:Key
=
"SpeakerItemContainerStyleSelector"
NoEmailSpeakerStyle
=
"{StaticResource NoEmailSpeakerItemContainerStyle}"
/>
...
<
telerik:RadListBox
ItemsSource
=
"{Binding Speakers}"
ItemContainerStyleSelector
=
"{StaticResource SpeakerItemContainerStyleSelector}"
/>
SelectStyle
method is never called.I have this xaml code:
<telerik:RadListBox x:Name="ActiveUnitList"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ItemsSource="{Binding MyUnits}"
ItemTemplate="{StaticResource UnitTemplate}"
SelectedItem="{Binding MyUnits.MySelectedUnit, Mode=TwoWay}" />
but the vertical scrollbar always shows up (even when the list of items fits in the listbox). I've tried ...Visibility="Disabled" too but that didn't help.
How can I force the scrollbar to disappear?
-Thanks, Tom
<
UserControl
x:Class
=
"RadListBoxDragAndDropPOC.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
d:DesignWidth
=
"640"
d:DesignHeight
=
"480"
DataContext
=
"{Binding RelativeSource={RelativeSource self}}"
x:Name
=
"Page"
>
<
UserControl.Resources
>
<
Style
x:Key
=
"DraggableListBoxItem"
TargetType
=
"telerik:RadListBoxItem"
>
<
Setter
Property
=
"telerik:DragDropManager.AllowCapturedDrag"
Value
=
"True"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"100"
/>
<
ColumnDefinition
Width
=
"100"
/>
</
Grid.ColumnDefinitions
>
<
telerik:HeaderedContentControl
Grid.Column
=
"0"
>
<
telerik:RadListBox
ItemsSource
=
"{Binding Path=DataContext.MockDataList, ElementName=Page}"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
ItemContainerStyle
=
"{StaticResource DraggableListBoxItem}"
AllowDrop
=
"False"
>
<
telerik:RadListBox.ItemTemplate
>
<
DataTemplate
>
<
StackPanel
Orientation
=
"Vertical"
>
<
TextBlock
Text
=
"{Binding DisplayName}"
/>
</
StackPanel
>
</
DataTemplate
>
</
telerik:RadListBox.ItemTemplate
>
<
telerik:RadListBox.DragVisualProvider
>
<
telerik:ScreenshotDragVisualProvider
/>
</
telerik:RadListBox.DragVisualProvider
>
<
telerik:RadListBox.DragDropBehavior
>
<
telerik:ListBoxDragDropBehavior
AllowReorder
=
"True"
/>
</
telerik:RadListBox.DragDropBehavior
>
</
telerik:RadListBox
>
</
telerik:HeaderedContentControl
>
<
telerik:HeaderedContentControl
Grid.Column
=
"1"
>
<
telerik:RadListBox
ItemsSource
=
"{Binding Path=DataContext.MockDataListTwo, ElementName=Page}"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
ItemContainerStyle
=
"{StaticResource DraggableListBoxItem}"
>
<
telerik:RadListBox.ItemTemplate
>
<
DataTemplate
>
<
StackPanel
Orientation
=
"Vertical"
>
<
TextBlock
Text
=
"{Binding DisplayName}"
/>
</
StackPanel
>
</
DataTemplate
>
</
telerik:RadListBox.ItemTemplate
>
<
telerik:RadListBox.DragVisualProvider
>
<
telerik:ScreenshotDragVisualProvider
/>
</
telerik:RadListBox.DragVisualProvider
>
<
telerik:RadListBox.DragDropBehavior
>
<
telerik:ListBoxDragDropBehavior
AllowReorder
=
"True"
/>
</
telerik:RadListBox.DragDropBehavior
>
</
telerik:RadListBox
>
</
telerik:HeaderedContentControl
>
</
Grid
>
</
UserControl
>
using
System;
using
System.Collections.Generic;
using
System.Collections.ObjectModel;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
namespace
RadListBoxDragAndDropPOC
{
public
partial
class
MainPage : UserControl
{
public
ObservableCollection<MockData> MockDataList
{
get
{
return
(ObservableCollection<MockData>)GetValue(MockDataListProperty); }
set
{ SetValue(MockDataListProperty, value); }
}
// Using a DependencyProperty as the backing store for MockDataList. This enables animation, styling, binding, etc...
public
static
readonly
DependencyProperty MockDataListProperty =
DependencyProperty.Register(
"MockDataList"
,
typeof
(ObservableCollection<MockData>),
typeof
(MainPage),
new
PropertyMetadata(
null
));
public
ObservableCollection<MockData> MockDataListTwo
{
get
{
return
(ObservableCollection<MockData>)GetValue(MockDataListTwoProperty); }
set
{ SetValue(MockDataListTwoProperty, value); }
}
// Using a DependencyProperty as the backing store for MockDataListTwo. This enables animation, styling, binding, etc...
public
static
readonly
DependencyProperty MockDataListTwoProperty =
DependencyProperty.Register(
"MockDataListTwo"
,
typeof
(ObservableCollection<MockData>),
typeof
(MainPage),
new
PropertyMetadata(
null
));
public
MainPage()
{
InitializeComponent();
List<MockData> mockDataList =
new
List<MockData>();
mockDataList.Add(
new
MockData(
"One"
, 1));
mockDataList.Add(
new
MockData(
"Two"
, 2));
mockDataList.Add(
new
MockData(
"Three"
, 3));
mockDataList.Add(
new
MockData(
"Four"
, 4));
mockDataList.Add(
new
MockData(
"Five"
, 5));
mockDataList.Add(
new
MockData(
"Six"
, 6));
mockDataList.Add(
new
MockData(
"Seven"
, 7));
this
.MockDataList =
new
ObservableCollection<MockData>(mockDataList);
List<MockData> mockDataList2 =
new
List<MockData>();
mockDataList2.Add(
new
MockData(
"2One"
, 1));
mockDataList2.Add(
new
MockData(
"2Two"
, 2));
mockDataList2.Add(
new
MockData(
"2Three"
, 3));
mockDataList2.Add(
new
MockData(
"2Four"
, 4));
mockDataList2.Add(
new
MockData(
"2Five"
, 5));
mockDataList2.Add(
new
MockData(
"2Six"
, 6));
mockDataList2.Add(
new
MockData(
"2Seven"
, 7));
this
.MockDataListTwo =
new
ObservableCollection<MockData>(mockDataList2);
}
}
public
class
MockData
{
public
string
DisplayName {
get
;
set
; }
public
int
DisplayOrder {
get
;
set
; }
public
MockData(
string
displayName,
int
displayOrder)
{
this
.DisplayName = displayName;
this
.DisplayOrder = displayOrder;
}
}
}
Thanks for any support.
Regards,
V.Chocks.