Forums Ultimate UI for WPF
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
EASii IC
350
XamGrid Background OnMouseHover
posted

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>

  • 29105
    Verified Answer
    Offline posted 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.

  • 29105
    Offline posted

    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.