Hi Team,
I have got the requirement to display header color by default grey text (on page load).When any part of the Xam Data Grid is clicked the header of the grid needs to be turned to blue colour.Same case applies when the user clicks on some other region other than the grid the header colour changes to grey again.
Can you please provide your valuable time in making me achieve this.Thanks in advance for all your support.
Below mentioned is the style for Xam Data Grid .
<Style TargetType="{x:Type igDP:LabelPresenter}" x:Key="GridStyler"> <Setter Property="VerticalContentAlignment" Value="Top"></Setter> <Setter Property="VerticalAlignment" Value="Bottom"></Setter> <Setter Property="OuterBorderBrush" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> <Setter Property="LabelHighlight" Value="{StaticResource BhGridControlHeaderHoverBrush}"></Setter> <Setter Property="BorderThickness" Value="0"></Setter> <Setter Property="FontSize" Value="14"></Setter> <Setter Property="FontFamily" Value="Segoe UI"></Setter> <Setter Property="Height" Value="40"></Setter> <Setter Property="Background" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> <Setter Property="BorderThickness" Value="0"/> <Setter Property="OuterBorderBrush" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> <Setter Property="InnerBorderBrush" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> <Setter Property="Margin" Value="0,0,0,0" /> <Setter Property="MinHeight" Value="30"/> <Setter Property="Foreground" Value="{StaticResource BhGridControlHeaderForegroundBrush}"></Setter> <Setter Property="ToolTip" Value="{Binding Path=Field.ToolTip, RelativeSource={x:Static RelativeSource.Self}}"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igDP:LabelPresenter}"> <ControlTemplate.Resources> <Storyboard x:Key="SigmaFadeInFilterButton"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FilterButton" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SigmaFadeOutFilterButton"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="FilterButton" Storyboard.TargetProperty="(UIElement.Opacity)" FillBehavior="Stop"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.4"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Grid x:Name="labelCntr"> <Border x:Name="background" RenderTransformOrigin="0.5,0.5" CornerRadius="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelCornerRadius}}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" > <Border BorderBrush="{TemplateBinding InnerBorderBrush}" BorderThickness="0,0,0,0" x:Name="lineInner" SnapsToDevicePixels="True"/> </Border> <Border BorderBrush="{TemplateBinding OuterBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" x:Name="lineOuter" SnapsToDevicePixels="True"/> <Grid x:Name="sortIndicatorAndLabel" Margin="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="LabelContent" Focusable="False" Margin="{TemplateBinding Padding}" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> <igWindows:SortIndicator x:Name="SortIndicator" Width="30" SortStatus="{TemplateBinding SortStatus}" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="1" Visibility="Collapsed" /> <igDP:SummaryButton x:Name="SummaryButton" Width="30" Field="{TemplateBinding Field}" Visibility="{Binding Path=Field.AllowSummariesResolved, Converter={StaticResource boolToVisibility}, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Right" Grid.Column="2" /> <igDP:FilterButton Width="30" x:Name="FilterButton" Field="{TemplateBinding Field}" HorizontalAlignment="Left" Grid.Column="3" Visibility="{TemplateBinding FilterButtonVisibility}"/> <igDP:FixedFieldButton Width="30" x:Name="FixedButton" Field="{TemplateBinding Field}" HorizontalAlignment="Left" Grid.Column="4" Visibility="{TemplateBinding FixedButtonVisibility}"/> </Grid> </Grid> <ControlTemplate.Triggers> <Trigger Property="HighlightAsPrimary" Value="true"> <!--<Setter TargetName="background" Property="Background" Value="{StaticResource LabelPresenterHighlightasPrimaryBackground}"/> <Setter TargetName="background" Property="BorderBrush" Value="{StaticResource LabelPresenterHighlightasPrimaryBorderBrush}"/>--> </Trigger> <Trigger Property="HorizontalAlignment" Value="Center"> <Setter Property="VerticalAlignment" TargetName="SortIndicator" Value="Top"/> <Setter Property="HorizontalAlignment" TargetName="SortIndicator" Value="Center"/> <Setter Property="Margin" TargetName="SortIndicator" Value="0,5,0,0"/> </Trigger> <Trigger Property="SortStatus" Value="Ascending"> <Setter TargetName="SortIndicator" Property="Visibility" Value="Visible"/> <Setter TargetName="background" Property="Background" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> </Trigger> <Trigger Property="SortStatus" Value="Descending"> <Setter TargetName="SortIndicator" Property="Visibility" Value="Visible"/> <Setter TargetName="background" Property="Background" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> </Trigger> <DataTrigger Binding="{Binding Path=IsInGroupByArea, RelativeSource={RelativeSource Self}}" Value="True"> <Setter TargetName="FixedButton" Property="Visibility" Value="Collapsed"/> <Setter TargetName="SummaryButton" Property="Visibility" Value="Collapsed"/> <!--<Setter TargetName="background" Property="Background" Value="{StaticResource HeaderHoverBackgroundBrush}"/> <Setter TargetName="lineOuter" Property="BorderBrush" Value="{StaticResource HeaderHoverBackgroundBrush}"/> <Setter TargetName="lineInner" Property="BorderBrush" Value="{StaticResource HeaderHoverBackgroundBrush}"/>--> </DataTrigger> <Trigger Property="IsInFieldChooser" Value="true"> <Setter TargetName="SortIndicator" Property="Visibility" Value="Collapsed"/> <Setter TargetName="FilterButton" Property="Visibility" Value="Collapsed"/> <Setter TargetName="FixedButton" Property="Visibility" Value="Collapsed"/> <Setter TargetName="SummaryButton" Property="Visibility" Value="Collapsed"/> <Setter TargetName="labelCntr" Property="Margin" Value="0,0,0,0"/> </Trigger> <Trigger Property="IsDragIndicator" Value="True"> <Setter Property="Padding" Value="7,4"/> <Setter TargetName="labelCntr" Property="Margin" Value="2,4"/> </Trigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True"/> <Condition SourceName="FilterButton" Property="HasActiveFilters" Value="False"/> </MultiTrigger.Conditions> <!--<Setter TargetName="background" Property="Background" Value="{StaticResource HeaderHoverBackgroundBrush}"/>--> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="True"/> <Condition SourceName="FilterButton" Property="HasActiveFilters" Value="True"/> </MultiTrigger.Conditions> <!--<Setter TargetName="background" Property="Background" Value="{StaticResource HeaderHoverBackgroundBrush}"/>--> <Setter TargetName="FilterButton" Property="Background" Value="{Binding Path=LabelHighlight, RelativeSource={RelativeSource TemplatedParent}}"/> <Setter TargetName="FilterButton" Property="Opacity" Value="1"/> </MultiTrigger> <MultiTrigger> <MultiTrigger.Conditions> <Condition SourceName="FilterButton" Property="HasActiveFilters" Value="True"/> <Condition Property="IsMouseOver" Value="False"/> </MultiTrigger.Conditions> <Setter TargetName="FilterButton" Property="Opacity" Value="1"/> <Setter TargetName="FilterButton" Property="Background" Value="{Binding Path=LabelHighlight, RelativeSource={RelativeSource TemplatedParent}}"/> </MultiTrigger> <Trigger SourceName="FilterButton" Property="HasActiveFilters" Value="True"> <Setter TargetName="FilterButton" Property="Opacity" Value="1"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
Regards,
Sridhar.
Hello Sridhar,
I'm not sure you need to mess with the whole LabelPresenter style just to achieve this functionality. It could be as simple as checking the XamDataGrid's IsKeyboardFocusWithin property and then applying a basic style to the XamDataGrid.FieldSettings.LabelPresenterStyle that sets the background color to the desired result.
Or you could have a DataTrigger in the Style.Trigger on LabelPresenter that uses a RelativeSource binding up to the XamDataGrid and binds to it's IsKeyboardFocusWithin property and uses that to determine what the color should be.
If you need to keep your above style, just add another DataTrigger to it that binds up to the IsKeyboardFocusWithin property and then changes the colors accordingly. 90% of the time when you click away from the control onto another one that steals focus, it will also steal keyboard focus and that property will update. The times where it wouldn't update is if the control itself went out of its way to keep keyboard focus and the XamDataGrid doesn't do this.
Hi Rob ,
Thanks a lot for your quick reply on the post.
I have tried the same way as you mentioned but it works partially.
When i try to click on any other control the style(background color) changes but when i tried to click on any empty space on the page the style is not changing.
If i click on any part of my page other than grid the style should change.
Can you please suggest ?
Style i have used
<ControlTemplate.Triggers> <DataTrigger Binding="{Binding Path=IsKeyboardFocusWithin , RelativeSource={RelativeSource AncestorType={x:Type igDP:XamDataGrid}}}" Value="False"> <Setter Property="Background" Value="Gray"></Setter> </DataTrigger> <DataTrigger Binding="{Binding Path=IsKeyboardFocusWithin , RelativeSource={RelativeSource AncestorType={x:Type igDP:XamDataGrid}}}" Value="True"> <Setter Property="Background" Value="{StaticResource BhGridControlHeaderBackgroundBrush}"></Setter> </DataTrigger>
</ControlTemplate.Triggers>.
Thanks a lot for your support.
Hi Srikanth,
There's no easy way to do that. Clicking on an empty space doesn't cause the grid to lose focus. That is expected. You aren't clicking on anything so there is no reason to steal focus from the grid.
If you want the grid to lose focus just by clicking on some empty space you will need to manually clear that focus, either by manually focusing another element on the page or trying to call Keyboard.ClearFocus(). There are some ideas for this here:http://stackoverflow.com/questions/6489032/wpf-remove-focus-when-clicking-outside-of-a-textbox