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
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?
Yes! i too waiting for that.
Hello,
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>
Alex.
Thank you. If I can't figure it out from this I will just stick with the + and - sign and turn in my programmers badge.
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) .