I have the following screen at the moment, I would like to remove the two-tone background that lies behind the headers, the red arrow points to where it is and the green highlights the area that it covers.
Under normal circumstances you would not see it, however because I have textboxes in column 5 stretching the column header it is appearing.
I would like to remove this, making it transparent, but I do not know the component on the DataGrid or how to access it. Can someone help me?
The following web page has a brilliant diagram of the components http://blog.smoura.com/wpf-toolkit-datagrid-part-ii-custom-styling/ It shows the same sort of area defined as a DataGridColumnHeadersPresenter, I am not sure if this is the one I should be aiming at or not. I have given it a shot without much luck.
Here is my full XAML
<UserControl x:Class="Users.View.AllUsersView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:helpers="clr-namespace:Users.ViewModel.Helpers"
d:DesignHeight="160" d:DesignWidth="1100">
<UserControl.Resources>
<CollectionViewSource x:Key="UserCollection" Source="{Binding Path=AllUsers}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Name" Direction="Ascending" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="UserItemStyle" TargetType="{x:Type DataGridRow}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="1" />
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#EEEEEEEE" />
</MultiTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="headerTemplate">
<TextBlock Padding="0,0,0,0" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding}"/>
</DataTemplate>
<Style x:Key="RowHeaderStyle2" TargetType="DataGridRowsPresenter">
<Setter Property="Background" Value="{x:Null}"/>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Height" Value="25"/>
</Style>
<Style x:Key="ModuleColumnHeaderStyle" TargetType="GridViewColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="Width" Value="550"/>
</Style>
<helpers:FirstItemConverter x:Key="firstItemConvertion"/>
<Style x:Key="ListViewItemRotatedText" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ModuleName, Converter={StaticResource firstItemConvertion}, ConverterParameter=0}" Value="true">
<Setter Property="Margin" Value="-60,0,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<DockPanel>
<Grid DockPanel.Dock="Bottom" Margin="0,2,4,2">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="Selected Users: " />
<ContentPresenter Content="{Binding Path=TotalSelectedUsers}" ContentStringFormat="0" />
<TextBlock Text=" of " />
<ContentPresenter Content="{Binding Path=TotalUsers}" ContentStringFormat="0" />
</StackPanel>
</Grid>
<DataGrid AutoGenerateColumns="False" ItemContainerStyle="{StaticResource UserItemStyle}" AlternatingRowBackground="{x:Null}" DataContext="{StaticResource UserCollection}" ItemsSource="{Binding}">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
<DataGridTextColumn Header="Job Title" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Job_Title}"/>
<DataGridTextColumn Header="Department" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Department}"/>
<DataGridTextColumn Header="Company" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Company}"/>
<DataGridTextColumn IsReadOnly="True" Binding="{Binding Path=Company}" CanUserResize="False" Width="580">
<DataGridTextColumn.Header>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center">Modules</TextBlock>
<ListBox x:Name="lstModules" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Modules}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" CanVerticallyScroll="False" CanHorizontallyScroll="False"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Style="{StaticResource ListViewItemRotatedText}" Text="{Binding ModuleName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Header="Contact Detail" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
</DataGrid.Columns>
</DataGrid>
</DockPanel>
</UserControl>
[EDIT]
After placing background color on the DataGridColumnHeader's
<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Background" Value="Tomato"/>
</Style>
<Style x:Key="ModuleColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Tomato"/>
</Style>
This is what it looks like: as you can see the white/grey two-tone color is still there.
[EDIT2] To get the same in the fifth column add in these styles
<Style x:Key="ListViewItemRotatedText1" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="ListViewItemRotatedText2" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Margin" Value="-60,0,0,0" />
</Style>
And replace ... with the following StackPanel
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource ListViewItemRotatedText1}" >Customer Services</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Asset Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Works Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Project Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Rates Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Finance</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Human Resources</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Document Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >User Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Configuration</TextBlock>
</StackPanel>
[LAST EDIT] Result with Viv's help
Update:
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background"
Value="Tomato" />
</Style>
^^ don't specify a x:Key we are trying to let this reach the dummy Header(PART_FillerColumnHeader) which supposedly spans all Columns and gives a Background.
We'd also need to get ColumnHeaderStyle to inherit this so we'll end up having,
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background"
Value="Tomato" />
</Style>
<Style x:Key="ColumnHeaderStyle"
BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment"
Value="Bottom" />
<Setter Property="VerticalAlignment"
Value="Bottom" />
<Setter Property="Height"
Value="25" />
</Style>
Related
I have a wpf datagrid where in some of the cells there is a description with multible lines don´t get centered, cells with only one line is centered fine.
https://i.stack.imgur.com/5vhtL.png
Edit...
Just thought it was a standard problem that didn´t need so much information.
Here is the XAML for the datagrid.
<DataGrid AutoGenerateColumns="False" Style="{StaticResource DataGridMainStyle}"
Name="dataGrid_clients" CanUserReorderColumns="False" CanUserSortColumns="False" IsReadOnly="True"
Grid.Row="3" Grid.Column="1"
Margin="0,0,0,0" SelectionChanged="dataGrid_clients_SelectionChanged"
MaxHeight="300"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<DataGrid.Columns>
<DataGridTextColumn Header="{Binding Path=Events_EventsMain_ClientsGrid_EntranceHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=Name}" />
<DataGridTemplateColumn Header="">
<DataGridTemplateColumn.CellTemplate >
<DataTemplate>
<TextBlock Text="{Binding IsOpen}" HorizontalAlignment="Center" Padding="0" TextAlignment="Center" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="{Binding Path=Events_EventsMain_ClientsGrid_LastHeardFromHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=LastHeardFrom}" />
<DataGridTemplateColumn CanUserSort="False" MinWidth="18" CanUserResize="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Rectangle Stroke="Black" Fill="White" Width="17" Height="17"
HorizontalAlignment="Right">
</Rectangle>
<Rectangle Name="colorRect" Stroke="Black" Fill="{Binding StatusBrush}"
Width="13"
Height="13"
HorizontalAlignment="Right"
Margin="0,0,2,0"
></Rectangle>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="{Binding Path=Events_EventsMain_ClientsGrid_StatusHeader, Source={StaticResource Resources}}" Binding="{Binding StatusText}" />
<DataGridTemplateColumn Width="200*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<!--<StackPanel Orientation="Horizontal">-->
<!--<Button Template="{StaticResource ButtonTextTemplate}" HorizontalAlignment="Right" Style="{StaticResource ButtonText}">Hard restart</Button>-->
<Button Template="{StaticResource ButtonTextTemplate}" Content="{Binding Path=Events_EntranceControl_Reboot, Source={StaticResource Resources}}" Visibility="{Binding Path=UserCanRestart , Converter={StaticResource CanRestartVisibilityConverter}}" Click="button_restart_Click" CommandParameter="{Binding Path=HardwareID}" HorizontalAlignment="Right" Style="{StaticResource ButtonText}">
</Button>
<!--</StackPanel>-->
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="Auto" x:Name="HardRestartColumn" Visibility="Collapsed">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Template="{StaticResource ButtonTextTemplate}" HorizontalAlignment="Right" CommandParameter="{Binding Path=HardwareID}" Name="HardRestartButton" Click="HardRestartButton_Click" Style="{StaticResource ButtonText}">Hard restart</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<StackPanel Orientation="Horizontal" Grid.Row="4" Grid.Column="1" VerticalAlignment="Bottom">
<Label Content="{Binding Path=Events_EventsMain_LogGrid_Header, Source={StaticResource Resources}}" HorizontalContentAlignment="Left"
Style="{StaticResource LabelMediumSize}"></Label>
<Button Name="buttonLogFilter"
Height="20" Width="100" Grid.Column="1" Margin="35,2,2,2" HorizontalAlignment="Left"
BorderThickness="0.5"
Content="{Binding Path=LogGrid_ButtonFilter, Source={StaticResource Resources}}"></Button>
<CheckBox Name="checkBoxShowPatronNo"
Margin="5,2,2,2"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Content="{Binding Path=LogGrid_CheckboxShowPatronNo, Source={StaticResource Resources}}" Visibility="Visible" Checked="CheckBoxShowPatronNo_OnChecked" Unchecked="CheckBoxShowPatronNo_OnChecked"></CheckBox>
</StackPanel>
<Line Grid.Row="4" Grid.Column="1" Stroke="#4037495D"
X2="1" StrokeThickness="1"
Stretch="Fill" VerticalAlignment="Bottom"
Margin="0,0,0,2" Height="1">
</Line>
<!--Style="{StaticResource DataGridMainStyle2}"-->
<DataGrid AutoGenerateColumns="False" Style="{StaticResource DataGridMainStyle}"
Name="dataGrid_events"
Grid.Row="6" Grid.Column="1"
Margin="0,0,0,0"
RowHeight="25">
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}" BasedOn="{StaticResource MTT_RowStyle}">
<!--<EventSetter Event="PreviewMouseDoubleClick" Handler="Row_PreviewMouseDoubleClick" />-->
<Setter Property="Margin" Value="0,0,0,0"/>
</Style>
</DataGrid.RowStyle>
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource MTT_CellStyle}">
<!--<Setter Property="Margin" Value="0,6,0,0"/>-->
<!--<Setter Property="VerticalAlignment" Value="Bottom"></Setter>-->
<!--<Setter Property="VerticalContentAlignment" Value="Bottom"></Setter>-->
</Style>
</DataGrid.CellStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="{Binding Path=LogGrid_TimeHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=ServerTime}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_ClientTimeHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=ClientTime}" x:Name="ClientTime" />
<DataGridTextColumn Header="{Binding Path=LogGrid_EntranceHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=ClientName}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_CategoryHeader, Source={StaticResource Resources}}"
Binding="{Binding Path=Category, Converter={StaticResource FunctionalEventCategoryConverter}}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_NoteHeader, Source={StaticResource Resources}}" x:Name="NoteColume"
Binding="{Binding Path=Note}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_GateHeader, Source={StaticResource Resources}}" x:Name="GateColume"
Binding="{Binding Path=Gate}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_InfoHeader, Source={StaticResource Resources}}" x:Name="UserInfoColumn"
Binding="{Binding Path=UserInfo}" />
<DataGridTemplateColumn Header="Description"
x:Name="dataColumn">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Description}" TextWrapping="NoWrap" MaxWidth="500"
ToolTip="{Binding Path=Description}">
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="{Binding Path=LogGrid_DoorHeader, Source={StaticResource Resources}}"
x:Name="doorCountColumn"
Binding="{Binding Path=DoorName}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_PatronNoHeader, Source={StaticResource Resources}}"
x:Name="patronColumn"
Binding="{Binding Path=PatronNo, Converter={StaticResource PatronNoConverter}}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_PatronNameHeader, Source={StaticResource Resources}}"
x:Name="patronName"
Binding="{Binding Path=PatronName}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_PatronAddressHeader, Source={StaticResource Resources}}"
x:Name="patronAddress"
Binding="{Binding Path=PatronAddress}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_PatronPhoneHeader, Source={StaticResource Resources}}"
x:Name="patronPhone"
Binding="{Binding Path=PatronPhone}" />
<DataGridTextColumn Header="{Binding Path=LogGrid_PatronEmailHeader, Source={StaticResource Resources}}"
x:Name="patronEmail"
Binding="{Binding Path=PatronEmail}" />
</DataGrid.Columns>
</DataGrid>
Here is the styles i am using
<Color x:Key="BibliothecaRedColor">#ED2225</Color>
<Color x:Key="BibliothecaRedOriginalColor">#FF0000</Color>
<Color x:Key="BibliothecaDarkGrayColor">#343434</Color>
<Color x:Key="BibliothecaLightGrayColor">#E6E7E8</Color>
<Color x:Key="BibliothecaMediumGrayColor">#B3B3B3</Color>
<SolidColorBrush x:Key="BibliothecaRed" Color="{StaticResource ResourceKey=BibliothecaRedColor}"></SolidColorBrush>
<SolidColorBrush x:Key="BibliothecaRedOriginal" Color="{StaticResource ResourceKey=BibliothecaRedOriginalColor}"></SolidColorBrush>
<SolidColorBrush x:Key="BibliothecaDarkGrey" Color="{StaticResource ResourceKey=BibliothecaDarkGrayColor}"></SolidColorBrush>
<SolidColorBrush x:Key="BibliothecaLightGrey" Color="{StaticResource ResourceKey=BibliothecaLightGrayColor}"></SolidColorBrush>
<SolidColorBrush x:Key="BibliothecaMediumGray" Color="{StaticResource ResourceKey=BibliothecaMediumGrayColor}"></SolidColorBrush>
<Style x:Key="MTT_RowStyle" TargetType="{x:Type DataGridRow}">
<Setter Property="Height" Value="25"/>
<!--<Setter Property="Background" Value="Transparent" />-->
<Setter Property="BorderBrush" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource BibliothecaMediumGray}" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="MTT_CellStyle" TargetType="{x:Type DataGridCell}">
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="5" />
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type DataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green" />
</Trigger>
<Trigger Property="IsRowSelected" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Old datagrid header column color #FF8496AD-->
<Style
TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="28" />
<Setter Property="Foreground" Value="{StaticResource BibliothecaLightGrey}" />
<Setter Property="FontWeight" Value="SemiBold"></Setter>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundBorder" BorderThickness="0,1,0,1"
Background="{StaticResource BibliothecaDarkGrey}"
BorderBrush="{StaticResource BibliothecaDarkGrey}"
Grid.ColumnSpan="2" />
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="White" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="{x:Null}">
<Setter TargetName="BackgroundBorder" Property="Background"
Value="#343434" />
<Setter TargetName="BackgroundBorder" Property="BorderBrush"
Value="Transparent" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="SortDirection" Value="{x:Null}" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="BackgroundBorder"
Value="#505050" />
<Setter Property="BorderBrush" TargetName="BackgroundBorder"
Value="Transparent" />
</MultiTrigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridMainStyle" TargetType="{x:Type DataGrid}">
<Setter Property="AlternatingRowBackground" Value="{StaticResource BibliothecaLightGrey}" />
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="HeadersVisibility" Value="All" />
<Setter Property="AlternationCount" Value="2" />
<Setter Property="RowStyle" Value="{StaticResource MTT_RowStyle}" />
<Setter Property="HorizontalGridLinesBrush" Value="Transparent" />
<Setter Property="CellStyle" Value="{StaticResource MTT_CellStyle}" />
<Setter Property="VerticalGridLinesBrush" Value="Transparent" />
<Setter Property="IsReadOnly" Value="True"></Setter>
<Setter Property="CanUserAddRows" Value="False"></Setter>
</Style>
Thanks
Anders
I believe, it is because data context of those cells is formatted itself. Since it's string, try do some trimming in code behind (and, maybe, removing new lines), before delivering data to your DataGrid.
Also, you have:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=Description}" TextWrapping="NoWrap" MaxWidth="500"
ToolTip="{Binding Path=Description}">
</TextBlock>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
Did you try to set TextWrapping="Wrap"? And finally, to clarify, you could add some information if you want to do horizontal or vertical centering.
My WPF 4.5 application has a small (but annoying) visual bug where a DataGrid's cells are cut off upon loading:
Dropbox link to the screenshot
But once you resize the window (click the square button in the upper right corner) and re-maximize it, the DataGrid's cells appear as they should:
Dropbox link to the screenshot
In the XAML, every column's width is set to Auto, except for the "Name" column, which is *. Is there anything I can do to prevent this visual bug from happening/is there anything I'm doing that's causing this bug?
Here's my XAML:
<DataGrid ItemsSource="{Binding Datasets, NotifyOnTargetUpdated=True}" Name="dsDatagrid" SelectionMode="Extended" MouseDoubleClick="ViewDataset">
<DataGrid.Style>
<Style BasedOn="{StaticResource {x:Type DataGrid}}" TargetType="DataGrid">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsWorking}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
<i:Interaction.Triggers>
<i:EventTrigger EventName="TargetUpdated">
<cmd:EventToCommand Command="{Binding CollectionChangedCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="SelectionChanged">
<cmd:EventToCommand Command="{Binding SelectionChangedCommand}" CommandParameter="{Binding ElementName=dsDatagrid, Path=SelectedItems}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<DataGrid.Columns>
<DataGridTemplateColumn Header="" Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Name="NameCell" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center">
<Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.BackupSingleCommand}" CommandParameter="{Binding}" Style="{StaticResource BackupSingleButtonStyle}" Margin="5 10"/>
<Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DeleteSingleCommand}" CommandParameter="{Binding}" Style="{StaticResource DeleteSingleButtonStyle}" Margin="5 10"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="ID" Width="Auto" Binding="{Binding Id}"/>
<DataGridTemplateColumn Header="Name" Width="*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Header="Source Images" Width="Auto" Binding="{Binding SourceImages.Count, StringFormat={}{0:N0}, TargetNullValue=NONE}"/>
<DataGridTextColumn Header="Start Time" Width="Auto" Binding="{Binding StartTime, StringFormat={}{0:MM}/{0:dd}/{0:yy} {0:HH}\:{0:mm}\:{0:ss}}"/>
<DataGridTextColumn Header="End Time" Width="Auto" Binding="{Binding EndTime, StringFormat={}{0:MM}/{0:dd}/{0:yy} {0:HH}\:{0:mm}\:{0:ss}, TargetNullValue=In Progress}"/>
<DataGridTemplateColumn Header="Status" Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Status}" TextWrapping="WrapWithOverflow"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
If it's relevant, here's my DataGrid style:
<Style TargetType="DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="{StaticResource BannerNormalBrush}"/>
<Setter Property="Padding" Value="24 10"/>
</Style>
<Style TargetType="DataGridRow">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FontSize" Value="16"/>
</Style>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="24 0"/>
<Setter Property="Foreground" Value="{StaticResource TextBlockDisabledForegroundBrushDark}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Name="Border" Padding="{TemplateBinding Padding}" Background="Transparent">
<ContentPresenter VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DataGridRowSelectedBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DataGrid">
<Setter Property="GridLinesVisibility" Value="None"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="RowBackground" Value="{StaticResource DataGridOddRowBackgroundBrush}"/>
<Setter Property="AlternatingRowBackground" Value="{StaticResource DataGridEvenRowBackgroundBrush}"/>
<Setter Property="CanUserResizeRows" Value="False"/>
<Setter Property="CanUserResizeColumns" Value="False"/>
<Setter Property="IsReadOnly" Value="True"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="SelectionMode" Value="Single"/>
<Setter Property="RowHeaderWidth" Value="0"/>
<Setter Property="CanUserReorderColumns" Value="False"/>
<Setter Property="CanUserSortColumns" Value="False"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="EnableRowVirtualization" Value="True"/>
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"/>
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling"/>
<Setter Property="Background" Value="Transparent"/>
</Style>
Haven't really tried your code, but just by looking at it, I have a hunch...
StackPanels tend to have problems calculating their available space, so your problem may be caused by the StackPanel inside your column's DataTemplate, that is unable to communicate its size correctly to the column on load.
My suggestion is to change the StackPanel for another Panel. In this case, a good old Grid would work just fine, and I bet you won't see any glitch this time.
<DataGridTemplateColumn Header="" Width="Auto">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Name="NameCell" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.BackupSingleCommand}" CommandParameter="{Binding}" Style="{StaticResource BackupSingleButtonStyle}" Margin="5 10"/>
<Button Grid.Column="1" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.DeleteSingleCommand}" CommandParameter="{Binding}" Style="{StaticResource DeleteSingleButtonStyle}" Margin="5 10"/>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
I am trying to add a checkbox column to my datagrid so that users can easily see what is selected and easily select multiple columns without needing to know how to with the CTRL button. Would someone mind assisting?
The check box will un-check if already selected but I can not get it to become checked when I click it.
<Window.Resources>
<DataTemplate x:Key="isSelectedCheckBoxColumn">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}}">
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" />
</CheckBox.LayoutTransform>
</CheckBox>
</DataTemplate>
<Style x:Key="RowStyleWithAlternation" TargetType="DataGridRow">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" Value="GhostWhite"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="ContextMenu" Value="{x:Null}"/>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="#C1FFC1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F9F99F"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True" >
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Red" ShadowDepth="0" BlurRadius="20" />
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="FontSize" Value="12" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="CenterCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RightCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DataGrid Grid.Row="1" AutoGenerateColumns="False" Name="grid_achCredit" RowStyle="{StaticResource RowStyleWithAlternation}" AlternationCount="2" FontSize="15" CanUserAddRows="False" CanUserDeleteRows="False" IsReadOnly="False" SelectionMode="Extended">
<DataGrid.Columns>
<DataGridTemplateColumn Header="" CellTemplate="{StaticResource isSelectedCheckBoxColumn}" IsReadOnly="False"/>
<DataGridTextColumn Header="ID" Width="Auto" IsReadOnly="False" Binding="{Binding ID}" />
<DataGridTextColumn Header="TransDate" Width="Auto" IsReadOnly="False" Binding="{Binding transactionDate, StringFormat=\{0:MM-dd-yyyy\}}" />
<DataGridTextColumn Header="Payor" Width="Auto" IsReadOnly="False" Binding="{Binding payer}" />
<DataGridTextColumn Header="Description" Width="*" IsReadOnly="False" Binding="{Binding description}" />
<DataGridTextColumn Header="Amount" Width="Auto" IsReadOnly="False" Binding="{Binding amount, StringFormat=C}" />
<DataGridTextColumn Header="Balance" Width="Auto" IsReadOnly="False" Binding="{Binding amount, StringFormat=C}" />
<DataGridTextColumn Header="Selected By" Width="*" IsReadOnly="False" Binding="{Binding lockedUser}"/>
</DataGrid.Columns>
</DataGrid>
The problem is when you click the CheckBox it's IsChecked property and IsSelected property of current DataGridRow set to true at the same time. Therefore IsChecked binding doesn't work the way expected.
One way around this (probably not the best) is to prevent the CheckBox to be checked by clicking (only uncheck is allowed). This can be achieved by making the CheckBox enabled only when it's checked:
<CheckBox IsEnabled="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}"
IsChecked="{Binding Path=IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}}">
So this means your CheckBox gets checked only when corresponding row gets selected, but can get unchecked manually.
I ended up deciding to use the rowheaders to have a checkbox. Here is teh code I added to my datagrid
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<Grid>
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type DataGridRow}}}" Margin="0,-3,0,0">
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</CheckBox.LayoutTransform>
</CheckBox>
</Grid>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
I have been looking for days for a solution and I can't believe how difficult it is proving to be. I have a datagrid in a window. I want to add a button that will expand/collapse all. I am using VB in my code behind and I have not found anything that works.
Here is my DG code...not sure if you need to see this or not. When the window opens everything is collapsed. I want the user to have the option to expand a single row, or click a button and expand everything.
<DataGrid x:Name="dataGrid" FontSize="15" CanUserAddRows="false" Margin="10,106,10,10" ColumnWidth="*" RowHeight="45" ItemsSource="{Binding Items, Mode=OneWay}" AutoGenerateColumns="False" IsReadOnly="True" AlternatingRowBackground="#FF6E6E6E" Foreground="Black" BorderBrush="#FF595A5B" Background="Transparent" HorizontalGridLinesBrush="Black" VerticalGridLinesBrush="Black" CanUserReorderColumns="False" RowHeaderWidth="0" >
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="#FF575757" />
<Setter Property="Foreground" Value="White" />
<Style.Triggers>
<!--<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>-->
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FF616161" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="14"/>
</Style>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="DodgerBlue"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="White"/>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTextColumn Header="Press" Binding="{Binding press}"></DataGridTextColumn>
<DataGridTextColumn Header="Order Number" Binding="{Binding orderNumber}"></DataGridTextColumn>
<DataGridTextColumn Header="Order Type" Binding="{Binding orderType}"></DataGridTextColumn>
<DataGridTextColumn Header="Start Date" Binding="{Binding tstart, StringFormat=\{0:yyyy-MM-dd \}}" Visibility="Hidden" ></DataGridTextColumn>
<DataGridTextColumn x:Name="dataGridTextColumn" Header="Tool" Binding="{Binding tool}"></DataGridTextColumn>
<DataGridTextColumn Header="Order Time" Binding="{Binding ts}"></DataGridTextColumn>
<DataGridTextColumn Header="Color No." Binding="{Binding colorno}"></DataGridTextColumn>
<DataGridTextColumn Header="Material No." Binding="{Binding matno}"></DataGridTextColumn>
<DataGridTextColumn Header="Quantity" Binding="{Binding qty}"></DataGridTextColumn>
<DataGridTextColumn Header="Sequence" Visibility="Hidden" Binding="{Binding seq}"></DataGridTextColumn>
<DataGridTextColumn Header="Employee" Binding="{Binding emp}"></DataGridTextColumn>
<DataGridTextColumn Header="Remaining Weight" Binding="{Binding tw}"></DataGridTextColumn>
<DataGridTextColumn Header="Total Weight" Binding="{Binding tw, StringFormat={}{0:n2}}"></DataGridTextColumn>
<DataGridTemplateColumn Header="Click To Select" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button x:Name="myButton4">Select Order</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="Padding" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.CellStyle>
<DataGrid.GroupStyle>
<GroupStyle x:Name="groupstyle1">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Path=Name}" Background="Orange"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander x:Name="myexpander1" >
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="22" Foreground="White" Text="{Binding Path=Name}" />
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
</DataGrid>
Thanks for any help on this. I truly appreciate it.
I have populated a datagrid in WPF but i dont know its generating buttons type thing on left hand side of grid, i want to remove it, how i can remove it, any idea?
Here is screen shot :
Here is my xaml code:
<DataGrid Name="Patients" SelectedValuePath="patientid" CanUserResizeRows="False" Background="#942E2A" GridLinesVisibility="None" HorizontalGridLinesBrush="#73261E" BorderBrush="#73261E" BorderThickness="5" SelectionChanged="Patients_SelectionChanged" ItemsSource="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" AutoGenerateColumns="False" Height="400" Width="340">
<DataGrid.Resources>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#942E2A" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Width" Value="150" />
<Setter Property="FontFamily" Value="Georgia" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="#942E2A" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontFamily" Value="Georgia" />
<Setter Property="Foreground" Value="White" />
<Style.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="BorderBrush"
Value="White" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground" Value="Black"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Resources>
<DataGrid.Columns>
<DataGridTemplateColumn Header="Patient ID" SortMemberPath="patientid" Width="Auto" MinWidth="100" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.Style>
<Style>
</Style>
</Grid.Style>
<TextBlock Text="{Binding Path=patientid}">
</TextBlock>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Header="Last, First" SortMemberPath="name" Width="Auto" MinWidth="100" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.Style>
<Style>
</Style>
</Grid.Style>
<TextBlock Text="{Binding Path=name}"></TextBlock>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
A bit strange but rows have a Header. That's what you see. Setting the visibility of the column header only will solve your Problem:
HeadersVisibility="Column"