Databases
StackOverflow2013
Postsdbo
PORemove gradient style that lies behind the headers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemove gradient style that lies behind the headers
    primarykey
    data
    text
    <p>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.</p> <p><img src="https://i.stack.imgur.com/AulQW.jpg" alt="enter image description here"></p> <p>Under normal circumstances you would not see it, however because I have textboxes in column 5 stretching the column header it is appearing. </p> <p>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?</p> <p>The following web page has a brilliant diagram of the components <a href="http://blog.smoura.com/wpf-toolkit-datagrid-part-ii-custom-styling/" rel="nofollow noreferrer">http://blog.smoura.com/wpf-toolkit-datagrid-part-ii-custom-styling/</a> 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. <img src="https://i.stack.imgur.com/zIQ0v.png" alt="enter image description here"></p> <p>Here is my full XAML</p> <pre><code>&lt;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"&gt; &lt;UserControl.Resources&gt; &lt;CollectionViewSource x:Key="UserCollection" Source="{Binding Path=AllUsers}"&gt; &lt;CollectionViewSource.SortDescriptions&gt; &lt;scm:SortDescription PropertyName="Name" Direction="Ascending" /&gt; &lt;/CollectionViewSource.SortDescriptions&gt; &lt;/CollectionViewSource&gt; &lt;Style x:Key="UserItemStyle" TargetType="{x:Type DataGridRow}"&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" /&gt; &lt;Style.Triggers&gt; &lt;MultiTrigger&gt; &lt;MultiTrigger.Conditions&gt; &lt;Condition Property="ItemsControl.AlternationIndex" Value="1" /&gt; &lt;Condition Property="IsSelected" Value="False" /&gt; &lt;Condition Property="IsMouseOver" Value="False" /&gt; &lt;/MultiTrigger.Conditions&gt; &lt;Setter Property="Background" Value="#EEEEEEEE" /&gt; &lt;/MultiTrigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; &lt;DataTemplate x:Key="headerTemplate"&gt; &lt;TextBlock Padding="0,0,0,0" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding}"/&gt; &lt;/DataTemplate&gt; &lt;Style x:Key="RowHeaderStyle2" TargetType="DataGridRowsPresenter"&gt; &lt;Setter Property="Background" Value="{x:Null}"/&gt; &lt;/Style&gt; &lt;Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader"&gt; &lt;Setter Property="VerticalContentAlignment" Value="Bottom"/&gt; &lt;Setter Property="VerticalAlignment" Value="Bottom"/&gt; &lt;Setter Property="Height" Value="25"/&gt; &lt;/Style&gt; &lt;Style x:Key="ModuleColumnHeaderStyle" TargetType="GridViewColumnHeader"&gt; &lt;Setter Property="VerticalContentAlignment" Value="Bottom"/&gt; &lt;Setter Property="Width" Value="550"/&gt; &lt;/Style&gt; &lt;helpers:FirstItemConverter x:Key="firstItemConvertion"/&gt; &lt;Style x:Key="ListViewItemRotatedText" TargetType="TextBlock"&gt; &lt;Setter Property="LayoutTransform"&gt; &lt;Setter.Value&gt; &lt;RotateTransform Angle="-45" /&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="Width" Value="130"/&gt; &lt;Setter Property="Padding" Value="0,0,0,0"/&gt; &lt;Style.Triggers&gt; &lt;DataTrigger Binding="{Binding ModuleName, Converter={StaticResource firstItemConvertion}, ConverterParameter=0}" Value="true"&gt; &lt;Setter Property="Margin" Value="-60,0,0,0" /&gt; &lt;/DataTrigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; &lt;/UserControl.Resources&gt; &lt;DockPanel&gt; &lt;Grid DockPanel.Dock="Bottom" Margin="0,2,4,2"&gt; &lt;StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center"&gt; &lt;TextBlock Text="Selected Users: " /&gt; &lt;ContentPresenter Content="{Binding Path=TotalSelectedUsers}" ContentStringFormat="0" /&gt; &lt;TextBlock Text=" of " /&gt; &lt;ContentPresenter Content="{Binding Path=TotalUsers}" ContentStringFormat="0" /&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;DataGrid AutoGenerateColumns="False" ItemContainerStyle="{StaticResource UserItemStyle}" AlternatingRowBackground="{x:Null}" DataContext="{StaticResource UserCollection}" ItemsSource="{Binding}"&gt; &lt;DataGrid.Columns&gt; &lt;DataGridTextColumn Header="Name" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/&gt; &lt;DataGridTextColumn Header="Job Title" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Job_Title}"/&gt; &lt;DataGridTextColumn Header="Department" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Department}"/&gt; &lt;DataGridTextColumn Header="Company" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Company}"/&gt; &lt;DataGridTextColumn IsReadOnly="True" Binding="{Binding Path=Company}" CanUserResize="False" Width="580"&gt; &lt;DataGridTextColumn.Header&gt; &lt;StackPanel Orientation="Vertical" HorizontalAlignment="Center"&gt; &lt;TextBlock HorizontalAlignment="Center"&gt;Modules&lt;/TextBlock&gt; &lt;ListBox x:Name="lstModules" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Modules}"&gt; &lt;ListBox.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;StackPanel Orientation="Horizontal" CanVerticallyScroll="False" CanHorizontallyScroll="False"&gt;&lt;/StackPanel&gt; &lt;/ItemsPanelTemplate&gt; &lt;/ListBox.ItemsPanel&gt; &lt;ListBox.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText}" Text="{Binding ModuleName}"&gt;&lt;/TextBlock&gt; &lt;/DataTemplate&gt; &lt;/ListBox.ItemTemplate&gt; &lt;/ListBox&gt; &lt;/StackPanel&gt; &lt;/DataGridTextColumn.Header&gt; &lt;/DataGridTextColumn&gt; &lt;DataGridTextColumn Header="Contact Detail" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/&gt; &lt;/DataGrid.Columns&gt; &lt;/DataGrid&gt; &lt;/DockPanel&gt; &lt;/UserControl&gt; </code></pre> <p><strong>[EDIT]</strong> After placing background color on the DataGridColumnHeader's</p> <pre><code>&lt;Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader"&gt; &lt;Setter Property="VerticalContentAlignment" Value="Bottom"/&gt; &lt;Setter Property="VerticalAlignment" Value="Bottom"/&gt; &lt;Setter Property="Height" Value="25"/&gt; &lt;Setter Property="Background" Value="Tomato"/&gt; &lt;/Style&gt; &lt;Style x:Key="ModuleColumnHeaderStyle" TargetType="DataGridColumnHeader"&gt; &lt;Setter Property="Background" Value="Tomato"/&gt; &lt;/Style&gt; </code></pre> <p>This is what it looks like: as you can see the white/grey two-tone color is still there. <img src="https://i.stack.imgur.com/jg33d.jpg" alt="enter image description here"></p> <p><strong>[EDIT2]</strong> To get the same in the fifth column add in these styles</p> <pre><code>&lt;Style x:Key="ListViewItemRotatedText1" TargetType="TextBlock"&gt; &lt;Setter Property="LayoutTransform"&gt; &lt;Setter.Value&gt; &lt;RotateTransform Angle="-45" /&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="Width" Value="130"/&gt; &lt;Setter Property="Margin" Value="0,0,0,0" /&gt; &lt;/Style&gt; &lt;Style x:Key="ListViewItemRotatedText2" TargetType="TextBlock"&gt; &lt;Setter Property="LayoutTransform"&gt; &lt;Setter.Value&gt; &lt;RotateTransform Angle="-45" /&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="Width" Value="130"/&gt; &lt;Setter Property="Margin" Value="-60,0,0,0" /&gt; &lt;/Style&gt; </code></pre> <p>And replace ... with the following StackPanel</p> <pre><code>&lt;StackPanel Orientation="Horizontal"&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText1}" &gt;Customer Services&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Asset Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Works Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Project Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Rates Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Finance&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Human Resources&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Document Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;User Management&lt;/TextBlock&gt; &lt;TextBlock Style="{StaticResource ListViewItemRotatedText2}" &gt;Configuration&lt;/TextBlock&gt; &lt;/StackPanel&gt; </code></pre> <p><strong>[LAST EDIT]</strong> Result with Viv's help <img src="https://i.stack.imgur.com/efVma.jpg" alt="enter image description here"></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USHank
    1. USHank
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORemove gradient style that lies behind the headers
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload