Hello,
I have used XamWebGrid to show parent child records. Currently its showing horizontal triangle for collapsed items and vertical triangle for expanded node.Triangle is default. But i want to show Plus image for collapsed and it will chanegs as minus image when get expanded.
So is there any property for that. Please give me solution.
Thanks,
Nandu
Hello Nandu,
You would need to override the ExpansionIndicatorCellControl ControlTemplate and modify it to include your new UIElements.
It would end up looking something like this:
<UserControl x:Class="SilverlightApplication36.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ig="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.XamWebGrid.v9.1" xmlns:igPrim="clr-namespace:Infragistics.Silverlight.Controls.Primitives;assembly=Infragistics.Silverlight.XamWebGrid.v9.1" xmlns:igBase="clr-namespace:Infragistics.Silverlight.Controls;assembly=Infragistics.Silverlight.v9.1" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"> <UserControl.Resources>
<Style TargetType="igPrim:ExpansionIndicatorCellControl" x:Key="MyExpansionIndicator"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igPrim:ExpansionIndicatorCellControl"> <Grid Background="Transparent"> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal" /> <vsm:VisualState x:Name="MouseOver"> <Storyboard > <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState>
<vsm:VisualState x:Name="Alternate" ></vsm:VisualState> </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups> <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/> <Rectangle Fill="Black" Visibility="Collapsed" x:Name="rectangle" Margin="{TemplateBinding BorderThickness}"/> <ContentPresenter Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="Width" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/> <igBase:ExpansionIndicator x:Name="Indicator" Visibility="Collapsed" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" d:LayoutOverrides="Width" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Cursor="Hand"> <igBase:ExpansionIndicator.Style> <Style TargetType="igBase:ExpansionIndicator"> <Setter Property="Foreground" Value="Blue"/> <Setter Property="Width" Value="20"/> <Setter Property="Height" Value="20"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igBase:ExpansionIndicator"> <Grid Background="Transparent"> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="ExpansionStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition From="Collapsed" To="Expanded" GeneratedDuration="00:00:00.2000000"></vsm:VisualTransition> <vsm:VisualTransition From="Expanded" To="Collapsed" GeneratedDuration="00:00:00.2000000"></vsm:VisualTransition> </vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Expanded"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Plus" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Minus" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Collapsed"> <Storyboard> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Minus" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Plus" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Grid x:Name="ExpansionIndicator" Background="#00000000" HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock x:Name="Plus" Text="+" /> <TextBlock x:Name="Minus" Text="-" Visibility="Collapsed" /> </Grid> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </igBase:ExpansionIndicator.Style> </igBase:ExpansionIndicator>
</Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
</UserControl.Resources> <Grid x:Name="LayoutRoot"> <ig:XamWebGrid x:Name="grid"> <ig:XamWebGrid.ExpansionIndicatorSettings> <ig:ExpansionIndicatorSettings Style="{StaticResource MyExpansionIndicator}"></ig:ExpansionIndicatorSettings> </ig:XamWebGrid.ExpansionIndicatorSettings> <ig:XamWebGrid.GroupBySettings> <ig:GroupBySettings AllowGroupByArea="Top"> </ig:GroupBySettings> </ig:XamWebGrid.GroupBySettings> </ig:XamWebGrid> </Grid></UserControl>