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>

Parents
No Data
Reply
  • 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.

Children