Problems with DataTemplate in GridView

1 posts, 0 answers
  1. Miguel Rios
    Miguel Rios avatar
    21 posts
    Member since:
    Sep 2009

    Posted 03 Dec 2013 Link to this post

    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!
Back to Top