wpf DataGrid change wrapping on cells - wpf

I have a WPF DataGrid with AutoGenerate Columns. I have been able to override the column headers using code and also force wrapping on the column headers when I shrink the columns. When I try to force text wrapping on the cells my binding breaks... it shows the same value in every column.
Here is the XAML I am using to format
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
Again, the ColumnHeaderStyle works fine, but the CellStyle is not working.
Suggestions?
Update:
Column headers are set as follows:
if (e.Column.Header.ToString() == "Product_Description")
e.Column.Header = "Product";
if (e.Column.Header.ToString() == "Original_Gross_Weight")
e.Column.Header = "Orig. Net Wt.";
The wrapping of the headers works well. Just the wrapping of the content does not work.

On the binding it seems that once one replaces the DataGridCell data style, the full object for for the row is placed into the content presenter instead of the current property of the column.
It appears you override AutoGeneratingColumn so why not simply turn of auto generate and define the columns by hand?
Here is a working version where the text is wrapped for the data:
<Window.Resources>
<model:People x:Key="People">
<model:Person First="Joe" Last="Smith" Phone="303-555 5555" />
<model:Person First="Mary" Last="Johnson" Phone="720-555 5555" />
<model:Person First="Frank" Last="Wright" Phone="202-555 5555" />
</model:People>
</Window.Resources>
<DataGrid AutoGenerateColumns="False"
ItemsSource="{StaticResource People}">
<DataGrid.Columns>
<DataGridTextColumn Header="First" Binding="{Binding First}" />
<DataGridTextColumn Header="The Name" Binding="{Binding Last}" />
<DataGridTextColumn Header="Phone Number" Binding="{Binding Phone}">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping"
Value="Wrap" />
</Style>
</DataGridTextColumn.ElementStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
Result

Related

Dynamically Show/Hide WPF DataGrid Header Column

I am using VS 2010. I want to display Datagrid header only on grid mouse over. I wrote following code, but it is not working.
<StackPanel>
<DataGrid ItemsSource="{Binding SelectedItemsCollectionView}"
AutoGenerateColumns="False" CellStyle="{StaticResource CellStyle}"
GridLinesVisibility="None" RowHeight="28" HeadersVisibility="None"
ClipToBounds="True" AllowDrop="True" >
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Path=DisplaySequence}"/>
</DataGrid.Columns>
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="HeadersVisibility" Value="None" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="HeadersVisibility" Value="Column" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
</DataGrid>
</StackPanel>
Any suggestions?
Thanks!
Just Remove HeadersVisibility="None" in DataGrid tag. Its working fine.
HeadersVisibility is a dependency property.They have Value resolution strategy.
Local value has more precedence compare to the trigger value.
Source. For detail see here

Create DataGrid column separator

Is there a way to create a visual separator between two particular columns in a DataGrid? It doesn't need to be fancy, maybe just a double line or a thicker border.
In case it's something like this
You can achieve using a custom style:
<Window.Resources>
<Style x:Key="DataGridColumnSeparatorStyle" TargetType="DataGridCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Rectangle VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="Gray"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="Start"/>
<DataGridTextColumn Header="End"/>
<!-- Separator column -->
<DataGridTemplateColumn MinWidth="0" Width="2" CellStyle="{StaticResource DataGridColumnSeparatorStyle}"/>
<DataGridTextColumn Header="Start"/>
<DataGridTextColumn Header="End"/>
</DataGrid.Columns>
</DataGrid>
If you generate the columns in code-behind, either by autogenerate columns or other, you can still create the separator column by getting the resource from the XAML:
DataGridTextColumn s1 = new DataGridTextColumn() { Header = "Start" };
DataGridTextColumn s2 = new DataGridTextColumn() { Header = "Start" };
DataGridTextColumn e1 = new DataGridTextColumn() { Header = "End" };
DataGridTextColumn e2 = new DataGridTextColumn() { Header = "End" };
DataGridTemplateColumn column = new DataGridTemplateColumn();
column.MinWidth = 0;
column.Width = 2;
var separatorStyle = (Style)FindResource("DataGridColumnSeparatorStyle");
column.CellStyle = separatorStyle;
dataGrid.Columns.Add(s1);
dataGrid.Columns.Add(e1);
dataGrid.Columns.Add(column);
dataGrid.Columns.Add(s2);
dataGrid.Columns.Add(e2);
I think you have two options. The simplest option will probably be to use a Style and set your DataGrid.CellStyle to the defined style.
<Style x:Key="DataGridBorder" TargetType="DataGridCell">
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1,1,1,1" />
</Style>
...
<DataGrid CellStyle="{StaticResource DataGridBorder}">
...
The other option is to use a CellTemplate in conjunction with the DataGridTemplateColumn.
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Border BorderBrush="LightGray" BorderThickness="1,1,1,1" Margin="-6,-6,-6,-6">
<Grid Margin="6,6,6,6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Whatever}" Grid.Column="0" TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />
</Grid>
</Border>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
I haven't tested either of these, and you may have to play with the margins a little bit.
Try this. When navigating through cells using keyboard Tab key, it won't focus the seperator column:
<DataGridTemplateColumn MinWidth="2" MaxWidth="2" IsReadOnly="True" CanUserResize="False">
<DataGridTemplateColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="2" />
</Style>
</DataGridTemplateColumn.HeaderStyle>
<DataGridTemplateColumn.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Focusable" Value="False" />
</Style>
</DataGridTemplateColumn.CellStyle>
</DataGridTemplateColumn>
Source

