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!