Hi
I have question with hierarchical grid.
In hierarchical grid we are using the + / - for expand and collapse the grid.
I want to place a next to minus (-) sign image (Like folder open image) when that grid expanding mode.
and change the (next to + plus sign) image (Like folder close image) automatically when that grid collapsing.
you help is highly appreciated. thanks.
by
ramesh
i would also like to replace the expander image with my own image. The child records in this case ar individual people scheduled on a task and I want to replace + and - with a "people" icon. I do not have a solution but maybe if another person asks we will get a response.
Hello,
Responce, true.
To achieve this you have to create a style for the RecordSelector. You can see the base/default style in the DefaultStyles directory installed together with out products in the Infragistics folder. You have to retemplate the record selector to change + and - signs.
Hope this helps.
Alex.
Here is what I have created ( a custom Expansion Indicator ) with Blend. You can it as a base to create your own ( really a lot of xaml code, I apologize :) )
<Style TargetType="{x:Type igWindows:ExpansionIndicator}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igWindows:ExpansionIndicator}"> <ControlTemplate.Resources> <Storyboard x:Key="Storyboard2"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="plusHorizontal" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="44.04"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <SplineDoubleKeyFrame KeyTime="00:00:01" Value="-44.846"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ControlTemplate.Resources> <Grid Background="#00FFFFFF"> <Grid RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" x:Name="grdExpansionIndicatorClosed" Margin="41.5,21.5,33.119,14.643"> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Border RenderTransformOrigin="0.5,0.5" x:Name="outerBorder" Background="{TemplateBinding BorderBrush}" CornerRadius="2,2,2,2"/> <Border RenderTransformOrigin="0.5,0.5" Margin="1,1,1,1" x:Name="innerFill" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" CornerRadius="1.5,1.5,1.5,1.5"/> <Ellipse RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" Margin="2,4,2,4" x:Name="plusHorizontal" VerticalAlignment="Stretch" Width="Auto" Height="1" Fill="{TemplateBinding Foreground}"> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> <Ellipse RenderTransformOrigin="0.5,0.5" Margin="4,2,4,2" x:Name="plusVert" Width="1" Height="Auto" Fill="{TemplateBinding Foreground}"> <Ellipse.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="0" Y="0"/> </TransformGroup> </Ellipse.RenderTransform> </Ellipse> </Grid> </Grid> <ControlTemplate.Triggers> <MultiTrigger> <MultiTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource Storyboard2}" x:Name="Storyboard2_BeginStoryboard"/> </MultiTrigger.EnterActions> <MultiTrigger.Conditions> <Condition Property="IsChecked" Value="True"/> </MultiTrigger.Conditions> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
Thank you for the post but as you state there is a lot of XAML here and I still cannot see how I replace the + (Collapsed) and - (Expanded) images with my own images for Collapsed and Expanded. I struggle with my XAML and Curtis tried to get me to us Blend for creating these custom templates and controls but I don't have the time to learn EB right now.
Your sample still has the + and - sign, can you include the XAML that would replace these images? I am sorry that it is not obvious to me. Your sample does not change the image back to the + sign when collapsed. I am guessing it is because you have a Trigger for IsChecked = True and not trigger for IsChecked = False?
Maybe I am asking for too much and need to keep digging myself. Maybe I cannot replace just the images and not change anything else about the Expansion Indicator?
For your convenienice I have created an example with images (This should do the trick)
<Style x:Key="ExpansionIndicatorStyle1" TargetType="{x:Type igWindows:ExpansionIndicator}"> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="1,1" StartPoint="0,0"> <GradientStop Color="sc#1, 0.57900393, 0.57900393, 0.57900393" Offset="1"/> <GradientStop Color="#FFFFFFFF" Offset="0.36153846153846259"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="BorderBrush" Value="#FF999999"/> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="Cursor" Value="Hand"/> <Setter Property="ClipToBounds" Value="False"/> <Setter Property="Margin" Value="5,0,3,0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igWindows:ExpansionIndicator}"> <ControlTemplate.Resources> <Storyboard x:Key="Storyboard2" AutoReverse="False"> <DoubleAnimation To="0" BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="Opacity"> </DoubleAnimation> </Storyboard> <Storyboard x:Key="Storyboard3" AutoReverse="False"> <DoubleAnimation To="1" BeginTime="00:00:00" Storyboard.TargetName="plusVert" Storyboard.TargetProperty="Opacity"> </DoubleAnimation> </Storyboard> </ControlTemplate.Resources> <Grid Background="#00FFFFFF"> <Grid RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True" x:Name="grdExpansionIndicatorClosed" Margin="41.5,21.5,33.119,14.643"> <Grid.RowDefinitions> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Border RenderTransformOrigin="0.5,0.5" x:Name="outerBorder" Background="{TemplateBinding BorderBrush}" CornerRadius="2,2,2,2"/> <Border RenderTransformOrigin="0.5,0.5" Margin="1,1,1,1" x:Name="innerFill" Width="Auto" Height="Auto" Background="{TemplateBinding Background}" CornerRadius="1.5,1.5,1.5,1.5"/> <Image Opacity="1" Source="indic.jpg" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" Margin="2,4,2,4" x:Name="plusHorizontal" VerticalAlignment="Stretch" Width="Auto" Height="10"/> <Image Opacity="1" Source="indicC.jpg" RenderTransformOrigin="0.5,0.5" Margin="4,2,4,2" x:Name="plusVert" Width="10" Height="Auto" /> </Grid> </Grid> <ControlTemplate.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"/> <MultiTrigger> <MultiTrigger.EnterActions> <BeginStoryboard x:Name="Storyboard2_BeginStoryboard" Storyboard="{StaticResource Storyboard2}"/> </MultiTrigger.EnterActions> <MultiTrigger.ExitActions> <BeginStoryboard x:Name="Storyboard3_BeginStoryboard" Storyboard="{StaticResource Storyboard3}"/> </MultiTrigger.ExitActions> <MultiTrigger.Conditions> <Condition Property="IsChecked" Value="True"/> </MultiTrigger.Conditions> <Setter Property="Opacity" TargetName="plusVert" Value="0"> </Setter> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
Thank Alex. It is working Except collapse scenario.
When expanding the image changed.
When collapsed the image not changed the old image still appear. (Suppose i collapse the top node and expand again,
It will display the correct image) .
Well, that is interesting. It works with me fine ( the image changes from "B" letter to "A" letter and then back to "B" when collapsed). It just has one second animation time (I think). If you want I can attach my project.
Hello David,
Thank you for your post. I have been looking into it and I have modified the sample that Alex uploaded in the forum thread you provided, so now it works as you want. If you group by the second field the expansion indicators will be different. Basically I used converters in the Images’ Source Properties to set a different picture depending on which Fields is grouped and whether it is grouped at all.
Hope this helps you.
Hi Alex, I know that this post (http://community.infragistics.com/forums/p/18938/81442.aspx#81442) was some time ago now, but it would be really useful if this example could be extended to show how the plus/minus images could be different depending on which field was grouped...so that I can do something like explorer where the icon displayed is different depending on the folder type that is being expanded.
Thanks,
David
Yes, the best way to do this is in the InitializeRecord event set
e.Record.IsExpanded = true;
Hi,
Hi Alex,
Is there any way which always keeps the expander as expanded by default.