I am trying to create a custom style for GroupByArea in XamDataGrid. There is a very good example for this in the feature browser. However this example does not indicate how to display the horizontal bar on the top of XamDataGrid which hides/displays the GroupByArea content.
Hello,
This is controlled by the ExpanderBar element inside the GroupByArea template. In order to have the expander at the botton, you have to retemplate the GroupByArea element. You can find the default xaml files in the DefaultStyles directory in the Infragistics folder. You can use that style as a base for your own and change the Grid.Row property of the ExpanderBar element like this;
<igWindows:ExpanderBar
x:Name="ExpanderBarButton"
Grid.Row="1"
Height="10"
Command="{x:Static igDP:GroupByArea.ToggleExpandedState}"/>
Hope this helps.
Alex,
If I use my own style (I want to use the default style but take out the expander so the group by area is always visible), I am no longer able to drag the column headers from the grid into the group by area. Is there anyway to supply my own style without having to provide another list of columns?
Daniel
In case you can't get me the default style, here is the one I pulled out of the infragistics directory, slightly modified to remove the expanders.
<Style x:Key="MyCustomGroupByArea" TargetType="{x:Type igDP:GroupByArea}"> <Setter Property="Prompt1" Value="{Binding Path=Value, Source={x:Static igDP:Resources.GroupByAreaPrompt1}}"/> <Setter Property="Prompt2" Value="{Binding Path=Value, Source={x:Static igDP:Resources.GroupByAreaPrompt2}}"/> <Setter Property="FontSize" Value="12"/> <Setter Property="Foreground" Value="#151C55"/> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> <GradientStop Color="sc#1, 0.848967135, 0.848967135, 0.848967135" Offset="0"/> <GradientStop Color="sc#1, 0.694037557, 0.694037557, 0.694037557" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <!-- JM 04-09 9.2 CrossBandGrouping Feature --> <!-- I have made a number of changes to this template to integrate the new ExpanderDecorator element and refactor the element layout to remove all hard-coded dimensions. Note: I have left the hard-coded font sizes - we may want to provide a way for the developer to override these in the future. I also removed the animations for expanding/collapsing since this is now handled by the ExpanderDecorator. To reduce clutter I have not retained the code I commented out - refer to previous TFS versions if you need to see the old code. --> <ControlTemplate TargetType="{x:Type igDP:GroupByArea}"> <ControlTemplate.Resources> <Storyboard x:Key="TurnOnInsertionPoint"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_InsertionPoint" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="TurnOffInsertionPoint"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PART_InsertionPoint" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="ShowPrompts"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="prompt1" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.5"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="prompt2" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0.8"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="HidePrompts"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="prompt1" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.2"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="prompt2" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="0.1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid x:Name="outerGrid" SnapsToDevicePixels="True"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <!-- Background Area --> <Grid Grid.Row="0" Grid.RowSpan="2"> <Rectangle Stroke="#00000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="Auto" Height="Auto" x:Name="Rectangle" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Background}" />
<Border HorizontalAlignment="Stretch" Margin="3,3,3,0" Width="Auto" x:Name="Border" RenderTransformOrigin="0.5,0.5" CornerRadius="4,4,0,0" Background="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, GroupByAreaBackgroundHighlight}}" /> <!--Background="{DynamicResource {ComponentResourceKey {x:Type igDP:XamDataGrid}, GroupByLabelHighlight}}" />-->
</Grid> <!-- End Background Area --> <!-- Grouping Prompts --> <StackPanel Orientation="Horizontal" Margin="6,12,0,0"> <ContentControl x:Name="prompt1" FontSize="24" Content="{TemplateBinding Prompt1}" ContentTemplate="{TemplateBinding Prompt1Template}" Opacity=".5" /> <ContentControl x:Name="prompt2" Opacity=".8" Margin="5,11.2,0,0" Content="{TemplateBinding Prompt2}" ContentTemplate="{TemplateBinding Prompt2Template}"/> </StackPanel> <!-- GroupedFieldLabelsArea--> <Grid x:Name="PART_GroupedFieldLabelsArea" Margin="0,12,0,0" VerticalAlignment="Top"> <!-- GroupedFields List --> <igDP:GroupByAreaFieldListBox x:Name="GroupedFieldList" ItemsSource="{TemplateBinding GroupedFieldLabels}" Height="{Binding Path=ActualHeight, ElementName=AvailableFieldList}" AutomationProperties.Name="GroupedFieldsList"/> </Grid> <!-- End GroupedFieldLabels Area --> <StackPanel Visibility="Collapsed" Orientation="Vertical" Grid.Row="1"> <!-- AvailableFieldLabels Area --> <Grid x:Name="PART_AvailableFieldLabelsArea" Margin="0,4,0,3" Visibility="Visible"> <!-- AvailableField List --> <igDP:GroupByAreaFieldListBox x:Name="AvailableFieldList" ItemsSource="{TemplateBinding AvailableFieldLabels}" AutomationProperties.Name="AvailableFieldsList"/> </Grid> <!-- End AvailableFieldLabels Area --> </StackPanel> <!-- Insertion Point --> <Polygon x:Name="PART_InsertionPoint" Opacity="0" Fill="#FF151C55" Points="0,0 10,0 5,5" StrokeEndLineCap="Round" StrokeStartLineCap="Round" StrokeLineJoin="Round" HorizontalAlignment="Left" Margin="0,12,0,0" VerticalAlignment="Top"/> </Grid> <!-- End Collapsible Area --> </Grid> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="igDP:GroupByArea.ShowInsertionPoint"> <BeginStoryboard x:Name="TurnOnInsertionPoint_BeginStoryboard" Storyboard="{StaticResource TurnOnInsertionPoint}"/> </EventTrigger> <EventTrigger RoutedEvent="igDP:GroupByArea.HideInsertionPoint"> <BeginStoryboard x:Name="TurnOffInsertionPoint_BeginStoryboard" Storyboard="{StaticResource TurnOffInsertionPoint}"/> </EventTrigger> <EventTrigger RoutedEvent="igDP:GroupByArea.ShowPrompts"> <BeginStoryboard x:Name="ShowPrompts_BeginStoryboard" Storyboard="{StaticResource ShowPrompts}"/> </EventTrigger> <EventTrigger RoutedEvent="igDP:GroupByArea.HidePrompts"> <BeginStoryboard x:Name="HidePrompts_BeginStoryboard" Storyboard="{StaticResource HidePrompts}"/> </EventTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
I am attaching a sample with removing the expander bars from the XamDataGrid with both group area modes.
The second grid is perfect, exactly what I need.
This project, however, exposed the real problem I was having. We are setting the theme on the data presenter to Aero so it looks consistent on Windows XP. When I set this theme, it doesn't appear to let me override/set the GroupByAreaStyle with the default GroupByAreaMode.
Any ideas?
Yes. This is because setting the theme puts resource dictionaries inside the XamDataGrid's Resources. This will "override" any resources that are up in the ancestor chain of elements (in my project in the App.xaml) unless they are applied using {StaticResource ResourceKey}. A quick way to avoid this would be to move the style to App.xaml resources to XamDataGrid Resources.
You can find a full explanation of how to overcome these issues and how the WPF Styles work in Andrew Smith's blog.
That was so easy I am almost embarrased :).
Thanks a ton for your help!!!