Hi,
I am trying to customize column header using style. I want to put button for filter in the column header. But the the column default style must be maintained as such. So I tried doing in the below mentioned way:
but when this style is applied to LabelPresenter i am loosing the default look for Column. I mean I am not able to view "sorting" icon which appears bydefault in the column though sorting functionality is working fine.
Please need help for this.
Thanks,
Sejal
It's because you're creating a whole new template for LabelPresenter which overrides the original. (I'm assuming that the sorting icon is set in LabelPresenter). You will need to add that code into your template for it to work. Infragistics provides all the styles and templates for these things with the installation so you can just copy and paste that part into your code.
Hello,
Right -- when you install the WPF suite you will get the default styles for DataPresenter in the following folder:
C:\Program Files\Infragistics\NetAdvantage for WPF 2008 Vol. 1\DefaultStyles\DataPresenter
There you can open the DataPresenterGeneric_Express.xaml file and look for the LabelPresenter default template - it is quite complicated because of the complex styles and a lot of the additional functionality required, like sorting.
You can also use additional tools like Mole and Snoop to investigate the Visual Tree of the application (and the header in this particular case) in order to see the elements that take part in displaying the header.
<Style TargetType="{x:Type igDP:LabelPresenter}"> <Setter Property="Padding" Value="5,4,5,4" /> <Setter Property="Background" Value="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelBackground}}"/> <Setter Property="LabelHighlight" Value="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelHighlight}}" /> <Setter Property="InnerBorderBrush" Value="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelInnerBorder}}" /> <Setter Property="OuterBorderBrush" Value="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelOuterBorder}}" /> <Setter Property="Foreground" Value="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelForeground}}"/> <Setter Property="HorizontalContentAlignment" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=Field.LabelTextAlignmentResolved, Converter={StaticResource textAlignmentToHorizontalAlignmentConverter}}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igDP:LabelPresenter}"> <ControlTemplate.Resources> <Storyboard x:Key="sbHighlightOn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="highlight"> <SplineDoubleKeyFrame Value="0" KeyTime="00:00:00"/> <SplineDoubleKeyFrame Value="1" KeyTime="00:00:00.1750000"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="sbHighlightOff"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="highlight"> <SplineDoubleKeyFrame Value="0" KeyTime="00:00:00.25"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SigmaFadeIn"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SummaryButton" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="SigmaFadeOut"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="SummaryButton" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.2"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Grid Margin="2,4,2,4" Background="#00000000"> <!-- Background Bar --> <Border Width="Auto" Height="Auto" RenderTransformOrigin="0.5,0.5" CornerRadius="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelCornerRadius}}" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" x:Name="background" /> <!-- Highlight --> <Border x:Name="highlight" Opacity="0" Width="Auto" Height="Auto" CornerRadius="2,2,2,2" Background="{TemplateBinding LabelHighlight}" /> <Rectangle Stroke="{TemplateBinding OuterBorderBrush}" StrokeThickness="1" RadiusX="1.55015910897703" RadiusY="1.55015910897703" Fill="Transparent" Margin="0,0,0,0" x:Name="lineOuter" Width="Auto" Height="Auto" /> <Rectangle Stroke="{TemplateBinding InnerBorderBrush}" StrokeThickness="1" RadiusX="0.550159108977027" RadiusY="0.550159108977027" Fill="Transparent" Margin="1,1,1,1" x:Name="lineInner" Width="Auto" Height="Auto" /> <Grid Margin="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" x:Name="sortIndicatorAndLabel"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <ContentPresenter x:Name="LabelContent" Focusable="False" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" d:LayoutOverrides="Width, Height" VerticalAlignment="Center" /> <igWindows:SortIndicator x:Name="SortIndicator" SortStatus="{TemplateBinding SortStatus}" Visibility="Collapsed" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="1" Margin="5,0,0,0" /> <!-- SSP 3/31/08 - Summaries Functionality --> <igDP:SummaryButton x:Name="SummaryButton" Field="{TemplateBinding Field}" Visibility="{Binding Path=Field.AllowSummariesResolved, Converter={StaticResource BoolToVisConverter}, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Right" VerticalAlignment="Center" Width="Auto" Grid.Column="2" Margin="5,0,0,0" Opacity="0.2" /> </Grid> </Grid> <ControlTemplate.Triggers> <!--<DataTrigger Binding="{Binding Path=Field.LabelTextAlignmentResolved, RelativeSource={RelativeSource Self}}" Value="Center"> <Setter Property="HorizontalAlignment" TargetName="sortIndicatorAndLabel" Value="Center"/> </DataTrigger>--> <!-- HighlightPrimary --> <Trigger Property="HighlightAsPrimary" Value="true"> <Setter TargetName="highlight" Property="Opacity" Value="1" /> </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> <!-- Only animate highlight --> <MultiTrigger> <MultiTrigger.Conditions> <!--<Condition Property="SortStatus" Value="NotSorted"/>--> <Condition Property="IsMouseOver" Value="True"/> </MultiTrigger.Conditions> <MultiTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource sbHighlightOn}" x:Name="sbHighlightOn_BeginStoryboard"/> <BeginStoryboard Storyboard="{StaticResource SigmaFadeOut}" x:Name="SigmaFadeIn_BeginStoryboard"/> <BeginStoryboard x:Name="SigmaFadeIn_BeginStoryboard1" Storyboard="{StaticResource SigmaFadeIn}"/> </MultiTrigger.EnterActions> <MultiTrigger.ExitActions> <BeginStoryboard Storyboard="{StaticResource sbHighlightOff}" x:Name="sbHighlightOff_BeginStoryboard"/> <BeginStoryboard Storyboard="{StaticResource SigmaFadeOut}" x:Name="SigmaFadeOut_BeginStoryboard"/> <StopStoryboard BeginStoryboardName="SigmaFadeIn_BeginStoryboard1"/> </MultiTrigger.ExitActions> </MultiTrigger> <Trigger Property="SortStatus" Value="Ascending"> <Setter TargetName="highlight" Property="Opacity" Value="1" /> <Setter TargetName="SortIndicator" Property="Visibility" Value="Visible" /> </Trigger> <Trigger Property="SortStatus" Value="Descending"> <Setter TargetName="highlight" Property="Opacity" Value="1" /> <Setter TargetName="SortIndicator" Property="Visibility" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
You can start from the default LabelPresenter template and use it literally, then find a suitable place where you can add your button to the template.
Can you please send me some sample how to do the thing as u mentioned. I am still not clear with your idea.
When you're creating a new template for a complex control (like parts of the XamDataGrid), the best way is to copy the original template (the entire thing in the post above) completely into your code and then add/edit whatever you want into that. This way, you will know without a doubt that no functionality you expect to have (like the sort indicator) will disappear.
So step by step instructions:
Where you've created your custom template in your xaml, replace it with the supplied LabelPresenter template above (true, it's a lot of code but at least it's complete). Then take your custom button in your custom template and paste it into the grid in the new template. You may have to experiment with where you put it but that's all you have to do.
Please can you tell me where to put xyz line of code withing default labelpreseneter templage because there are two grids and one of grid contain contentpresenter. please give example.
Hello Dinesh,
Could you please be more specific what do you mean by "xyz line of code"?
Looking forward fro your reply.