Hello,
I would like to change the background color of column header and columLayout header also (in Xamgrid).
I have multiple problems :
How can i do what i want on the background ?
My code is the following :
<Grid.Resources> <Style x:Key="GrayRow" TargetType="ig:CellControl"> <Setter Property="Background" Value="{StaticResource GridGrisClairColorBrush}"/> <Setter Property="BorderThickness" Value="0"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{StaticResource GridBleuClairColorBrush}"/> </Trigger> </Style.Triggers> </Style> <Style x:Key="BlueRow" TargetType="ig:CellControl"> <Setter Property="Background" Value="{StaticResource GridBleuTresClairColorBrush}"/> <Setter Property="BorderThickness" Value="0"/> </Style> <Style x:Key="ColumnLayoutHeaderStyle" TargetType="igPrim:HeaderCellControl"> <Setter Property="Background" Value="{StaticResource GridBleuClairColorBrush}" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="Cursor" Value="Hand" /> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{StaticResource GridBleuClairColorBrush}"/> </Trigger> </Style.Triggers> </Style> </Grid.Resources> <ig:XamGrid Width="auto" ItemsSource="{Binding Commandes}" AutoGenerateColumns="False" IsAlternateRowsEnabled="False" CellStyle="{StaticResource GrayRow}"> <ig:XamGrid.GroupBySettings> <ig:GroupBySettings AllowGroupByArea="Top"/> </ig:XamGrid.GroupBySettings> <ig:XamGrid.FilteringSettings> <ig:FilteringSettings AllowFiltering="FilterMenu"> </ig:FilteringSettings> </ig:XamGrid.FilteringSettings> <ig:XamGrid.EditingSettings> <ig:EditingSettings AllowEditing="Cell" IsF2EditingEnabled="True" IsMouseActionEditingEnabled="SingleClick"></ig:EditingSettings> </ig:XamGrid.EditingSettings> <ig:XamGrid.Columns> <ig:TextColumn Key="NumeroCommande"></ig:TextColumn> <ig:TextColumn Key="DateCommande" ></ig:TextColumn> <ig:TextColumn Key="FrsName" IsFilterable="True"></ig:TextColumn> <ig:TextColumn Key="Montant_HT" IsFilterable="False"></ig:TextColumn> <ig:TextColumn Key="Devise.Symbole" ></ig:TextColumn> <ig:TextColumn Key="BonLivraisonRecu" IsFilterable="False"></ig:TextColumn> <ig:TextColumn Key="FactureRecu" IsFilterable="False"></ig:TextColumn> <ig:ColumnLayout Key="CommandeFournisseurLignes" CellStyle="{StaticResource BlueRow}" HeaderStyle="{StaticResource ColumnLayoutHeaderStyle}"> <ig:ColumnLayout.Columns> <ig:TextColumn Key="Affaire.Numero" /> <ig:TextColumn Key="Description" ></ig:TextColumn> <ig:TextColumn Key="PrixUnitaire"></ig:TextColumn> <ig:TextColumn Key="Quantite" ></ig:TextColumn> <ig:TextColumn Key="Total_HT"></ig:TextColumn> </ig:ColumnLayout.Columns> </ig:ColumnLayout> </ig:XamGrid.Columns> </ig:XamGrid>
You can retemplate the VisualStateGroups for the HeaderCellControl to remove the OnMouseOver effects. As for the last column, it appears that since it's not used synchronized with any data it appears to be ignored. You can remove this extra "column" by resizing the rest of them by setting the grid's ColumnWidth property to "2*".
<Style x:Key="BlueHeaderStyle" TargetType="igPrim:HeaderCellControl"> <Setter Property="Background" Value="SaddleBrown" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="Cursor" Value="Hand" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igPrim:HeaderCellControl"> <igPrim:SimpleClickableContainer x:Name="NormalFill" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Moving"/> </VisualStateGroup> <VisualStateGroup x:Name="FixedStates"> <VisualState x:Name="Unfixed"/> <VisualState x:Name="Fixed"/> </VisualStateGroup> <VisualStateGroup x:Name="FixedIndicatorStates"> <VisualState x:Name="NotFixable"/> <VisualState x:Name="Pinned"/> <VisualState x:Name="Unpinned"/> </VisualStateGroup> <VisualStateGroup x:Name="SortedStates"> <VisualState x:Name="NotSorted"/> <VisualState x:Name="Ascending"/> <VisualState x:Name="Descending"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectedStates"> <VisualState x:Name="NotSelected" /> <VisualState x:Name="Selected"> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ActiveStates"> <VisualState x:Name="InActive" /> <VisualState x:Name="Active"> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--<Border Margin="0,1,1,0" Background="#0099cc" CornerRadius="5,5,0,0"> <Border Margin="1,1,1,0" CornerRadius="5,5,0,0"> </Border> </Border>--> <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </igPrim:SimpleClickableContainer> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <ig:XamGrid Name="xamGrid" ColumnWidth="2*" ItemsSource="{Binding}" CellStyle="{StaticResource GrayRow}" HeaderStyle="{StaticResource BlueHeaderStyle}"> </ig:XamGrid>
<Style x:Key="BlueHeaderStyle" TargetType="igPrim:HeaderCellControl"> <Setter Property="Background" Value="SaddleBrown" /> <Setter Property="Foreground" Value="White" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="Cursor" Value="Hand" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igPrim:HeaderCellControl">
<igPrim:SimpleClickableContainer x:Name="NormalFill" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"/> <VisualState x:Name="Moving"/> </VisualStateGroup> <VisualStateGroup x:Name="FixedStates"> <VisualState x:Name="Unfixed"/> <VisualState x:Name="Fixed"/> </VisualStateGroup> <VisualStateGroup x:Name="FixedIndicatorStates"> <VisualState x:Name="NotFixable"/> <VisualState x:Name="Pinned"/> <VisualState x:Name="Unpinned"/> </VisualStateGroup> <VisualStateGroup x:Name="SortedStates"> <VisualState x:Name="NotSorted"/> <VisualState x:Name="Ascending"/> <VisualState x:Name="Descending"/> </VisualStateGroup> <VisualStateGroup x:Name="SelectedStates"> <VisualState x:Name="NotSelected" /> <VisualState x:Name="Selected"> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ActiveStates"> <VisualState x:Name="InActive" /> <VisualState x:Name="Active"> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <!--<Border Margin="0,1,1,0" Background="#0099cc" CornerRadius="5,5,0,0"> <Border Margin="1,1,1,0" CornerRadius="5,5,0,0"> </Border> </Border>--> <ContentPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> </Grid> </igPrim:SimpleClickableContainer> </ControlTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources>
<ig:XamGrid Name="xamGrid" ColumnWidth="2*" ItemsSource="{Binding}" CellStyle="{StaticResource GrayRow}" HeaderStyle="{StaticResource BlueHeaderStyle}"> </ig:XamGrid>
Let me know if you have any questions regarding this matter.
When i set the Template with the VisualStateManager i can not use the filter or sort column.
Is it normal, is there any trick to keep filterable column ?
You will need to import the entire default style for the XamGrid; since the HeaderCellControl is dependent on many additional pieces you cannot simply enable it with a couple lines of code inconjunction to your requirement with retemplating the element.
The default styles are installed with WPF here:C:\Program Files\Infragistics\NetAdvantage 20xx.x\WPF\DefaultStyles\
Also, to style the extra field header, which is known to be the FillerColumn, you can apply a similar HeaderCellControl style like so:
<ig:XamGrid.FillerColumnSettings>
<ig:FillerColumnSettings HeaderStyle="{StaticResource overrideStyle1}" ></ig:FillerColumnSettings>
</ig:XamGrid.FillerColumnSettings>
Let me know if you have any additional quesitons regarding this matter.
Thanks for your help.
I'll try to modify the default styles.