HI
I am using xamgrid and I have kept one more grid in xamgrid row like nested grid, when I click on the ExpansionIndicator then it will display that nested grid.
By default for me XAMGrid ExpansionIndicator is coming like -> and when I click on arrow it is rotating to 90 degrees and row expands, the arrow is the image here and we have 3 arrow images for 3 sates normal, hover, pressed.
Now I want to same style for + and - images, I have three + images and three - images. I need ExpansionIndicatorCellControl style for the same
can any one provide me the style for the same and when I click on the indicator, row details are shown from the second column of the xamgrid not from the first column(it's indicator column) is there any way to place the child grid from first column.
below is the existing style
<Style TargetType="ig:ExpansionIndicatorCellControl"> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="Background" Value="{StaticResource CellItemNormalBackgroundBrush}" /> <Setter Property="BorderThickness" Value="0,0,0,1" /> <Setter Property="BorderBrush" Value="{StaticResource CellItemNormalBorderBrush}" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ig:ExpansionIndicatorCellControl"> <Grid Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="00:00:00.0000" From="White" Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.Background).(Background.Color)" To="#FFEBEFF2" /> </Storyboard> </VisualState> <VisualState x:Name="Alternate" /> </VisualStateGroup> <VisualStateGroup x:Name="SelectedStates"> <VisualState x:Name="NotSelected" /> <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="rowSelected" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="ActiveStates"> <VisualState x:Name="InActive" /> <VisualState x:Name="Active"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ActiveSelected" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" /> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Visible"> <Grid Background="Transparent"> <Grid.ColumnDefinitions> <ColumnDefinition Width="4" /> <ColumnDefinition Width="14" /> <ColumnDefinition Width="4" /> </Grid.ColumnDefinitions> <Border x:Name="rowSelected" Grid.ColumnSpan="3" Margin="0,0,0,0" Background="{StaticResource CellItemSelectedBackgroundBrush}" Visibility="Collapsed" /> <Border x:Name="ActiveSelected" Grid.ColumnSpan="3" Margin="0,0,0,0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Visibility="Collapsed" /> <igPrim:ExpansionIndicator x:Name="Indicator" Grid.Column="1" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Cursor="Hand" Visibility="Collapsed" d:LayoutOverrides="Width"> <igPrim:ExpansionIndicator.Style> <Style TargetType="igPrim:ExpansionIndicator"> <Setter Property="Foreground" Value="{StaticResource ExpansionIndicatorForegroundBrush}" /> <Setter Property="Width" Value="20" /> <Setter Property="Height" Value="20" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igPrim:ExpansionIndicator"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ExpansionStates"> <VisualStateGroup.Transitions> <VisualTransition From="Collapsed" GeneratedDuration="00:00:00.2000000" To="Expanded" /> <VisualTransition From="Expanded" GeneratedDuration="00:00:00.2000000" To="Collapsed" /> </VisualStateGroup.Transitions>
<VisualState x:Name="Expanded"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyph" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphHover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphPress" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphDis" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="90" /> </Storyboard> </VisualState> <VisualState x:Name="Collapsed"> <Storyboard> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyph" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphHover" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphPress" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0" /> <DoubleAnimation Duration="0" Storyboard.TargetName="ExpansionIndicatorGlyphDis" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="0" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyph" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyphHover" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyph" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyphPress" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyph" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpansionIndicatorGlyphDis" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Alternate" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid x:Name="ExpansionIndicator" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{TemplateBinding Background}"> <Image x:Name="ExpansionIndicatorGlyph" Width="14" Height="14" Source="Images/btn_drilldown_enabled.png" Visibility="Visible"> <Image.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform CenterX="7" CenterY="7" /> <TranslateTransform /> </TransformGroup> </Image.RenderTransform> </Image> <Image x:Name="ExpansionIndicatorGlyphHover" Width="14" Height="14" Source="Images/btn_drilldown_over.png" Visibility="Collapsed"> <Image.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform CenterX="7" CenterY="7" /> <TranslateTransform /> </TransformGroup> </Image.RenderTransform> </Image> <Image x:Name="ExpansionIndicatorGlyphPress" Width="14" Height="14" Source="/Images/btn_drilldown_press.png" Visibility="Collapsed"> <Image.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform CenterX="7" CenterY="7" /> <TranslateTransform /> </TransformGroup> </Image.RenderTransform> </Image> <Image x:Name="ExpansionIndicatorGlyphDis" Width="14" Height="14" Source="Images/btn_drilldown_disabled.png" Visibility="Collapsed"> <Image.RenderTransform> <TransformGroup> <ScaleTransform /> <SkewTransform /> <RotateTransform CenterX="7" CenterY="7" /> <TranslateTransform /> </TransformGroup> </Image.RenderTransform> </Image> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </igPrim:ExpansionIndicator.Style> </igPrim:ExpansionIndicator>
Hello,
I am just checking if you require any further assistance on the matter.
Sincerely,
Krasimir
Developer Support Engineer
Infragistics
www.infragistics.com/support
Thank you for your post. I have been looking into the appearance that you are trying to achieve and I have created a sample application for you, that demonstrates how you can change the style of the ExpansionIndicatorCellControl in order to show ‘+’ and ‘-’ instead of ‘>’.
Please let me know if you need any further assistance on the matter.