KushMishra 38 Senior Technical Lead

Hi All,

I am facing some issues when writing a xaml and my code goes as follows :-

 <Grid>
        <Grid.Resources>
            <!-- Shared Storyboard across the system -->
            <!-- This storyboard will make the image (button) grow to double its size in 0.2 seconds -->
            <Storyboard x:Key="expandStoryboard">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="2.5" Duration="0:0:0.2" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="2.5" Duration="0:0:0.2" />
                <Int32Animation Storyboard.TargetName="myImage" Duration="00:00:0.2" Storyboard.TargetProperty="(Panel.ZIndex)" From="998" To="999"/>
            </Storyboard>
            <!-- This storyboard will make the image revert to its original size -->
            <Storyboard x:Key="shrinkStoryboard">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="1" Duration="0:0:0.2" />
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="1" Duration="0:0:0.2" />
            </Storyboard>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Button Grid.Column="0" Height="50" Width="50" Panel.ZIndex="999">
            <Image x:Name="myImage" RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/New.png">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
        <Button Grid.Column="1" Height="50" Width="50" Panel.ZIndex="999">
            <Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/open.jpg">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
        <Button Grid.Column="2" Height="50" Width="50" Panel.ZIndex="999">
            <Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Diary.png">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
        <Button Grid.Column="3" Height="50" Width="50" Panel.ZIndex="999">
            <Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/workstation.gif">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
        <Button Grid.Column="4" Height="50" Width="50" Panel.ZIndex="999">
            <Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Settings.png">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
        <Button Grid.Column="5" Height="50" Width="50" Panel.ZIndex="999">
            <Image RenderTransformOrigin="0.5,0.5" Source="/Kush_StoryboardAndTriggers;component/Images/Refresh.png">
                <Image.Triggers>
                    <EventTrigger RoutedEvent="Image.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource expandStoryboard}" />
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Image.MouseLeave">
                        <BeginStoryboard Storyboard="{StaticResource shrinkStoryboard}" />
                    </EventTrigger>
                </Image.Triggers>
                <Image.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Image.RenderTransform>
            </Image>
        </Button>
    </Grid>

The issue is when I mouse over an image, it goes back to the adjacent border/image.
Could anyone please help me with the same ?

Thank you very much in advance :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.