This is a migrated thread and some comments may be shown as answers.

Problems with DataTemplate in GridView

0 Answers 20 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Miguel Rios
Top achievements
Rank 1
Miguel Rios asked on 03 Dec 2013, 05:51 PM
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!

No answers yet. Maybe you can help?

Tags
GridView
Asked by
Miguel Rios
Top achievements
Rank 1
Share this question
or