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

[Solved] Problems with DataTemplate in GridView

0 Answers 133 Views

GridView

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

This question is locked. New answers and comments are not allowed.

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"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

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="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!