XamGrid Background OnMouseHover | Infragistics Forums

350

XamGrid Background OnMouseHover

EASii IC posted over 7 years ago

Hello,

I would like to change the background color of column header and columLayout header also (in Xamgrid).

I have multiple problems :

I didn't success to remove the "OnMouseOver" effect on column/columnlayout header
The background color is only apply on column and not on the last colulm of Xamgrid (defaut column)

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>

Parents

29105

Offline Michael DiFilippo posted over 7 years ago

Hello,

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>

Let me know if you have any questions regarding this matter.

Reply

350

Offline EASii IC posted over 7 years ago in reply to Michael DiFilippo

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 ?
Cancel
Reply

Cancel

Children

350

Offline EASii IC posted over 7 years ago in reply to Michael DiFilippo

Thanks for your help.

I'll try to modify the default styles.
Cancel
Reply

Cancel
29105

Verified Answer
Offline Michael DiFilippo posted over 7 years ago in reply to EASii IC

Hello,

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.
Cancel
Reply

Reject Answer

Cancel