MVVM DataGrid with Summary Line - c#

I've been working on getting a simple grid setup and I'm having issues getting a summary line either above or below the DataGrid. Is their some some way to get total counts in the datagrid for specifict columns?
Here is what I have:
<Window xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
x:Class="TestWindow"
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"
Title="Test Window" Height="645" Width="900">
<StackPanel Orientation="Vertical">
<DataGrid Height="500" ItemsSource="{Binding GridDetails}" HorizontalAlignment="Left" VerticalAlignment="Top" AutoGenerateColumns="False" CanUserAddRows="False">
<DataGrid.Columns>
<DataGridTextColumn x:Name="Name" Header="Name" Binding="{Binding Path='Name', Mode=OneTime}" IsReadOnly="True" Width="200" />
<DataGridTextColumn x:Name="ID" Header="ID" Binding="{Binding Path='ID', Mode=OneTime}" IsReadOnly="True" Width="100">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="NumClaims" Header="Claims" Binding="{Binding Path='NumClaims', Mode=OneTime}" IsReadOnly="True" Width="100">
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
<DataGridTextColumn x:Name="NewClaims" Header="New Claims" Binding="{Binding Path='NumNewClaims', Mode=OneTime}" IsReadOnly="True" Width="80">
<DataGridTextColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="{Binding NumNewClaims}"/>
</Style>
</DataGridTextColumn.CellStyle>
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
</StackPanel>
</Window>
In the View Model
private ObservableCollection<GridDetail> _gridDetails;
public ObservableCollection<GridDetail> GridDetails
{
get { return _gridDetails; }
set { SetProperty(ref _gridDetails, value); }
}
private int _totalClaims;
public int TotalClaims
{
get { return _totalClaims; }
set { SetProperty(ref _totalClaims, value); }
}
private int _totalNewClaims;
public int TotalNewClaims
{
get { return _totalNewClaims; }
set { SetProperty(ref _totalNewClaims, value); }
}
The trouble I'm having is figuring out how to put the totals I've been tracking in the view model in the column header. This is my preferred method but I could also work with a summary row that is frozen to the top of the grid if that is simpler to implement.
Any suggestions would be greatly appreciated.


You want to create a custom column header for each column. Then, bind the TextBlock with the property in the ViewModel. However, you need to play with the DataContext to make it work. Let's go by steps.
A custom header would be like this:
<DataGridTextColumn x:Name="NumClaims" Binding="{Binding Path='NumClaims', Mode=OneTime}" IsReadOnly="True" Width="100">
<DataGridTextColumn.Header>
<TextBlock Text="Claims" />
</DataGridTextColumn.Header>
<DataGridTextColumn.ElementStyle>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
Now this would be the same as you have right now, but now you can add more things to the header, such as a StackPanel.
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Claims" />
<TextBlock Text="35"/> <!-- Dummy value -->
</StackPanel>
</DataGridTextColumn.Header>
And if, as in your case, you would like to bind a property from your ViewModel, you would write
<DataGridTextColumn.Header>
<StackPanel>
<TextBlock Text="Claims" />
<TextBlock DataContext="{Binding RelativeSource={RelativeSource AncestorType=DataGrid, Mode=FindAncestor}, Path=DataContext}" Text="{Binding TotalClaims, UpdateSourceTrigger=PropertyChanged}" />
</StackPanel>
</DataGridTextColumn.Header>
I hope that this helps.

Related

DataGrid Textbox DataTrigger Condition Not Working As Expected

