This question is locked. New answers and comments are not allowed.
Hi,
I'm working on a Windows Phone App, and I'm using RadDataBoundListBox in my project.
I want to use the checkbox mode to select multiple items and make the Foreground colour of the RadDataBoundListBoxItem change depending on whether the item is selected.
Currently, the checkbox becomes checked but the text doesn't change colour.
I have looked at the style but the "selected" visual state of the default style doesn't make any difference.
Thanks in advance.
01.
<
VisualStateGroup
x:Name
=
"SelectionStates"
>
02.
<
VisualState
x:Name
=
"Unselected"
/>
03.
<
VisualState
x:Name
=
"Selected"
>
04.
<
Storyboard
>
05.
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"PART_ContainerHolder"
>
06.
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneAccentBrush}"
/>
07.
</
ObjectAnimationUsingKeyFrames
>
08.
</
Storyboard
>
09.
</
VisualState
>
10.
</
VisualStateGroup
>
My ListBox:
1.
<
telerikPrimitives:RadDataBoundListBox
2.
ItemsSource
=
"{Binding DownloadItems}"
3.
Height
=
"453"
Margin
=
"0,82,0,0"
4.
IsCheckModeActive
=
"True"
5.
ItemCheckedPath
=
"IsSelected"
6.
FontSize
=
"28"
7.
FontFamily
=
"Portable User Interface"
8.
/>
2 Answers, 1 is accepted
0
Hello Omer,
Thank you for your interest.
Currently there's no way to change the style of the items which are selected in the CheckBox mode. This mode is rather temporary selection and that's why the Selected state does no affect the items.
Regards,
Ivaylo Gergov
Telerik
Thank you for your interest.
Currently there's no way to change the style of the items which are selected in the CheckBox mode. This mode is rather temporary selection and that's why the Selected state does no affect the items.
Regards,
Ivaylo Gergov
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0
Omer
Top achievements
Rank 1
answered on 05 Jul 2016, 04:13 PM
Thanks for your reply.
I managed to accomplish what I wanted by changing the checkbox style since I am only using the CheckBox mode. I set the content of the ListboxItem to the content of the Checkbox.
Listbox:
<
telerikPrimitives:RadDataBoundListBox
Name
=
"TranslationsListbox"
ItemsSource
=
"{Binding DownloadTranslationItems}"
CheckModeDeactivatedOnBackButton
=
"False"
IsCheckModeActive
=
"True"
ItemCheckedPath
=
"IsSelected"
FontSize
=
"28"
ItemContainerStyle
=
"{StaticResource RadDataBoundListBoxItemStyle1}"
CheckBoxStyle
=
"{StaticResource CheckBoxStyle1}"
/>
Checkbox Style:
<
Style
x:Key
=
"PhoneButtonBase"
TargetType
=
"ButtonBase"
>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"{StaticResource PhoneBorderThickness}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilySemiBold}"
/>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeMediumLarge}"
/>
<
Setter
Property
=
"Padding"
Value
=
"10,3,10,5"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"ButtonBase"
>
<
Grid
Background
=
"Transparent"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"MouseOver"
/>
<
VisualState
x:Name
=
"Pressed"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"ContentContainer"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneBackgroundBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneForegroundBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"ContentContainer"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"ButtonBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"Transparent"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
x:Name
=
"ButtonBackground"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
CornerRadius
=
"0"
Margin
=
"{StaticResource PhoneTouchTargetOverhang}"
>
<
ContentControl
x:Name
=
"ContentContainer"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
Foreground
=
"{TemplateBinding Foreground}"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Padding
=
"{TemplateBinding Padding}"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
</
Border
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
=
"PhoneRadioButtonCheckBoxBase"
BasedOn
=
"{StaticResource PhoneButtonBase}"
TargetType
=
"ToggleButton"
>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource PhoneRadioCheckBoxBrush}"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{StaticResource PhoneRadioCheckBoxBrush}"
/>
<
Setter
Property
=
"FontSize"
Value
=
"{StaticResource PhoneFontSizeMedium}"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"{StaticResource PhoneFontFamilyNormal}"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Left"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"Padding"
Value
=
"0"
/>
</
Style
>
<
Style
x:Key
=
"CheckBoxStyle1"
BasedOn
=
"{StaticResource PhoneRadioButtonCheckBoxBase}"
TargetType
=
"CheckBox"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"CheckBox"
>
<
Grid
Background
=
"Transparent"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"MouseOver"
/>
<
VisualState
x:Name
=
"Pressed"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"CheckBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxPressedBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"CheckBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxPressedBorderBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Fill"
Storyboard.TargetName
=
"CheckMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxCheckBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Fill"
Storyboard.TargetName
=
"IndeterminateMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxCheckBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"CheckBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"BorderBrush"
Storyboard.TargetName
=
"CheckBackground"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Fill"
Storyboard.TargetName
=
"CheckMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Fill"
Storyboard.TargetName
=
"IndeterminateMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneRadioCheckBoxCheckDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"ContentContainer"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneDisabledBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"CheckStates"
>
<
VisualState
x:Name
=
"Checked"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"CheckMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"ContentContainer"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneAccentBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Unchecked"
/>
<
VisualState
x:Name
=
"Indeterminate"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Visibility"
Storyboard.TargetName
=
"IndeterminateMark"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
Visibility
>Visible</
Visibility
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Grid
Margin
=
"{StaticResource PhoneTouchTargetLargeOverhang}"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"32"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
Border
x:Name
=
"CheckBackground"
BorderBrush
=
"{TemplateBinding Background}"
BorderThickness
=
"{StaticResource PhoneBorderThickness}"
Background
=
"{TemplateBinding Background}"
HorizontalAlignment
=
"Left"
Height
=
"32"
IsHitTestVisible
=
"False"
VerticalAlignment
=
"Center"
Width
=
"32"
/>
<
Rectangle
x:Name
=
"IndeterminateMark"
Fill
=
"{StaticResource PhoneRadioCheckBoxCheckBrush}"
HorizontalAlignment
=
"Center"
Height
=
"16"
IsHitTestVisible
=
"False"
Grid.Row
=
"0"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
Width
=
"16"
/>
<
Path
x:Name
=
"CheckMark"
Data
=
"M0,119 L31,92 L119,185 L267,0 L300,24 L122,250 z"
Fill
=
"{StaticResource PhoneRadioCheckBoxCheckBrush}"
HorizontalAlignment
=
"Center"
Height
=
"18"
IsHitTestVisible
=
"False"
Stretch
=
"Fill"
StrokeThickness
=
"2"
StrokeLineJoin
=
"Round"
Visibility
=
"Collapsed"
VerticalAlignment
=
"Center"
Width
=
"24"
/>
<
ContentControl
x:Name
=
"ContentContainer"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
Grid.Column
=
"1"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"12,0,0,0"
Padding
=
"{TemplateBinding Padding}"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
</
Grid
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Listbox Style:
<
Style
x:Key
=
"RadDataBoundListBoxItemStyle1"
TargetType
=
"telerikPrimitives:RadDataBoundListBoxItem"
>
<
Setter
Property
=
"Background"
Value
=
"Transparent"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"0"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"Transparent"
/>
<
Setter
Property
=
"Padding"
Value
=
"0"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"CacheMode"
Value
=
"BitmapCache"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikPrimitives:RadDataBoundListBoxItem"
>
<
Border
x:Name
=
"LayoutRoot"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
HorizontalAlignment
=
"{TemplateBinding HorizontalAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalAlignment}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"MouseOver"
/>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Background"
Storyboard.TargetName
=
"LayoutRoot"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource TransparentBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Duration
=
"0"
To
=
".5"
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"LayoutRoot"
/>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"SelectionStates"
>
<
VisualState
x:Name
=
"Unselected"
/>
<
VisualState
x:Name
=
"Selected"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty
=
"Foreground"
Storyboard.TargetName
=
"LayoutRoot"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{StaticResource PhoneAccentBrush}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
CheckBox
x:Name
=
"PART_CheckBox"
IsHitTestVisible
=
"False"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
Content
=
"{TemplateBinding Content}"
HorizontalAlignment
=
"Stretch"
HorizontalContentAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"Stretch"
VerticalContentAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
</
Border
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>