Show "No record found" message on a WPF DataGrid when it's empty

If there is no record available, I want to add a TextBlock on data grid, below the header, showing the message "No Record Found."
Consider the attached image for reference.
Its been a long time since the question has been posted. But I thought this might be useful to someone else.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<DataGrid Name="dgProjects" ItemsSource="{Binding Projects}" AutoGenerateColumns="True" />
<TextBlock Text="Employee has no projects" Visibility="{Binding Items.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=dgProjects}" />
For simplicity purpose I have set AutoGenerateColumns="True". Please define the columns. This way when a empty datasource is bound, the column names will be shown along with 'Empty row' message.
Finally I am able to findout the way.
When the grid in empty, add a default row on grid
Create a RowDetailTemplate which contain a text block with a message "No Record Found"
<DataGrid.RowDetailsTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="No Record Found" Width="400"></TextBlock>
</StackPanel>
</DataTemplate>
</DataGrid.RowDetailsTemplate>
Set the style on datagrid
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="RowDetailsVisibilityMode" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding DataContext.IsRecordExists,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type local:MainWindow}}}" Value="false">
<Setter Property="RowHeight" Value="0"></Setter>
<Setter Property="RowDetailsVisibilityMode" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
By default (record available on datagrid) row detail template will be collapsed.
DataTrigger that checks CLR poperty, if it is false then show the row detail template.
The reason for setting the rowheight as 0 to hide the default row which we haved added on 1st step.
Add the grid inside the stackpanel
Place below border code next to datagrid
<Border HorizontalAlignment="Stretch" VerticalAlignment="Center"
BorderThickness="1,0,1,1" BorderBrush="Black" Height="35">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding YourListName.Count}" Value="0">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="No record fount" HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
It will show/hide based on your collection/list count.
I find that it is easy to center a text block over the grid and set its visibility based on the number of rows. I am usually using MVVM and will bind the visibility to a View Model property:
<Grid>
<toolkit:DataGrid>
<toolkit:DataGrid.Columns>
.
.
.
</toolkit:DataGrid.Columns>
</toolkit:DataGrid>
<TextBlock Text="No Records Found" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding EmptyMessageVisibility, Mode=OneWay, FallbackValue=Visible}" />
</Grid>

How do I enable text wrapping on all column headers?

How does one enable text wrapping on all column headers of a DataGrid, without disabling the other default header functionality? Such as column resizing, sort direction indicator, etc which are needed.
Is there a way to do this?
Or don't bother with the primitives in the app.xaml file and do the following (my objects):
<DataGrid Name="WBdataGrid" AutoGenerateColumns="False" ColumnHeaderHeight="50" >
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns> ...
I would like to enable text wrapping
on all column headers of my DataGrid,
without disabling the other default
header functionality
You need to add the following namespace to your app.xaml file:
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit"
and then add this tag to app.xaml:
<Style TargetType="{x:Type primitives:DataGridColumnHeader}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
This will add text-wrapping to the headers of all of your DataGrids throughout your WPF application.
While we're on the subject, if you just wanted to center the text of each of your DataGrid headers, you could do this using the following style instead:
<Style TargetType="{x:Type primitives:DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
</Style>
Yet I've seen so many WPF articles suggesting that you can only do this by adding TextWrapping or HorizontalAlignment on each DataGrid column individually:
<toolkit:DataGridTextColumn Binding="{Binding Path=TaxAmount}">
<toolkit:DataGridTextColumn.HeaderTemplate >
<DataTemplate>
<TextBlock Text="Tax Amount" Width="90" TextWrapping="Wrap" HorizontalAlignment="Center"/>
</DataTemplate>
</toolkit:DataGridTextColumn.HeaderTemplate>
</toolkit:DataGridTextColumn>
I added
to the header text where I want the text to wrap. This is useful when you don't need to bind your header text to something
<DataGridTextColumn x:Name="cAccountNumber"
Header="Account
Number"
Width="80"
Binding="{Binding Path=AccountNumber}" />
Instead of assigning the column name directly to the DataGridColumn.Header property, I created a TextBlock containing the column name, set the TextWrapping property of the TextBlock to "Wrap" and assigned the TextBlock to the DataGridColumn.Header property. This preserves the default header functionality.
Example:
<toolkit:DataGridTextColumn Binding="{Binding Path=MyProperty}">
<toolkit:DataGridTextColumn.Header>
<TextBlock Text="Something Longer" TextWrapping="Wrap" />
</toolkit:DataGridTextColumn.Header>
</toolkit:DataGridTextColumn>
You could create a global Style for your column headers. Without any example mark-up I don't know the syntax, but it should look something like this:
<Style TargetType="{x:Type dg:ColumnHeader}">
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
Since the Style is key-less, it will automatically be applied to all of your column headers. And styles will not override any locally set properties, so it won't "disable" any existing header functionality.

