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
770
How to show plus minus iamges for expand collapse in XamWebGrid
posted

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

  • 21382
    Suggested Answer
    posted

    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>