I have a window that has datagrid populated from datasource. I'm using DataGridTemplateColumn and has textbox. I want to make this textbox read only based on my DrawingType property value. Let's say I have this editable textbox from "Line From X" column. This is only editable if the DrawingType is "Line". My datatrigger condition works fine on window load. However I have issue on new item added on the grid. When I select Ellipse from DrawingType combobox, the textbox "Line From X" should be read only. However I can still input some texts. But when I leave the focus cursor let's say focus to other cells, it's now the time that the newly added item "Line From X" becomes read only. Please help. Here's what I want to achieve.
Make the target textboxes read only whether data came from datasource or newly added. The read only must be evaluated immediately during selection of DrawingType property. I'm using DataTrigger but if other approach can be done, that's okay.
Make the style generic since I'll be applying it to 2 or more columns. I'll convert other columns to DataGridTemplateColumn and add textboxes too using the same datatrigger.
Here's my code and screenshots.
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding DrawnObjects}" AutoGenerateColumns="False" Grid.Row="0" Margin="0,20" Name="dgBldgDrawings" CanUserAddRows="False" IsEnabled="{Binding IsManuallyAdded,Converter={StaticResource VisibilityConverter}}">
<DataGrid.Columns>
<DataGridComboBoxColumn ItemsSource="{x:Static ext:Extensions.GetEnumTypes}" SelectedItemBinding="{Binding DrawingType}" Width="85" Header="Drawing Type">
<DataGridComboBoxColumn.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<DataTrigger Binding="{Binding IsManuallyAdded}" Value="False">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridComboBoxColumn.CellStyle>
</DataGridComboBoxColumn>
<DataGridTextColumn Width="60" Header="X" Binding="{Binding Path=FootX}"/>
<DataGridTextColumn Width="65" Header="Y" Binding="{Binding Path=FootY}"/>
<DataGridTextColumn Width="65" Header="Width" Binding="{Binding Path=FootWidth}"/>
<DataGridTextColumn Width="65" Header="Height" Binding="{Binding Path=FootHeight}"/>
<DataGridTextColumn Width="65" Header="Text" Binding="{Binding Path=Text}"/>
<DataGridTemplateColumn Width="80" Header="Line From X">
<DataGridTemplateColumn.CellTemplate >
<DataTemplate >
<TextBox Text="{Binding LineFootX1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="16">
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=DrawingType,UpdateSourceTrigger=PropertyChanged}" Value="Line">
<Setter Property="IsReadOnly" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Width="80" Header="Line From Y" Binding="{Binding Path=LineFootY1}"/>
<DataGridTextColumn Width="70" Header="Line To X" Binding="{Binding Path=LineFootX2}"/>
<DataGridTextColumn Width="70" Header="Line To Y" Binding="{Binding Path=LineFootY2}"/>
</DataGrid.Columns>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Visibility" Value="{Binding IsForManualDraw, Converter={StaticResource VisibilityConverter}}"/>
</Style>
</DataGrid.RowStyle>
<DataGrid.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</DataGrid.Resources>
</DataGrid>
<Button Content="Add New Drawing" Width="150" Command="{Binding AddNewDrawingCommand}" Height="25" Grid.Row="1" Margin="0,0,250,0"/>
<Button Content="Save" Width="75" Command="{Binding SaveDrawingChangesCommand}" Height="25" Grid.Row="1"/>
</Grid>
Screenshots:

Add another DataTrigger to work if the row is newly added. Based on your posted code it seems that IsManuallyAdded property represents if a new row is added during session.
<Style TargetType="TextBox">
<Setter Property="IsReadOnly" Value="False" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=DrawingType,UpdateSourceTrigger=PropertyChanged}" Value="Line">
<Setter Property="IsReadOnly" Value="False" />
</DataTrigger>
<DataTrigger Binding="{Binding IsManuallyAdded}" Value="True">
<Setter Property="IsReadOnly" Value="True" />
</DataTrigger>
</Style.Triggers>
</Style>
Or you can bind it to IsManuallyAdded as shown below:
<Style TargetType="TextBox">
<Setter Property="IsReadOnly" Value="{Binding IsManuallyAdded}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=DrawingType,UpdateSourceTrigger=PropertyChanged}" Value="Line">
<Setter Property="IsReadOnly" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
For #2, you can take the style and defined in the resources with the key like <Style TargetType="TextBox" x:Key="MyKey"> and later can apply this on Textbox like
<TextBox Style={StaticResource MyKey} ..... />

Add Custom Rows at the top of DataGrid - WPF

I am new in WPF and I have a project that needs to have this output below
How can I do this? I just know a basic DataGrid code like this below:
<DataGrid AutoGenerateColumns="False" Name="myGrid" Margin="10">
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Path=Item.Header}"/>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
<DataGrid.Columns>
<DataGridTextColumn Header="Case Title" Binding="{Binding Path=Name}" Width="160" />
<DataGridComboBoxColumn Width="100" x:Name="dtgCbxColUnit" SelectedValueBinding="{Binding Unit, Mode=TwoWay}" DisplayMemberPath="{Binding Unit}" />
<DataGridTextColumn Header="Case 1" Binding="{Binding Path=Case1}" Width="80"/>
<DataGridTextColumn Header="Case 2" Binding="{Binding Path=Case2}" Width="80" />
<DataGridTextColumn Header="Case 3" Binding="{Binding Path=Case3}" Width="80" />
<DataGridTextColumn Header="Case 4" Binding="{Binding Path=Case4}" Width="80" />
<DataGridTextColumn Header="Case 5" Binding="{Binding Path=Case5}" Width="80" />
<DataGridTextColumn Header="Case 6" Binding="{Binding Path=Case6}" Width="80" />
</DataGrid.Columns>
</DataGrid>
How can I resolve this?

