Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
470
Need XAMGrid style for ExpansionIndicatorCellControl
posted

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>

Parents
  • 30945
    Offline posted

    Hello,

     

    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.

     

    Sincerely,

    Krasimir

    Developer Support Engineer

    Infragistics

    www.infragistics.com/support

    ExpansionIndicatorCellStyle.zip
Reply Children
No Data