Hi to all,
I have a problem using a DataTemplate in a GridViewCell. I use a template targeted to a CheckBox in the Cell but when I click outside the checkbox, the cell loses its Template.
My XAML looks like this:
<
UserControl
x:Class
=
"CheckBoxDataTemplateExample.MainPage"
mc:Ignorable
=
"d"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
Grid.Resources
>
<
SolidColorBrush
x:Key
=
"clrTxtForeground"
Color
=
"#FFCCCCCC"
/>
<
SolidColorBrush
x:Key
=
"clrControlBorderClear"
Color
=
"#20FFFFFF"
/>
<
SolidColorBrush
x:Key
=
"clrControlBackgroundClearSolid"
Color
=
"#19FFFFFF"
/>
<
SolidColorBrush
x:Key
=
"clrTextBoxForeground"
Color
=
"Black"
/>
<
LinearGradientBrush
x:Key
=
"clrTextBoxBackground"
StartPoint
=
"0.5,0"
EndPoint
=
"0.5,1"
>
<
GradientStop
Color
=
"#FFFFFFFF"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFFFFFFF"
Offset
=
"0"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"clrControlBackgroundOver"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#20FFFFFF"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#10FFFFFF"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
LinearGradientBrush
x:Key
=
"clrControlBackgroundDown"
EndPoint
=
"0.5,0"
StartPoint
=
"0.5,1"
>
<
GradientStop
Color
=
"#FF121212"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FF0E0E0E"
Offset
=
"1"
/>
</
LinearGradientBrush
>
<
ControlTemplate
TargetType
=
"CheckBox"
x:Name
=
"ctmCheckBox"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"Auto"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStates"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
GeneratedDuration
=
"0:0:0.2"
/>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"MouseOver"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"1"
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
Storyboard.TargetName
=
"background_over"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Pressed"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"1"
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
Storyboard.TargetName
=
"background_down"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Disabled"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"0.30"
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
Storyboard.TargetName
=
"background_disabled"
/>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"CheckStates"
>
<
VisualState
x:Name
=
"Unchecked"
/>
<
VisualState
x:Name
=
"Checked"
>
<
Storyboard
>
<
DoubleAnimation
Duration
=
"0"
To
=
"1"
Storyboard.TargetProperty
=
"(UIElement.Opacity)"
Storyboard.TargetName
=
"tick"
/>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Indeterminate"
/>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Rectangle
x:Name
=
"blackframe"
Stroke
=
"{StaticResource clrControlBorderClear}"
Fill
=
"{StaticResource clrTextBoxBackground}"
Width
=
"15"
Height
=
"15"
/>
<
Rectangle
x:Name
=
"background"
Margin
=
"2"
Fill
=
"{StaticResource clrControlBackgroundClearSolid}"
Width
=
"11"
Height
=
"11"
/>
<
Rectangle
x:Name
=
"background_over"
Margin
=
"2"
Opacity
=
"0"
Fill
=
"{StaticResource clrControlBackgroundOver}"
Width
=
"9"
Height
=
"9"
/>
<
Rectangle
x:Name
=
"background_down"
Margin
=
"2"
Opacity
=
"0"
Fill
=
"{StaticResource clrControlBackgroundDown}"
Width
=
"9"
Height
=
"9"
/>
<
ContentPresenter
x:Name
=
"contentPresenter"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
Grid.Column
=
"1"
Margin
=
"5,0,0,0"
/>
<
Path
x:Name
=
"tick"
Fill
=
"{StaticResource clrTextBoxForeground}"
Data
=
"F1 M 4.325,7.852 C 4.175,7.852 4.026,7.807 3.900,7.720 L 0.325,5.262 C -0.016,5.027 -0.103,4.560 0.132,4.219 C 0.367,3.877 0.833,3.792 1.175,4.025 L 4.091,6.030 L 7.478,0.365 C 7.690,0.010 8.151,-0.107 8.506,0.106 C 8.861,0.319 8.978,0.779 8.765,1.135 L 4.969,7.486 C 4.863,7.664 4.688,7.790 4.485,7.834 C 4.432,7.846 4.378,7.852 4.325,7.852 L 4.325,7.852 Z"
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
Opacity
=
"0"
/>
<
Rectangle
x:Name
=
"background_disabled"
Margin
=
"2"
Opacity
=
"0"
Fill
=
"{StaticResource clrTextBoxForeground}"
Width
=
"10"
Height
=
"10"
/>
</
Grid
>
</
ControlTemplate
>
<
Style
x:Key
=
"styCheckBox"
TargetType
=
"CheckBox"
>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource clrTxtForeground}"
/>
<!--<Setter Property="FontFamily" Value="{StaticResource fntApp}" />-->
<!--<Setter Property="FontSize" Value="{StaticResource fntSize}" />-->
<
Setter
Property
=
"Template"
Value
=
"{StaticResource ctmCheckBox}"
/>
</
Style
>
<
DataTemplate
x:Key
=
"dtCheckBoxSel"
>
<
CheckBox
Tag
=
"{Binding Key}"
IsChecked
=
"{Binding IsSelected, Mode=TwoWay}"
Style
=
"{StaticResource styCheckBox}"
HorizontalAlignment
=
"Center"
/>
</
DataTemplate
>
</
Grid.Resources
>
</
Grid
>
</
UserControl
>
And here is the code behind:
using
System;
using
System.Collections.Generic;
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;
using
Telerik.Windows.Controls;
using
Telerik.Windows.Controls.GridView;
using
System.Collections.ObjectModel;
using
System.Windows.Data;
namespace
CheckBoxDataTemplateExample
{
public
partial
class
MainPage : UserControl
{
public
MainPage()
{
InitializeComponent();
dict = LayoutRoot.Resources;
NewMethod();
}
private
void
NewMethod()
{
RadGridView newView =
new
RadGridView() { ItemsSource =
new
ObservableCollection<Personnel>() {
new
Personnel() { Name =
"Dude 1"
, Key = 0, IsSelected =
false
},
new
Personnel() { Name =
"Dude 2"
, Key = 1, IsSelected =
true
} }, EnableRowVirtualization =
true
, AutoGenerateColumns =
false
, CanUserFreezeColumns =
false
, AlternationCount = 2, Margin =
new
Thickness(5), ShowGroupPanel =
false
, HorizontalAlignment = HorizontalAlignment.Stretch, ColumnWidth = Telerik.Windows.Controls.GridViewLength.Auto };
newView.Columns.Add(
new
GridViewDataColumn { DataMemberBinding =
new
Binding(
"IsSelected"
), Header =
"Selected"
, MinWidth = 40, CellStyleSelector =
new
StyleSelector(), CellTemplate = dict[
"dtCheckBoxSel"
]
as
DataTemplate });
newView.Columns.Add(
new
GridViewDataColumn() { DataMemberBinding =
new
Binding(
"Key"
), Header =
"Key"
, Width =
new
GridViewLength(40, GridViewLengthUnitType.Star), IsReadOnly =
true
});
newView.Columns.Add(
new
GridViewDataColumn() { DataMemberBinding =
new
Binding(
"Name"
), Header =
"Name"
, Width =
new
GridViewLength(40, GridViewLengthUnitType.Star), IsReadOnly =
true
});
LayoutRoot.Children.Add(newView);
}
public
ResourceDictionary dict
{
get
{
return
LayoutRoot.Resources; }
set
{ LayoutRoot.Resources = value; }
}
}
public
class
Personnel
{
public
bool
IsSelected {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
int
Key {
get
;
set
; }
}
}
I'm attaching a demo project and a link to a
video where you can see the problem.
Any help would be great.
Thank you!