The DataGrid cell templating is done vertically (by columns) not horizontally (by rows). It means you can't make an exception for a few rows. If you want to have custom rows you have to apply it to all rows using DataGridTemplateColumn
<DataGrid.Columns>
<DataGridTemplateColumn Header="People">
<DataGridTemplateColumn.CellStyle>
<Style TargetType="DataGridCell">
<!-- normal template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<TextBlock Text="{Binding A}" Background="Green"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RowType}" Value="0">
<Setter Property="Template">
<Setter.Value>
<!-- first extra template -->
<ControlTemplate>
<TextBlock Text="{Binding A}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding RowType}" Value="1">
<Setter Property="Template">
<Setter.Value>
<!-- second extra template -->
<ControlTemplate>
<CheckBox Content="{Binding A}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
</DataGrid.Columns>
On the other hand DataGrid "styling" is done the opposite way using RowStyle. So you can write a trigger to customize one row completely with the cost of ignoring all cells (or columns) in that row:
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding RowType}" Value="0">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Content="{Binding A}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
combined results:
Normally I would suggest to use your own implementation of the general ItemsControl if you think these customizations will grow in the future.
There is another workaround where you create a gap at the top of the grid and overlay stuff onto it using a Canvas or any control with ClipToBounds=False explained here

C# DataGrid cell values from selected row

In my sample app I used ADO.NET Entity Data Model.
Here is my code:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
InventoryEntities context;
context = new Inventory.InventoryEntities();
var query = from x in context.Artikli
select new { x.ID, x.Sifra, x.Naziv, x.Kolicina, x.Prodajna, x.Nabavna, x.UkupnoProdajna, x.UkupnoNabavna, x.Slika };
var results = query.ToList();
grdArtikli.ItemsSource = results;
}
private void button_Click(object sender, RoutedEventArgs e)
{
Artikli mojID = (Artikli)grdArtikli.Items[grdArtikli.SelectedIndex];//This line raises error
MessageBox.Show(mojID.ID.ToString());
}
And the XAML:
<Window x:Class="Inventory.MainWindow"
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"
xmlns:local="clr-namespace:Inventory"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="1600" ResizeMode="NoResize" Loaded="Window_Loaded">
<Grid>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="790" Margin="0,0,0,0" VerticalAlignment="Top" Width="1590">
<TabControl.Effect>
<DropShadowEffect Color="#FF1A36E8"/>
</TabControl.Effect>
<TabItem Header="Artikli" Width="70" FontSize="18" FontWeight="Bold">
<TabItem.Background>
<RadialGradientBrush>
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0.5"/>
<GradientStop Color="#FFDDDDDD" Offset="0.8"/>
<GradientStop Color="#FF00E2FF" Offset="1"/>
</RadialGradientBrush>
</TabItem.Background>
<Grid Background="#FFACC383">
<DataGrid x:Name="grdArtikli" HorizontalAlignment="Left" Margin="5,5,0,0" VerticalAlignment="Top" Width="1550" Height="650" Background="#FF78B6EC" BorderBrush="#FF72DA36" Foreground="#FFB91313" AutoGenerateColumns="False" IsReadOnly="True" MouseDoubleClick="grdArtikli_MouseDoubleClick" SelectionChanged="grdArtikli_SelectionChanged" SelectionMode="Single" SelectedIndex="0">
<DataGrid.Columns>
<DataGridTextColumn Width="80" Binding="{Binding ID}" CanUserSort="False" CanUserReorder="False" CanUserResize="False" ClipboardContentBinding="{x:Null}" Header="ID" IsReadOnly="True">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="100" Binding="{Binding Sifra}" ClipboardContentBinding="{x:Null}" Header="Šifra" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="250" Binding="{Binding Naziv}" ClipboardContentBinding="{x:Null}" Header="Naziv" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="100" Binding="{Binding Kolicina}" ClipboardContentBinding="{x:Null}" Header="Količina" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="150" Binding="{Binding Prodajna}" ClipboardContentBinding="{x:Null}" Header="Prodajna Cena" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="150" Binding="{Binding Nabavna}" ClipboardContentBinding="{x:Null}" Header="Nabavna Cena" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="150" Binding="{Binding UkupnoProdajna}" ClipboardContentBinding="{x:Null}" Header="Sum Prodajna" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTextColumn Width="150" Binding="{Binding UkupnoNabavna}" ClipboardContentBinding="{x:Null}" Header="Sum Nabavna" CanUserSort="False" CanUserReorder="False" CanUserResize="False">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<DataGridTemplateColumn CanUserReorder="False" CanUserResize="False" ClipboardContentBinding="{x:Null}" Header="Slika" Width="*">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Source="{Binding Slika}" Stretch="Fill" Width="Auto" Height="30" x:Name="mojaSlika" Loaded="mojaSlika_Loaded">
</Image>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<DataGrid.DataContext>
<local:Artikli Naziv="0" Sifra="0" UkupnoNabavna="0" UkupnoProdajna="0"/>
</DataGrid.DataContext>
</DataGrid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="423,693,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
</Grid>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
</Window>
In button_click event in the line: Artikli mojID = (Artikli)grdArtikli.Items[grdArtikli.SelectedIndex]; I get the InvalidCastException:
Unable to cast object of type '<>f__AnonymousType09[System.Int32,System.String,System.String,System.Int32,System.Single,System.Single,System.Nullable1[System.Single],System.Nullable`1[System.Single],System.Byte[]]' to type 'Inventory.Artikli'
What is wrong?