How to specify a ToolTip for a control in a Style from XAML?

I'm using a the WPF datagrid from the Microsoft CodePlex project. I have a custom control that I want to databind to a field from the row of the datagrid. I can't for the life of me figure out how to specify a tooltip on a datagrid row.
The closest I've come is to use a RowStyle with a Setter to set the tooltip, but this only seems to work for text. When I try to put a ControlTempalte in as the Value for the ToolTip, it displays the result of calling ToString on the ControlTemplate type.
I think I need to set the "Template" property of the ToolTip, but I can't seem to figure out how to do that...
<dg:DataGrid Name="dgResults" AutoGenerateColumns="True">
<dg:DataGrid.RowStyle >
<Style TargetType="{x:Type dg:DataGridRow}">
<Setter Property="ToolTip" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<StackPanel>
<TextBlock>txt1</TextBlock><TextBlock>txt2</TextBlock>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</dg:DataGrid.RowStyle>
</dg:DataGrid>
Figured it out... took me about 6 hours...
For some reason, I can't set the value directly using Value.Setter. If I define the content for the tooltip as a static resource though, and then set it in the Style property of the DataGrid.RowStyle it works.
So, the datagrid row style looks like:
<Style TargetType="{x:Type dg:DataGridRow}">
<Setter Property="ToolTip" Value="{StaticResource resKWIC}">
</Setter>
</Style>
</dg:DataGrid.RowStyle>
And the resource is
<Window.Resources>
<StackPanel x:Key="resKWIC">
<TextBlock>f1</TextBlock>
<TextBlock>f2></TextBlock>
</StackPanel>
</Window.Resources>
Thanks!
The key is to use the Property ToolTipService.ToolTip, instead of ToolTip - like this:
<Setter Property="ToolTipService.ToolTip" Value="My Tooltip"/>
I also got this working with a couple of changes; included incase it helps someone.
My Datadrid is bound to a list of custom objects, I wanted to display the string "Name" as a column and the string "text" in the tooltip. The trick for me (newbe) was that I had to include the Text Column and hide it for it to show up in the tooltip, i.e.:
<DataGrid AutoGenerateColumns="False" CanUserAddRows="False" EnableRowVirtualization="False" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" IsReadOnly="True" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}" Name="dgrTextGroupText" VerticalContentAlignment="Stretch" Grid.Column="3" Grid.Row="1" Grid.RowSpan="6" CanUserReorderColumns="False" CanUserSortColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Name}" Width="*" />
<DataGridTextColumn Binding="{Binding Text}" Width="0" Visibility="Hidden" />
</DataGrid.Columns>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.text}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
</DataGrid>
Not sure you can do it through XAML.
A easier way might be to just handle the LoadingRow event. In xaml have something like:
<dg:DataGrid Name="dgResults" AutoGenerateColumns="True"
LoadingRow="dgResults_LoadingRow"
ItemsSource="{Binding ListOfStrings}" />
Then in code behind
void dgResults_LoadingRow(object sender, DataGridRowEventArgs e)
{
DataGridRow row = e.Row;
row.ToolTip = row.DataContext as string;
}
Obviously you will have to change the code depending on how you are populating the data in the datagrid. This is also untested =)
I needed to set the tooltip dynamically based on the cell content. I'm using the tooltip to display text overflow text from the cell. The binding below is from a c# class property named CellText. Thanks to the posts above for allowing me to avoid figuring out the entire thing myself.
<DataGridTextColumn Header="HeaderText" Binding="{Binding DisplayText, Mode=OneWay}" Width="33*">
<DataGridTextColumn.CellStyle>
<Style>
<Setter Property="ToolTipService.ToolTip" Value="{Binding DisplayText, Mode=OneWay}"/>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
There's no need for the ControlTemplate. If you want the StackPanel in the ToolTip, just set it as:
<Setter Property="ToolTip">
<Setter.Value>
<StackPanel>
<TextBlock>txt1</TextBlock><TextBlock>txt2</TextBlock>
</StackPanel>
</Setter.Value>
</Setter>

Resources