This line :
select new { x.ID, x.Sifra, x.Naziv, x.Kolicina, x.Prodajna, x.Nabavna, x.UkupnoProdajna, x.UkupnoNabavna, x.Slika };
Is returning an anonymous object containing those fields, that is what is in the list. Change this to instantiate a class instead, or do not project the item to something else.
For example, try:
context.Artikli.ToList()
instead of the Linq.

I think your problem is
var query = from x in context.Artikli
select new { x.ID, x.Sifra, x.Naziv, x.Kolicina, x.Prodajna, x.Nabavna, x.UkupnoProdajna, x.UkupnoNabavna, x.Slika };
This is an anonymous type, which you are then try to cast back into type Artikli.
If you remove the New and the specific fields from the query, (you may have to tweak the bindings) this will allow you to cast it back again.

How to change color of DataGrid Cell when empty

I have a Datagrid, I want to change the color of the cells when they are empty.
This works, however I want to place the style outside the Datagrid.
However I don't know how to achieve this.
So far I have:
<Grid>
<Grid.Resources>
<Style x:Key="DataGridCellStyle" TargetType="DataGridCell">
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</Grid.Resources>
<DataGrid Name="Table1" ItemsSource="{Binding Items}" AutoGenerateColumns="False" >
<DataGrid.Columns>
<DataGridTextColumn Header="Name" Binding="{Binding Name}">
</DataGridTextColumn>
<DataGridTextColumn Header="Number" Binding="{Binding Number}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
But this doesn't work. What is the correct way to set this style?

WPF DataGridCell Margin

I have the following data grid:
<DataGrid Name="PropertiesDataGrid"
ItemsSource="{Binding PropertiesDataView, UpdateSourceTrigger=PropertyChanged}"
SelectedItem="{Binding SelectedProperty, Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged}"
AutoGenerateColumns="False"
CanUserAddRows="False"
MaxHeight="200">
<i:Interaction.Behaviors>
<helper:ScrollIntoViewBehavior/>
</i:Interaction.Behaviors>
<DataGrid.Columns>
<DataGridTemplateColumn Header="">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Command="Delete"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
<Image Source="../Resources/red_x.ico"
Height="15" />
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="ID"
Width="50"
Binding="{Binding ID}"
ElementStyle="{StaticResource CenterTextCellStyle}"
IsReadOnly="True" />
<DataGridTextColumn Header="PropertyName"
Width="*"
Binding="{Binding PropertyName}"
ElementStyle="{StaticResource LeftTextCellStyle}" />
<DataGridTextColumn Header="PropertyValue"
Width="300"
Binding="{Binding PropertyValue}"
ElementStyle="{StaticResource LeftTextCellStyle}" />
</DataGrid.Columns>
</DataGrid>
Applied to this data grid is the following style:
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Height" Value="22" />
<Setter Property="Margin" Value="5,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style adds 5 pixels of spacing to the left of the cell contents and centers the text vertically.
I would like to set the margin of just the first column's cells (<DataGridTemplateColumn Header="">) to 0. How can I set this in the DataTemplate. I know the Margin has to be set on DataGridCell (found by using Snoops) but do not know how to implement in the <DataGridTemplateColumn.CellTemplate>

Cascade the style:
<DataGridTemplateColumn Header="">
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource {x:Type DataGridCell}}">
<Setter Property="Margin" Value="0" />
</Style>
</DataGridTemplateColumn.CellStyle>

Categories