CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Aug 2011
    Posts
    1

    Help with image enlargement bringing to front

    What I am trying to do is show a collection of small images. If you mouse over 1 on the small images it expands. Problem is - parts of the expanded image is behind the other small images. I am using wpf and xaml in visual studio 2010 and using storyboards to expand the image.

    here is my code
    <Window x:Class="Chairs.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="487" Width="1166">


    <Grid>
    <Grid HorizontalAlignment="Left" Margin="82,75,0,273" Name="LegGrid1" Width="120" >
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="29" />
    <ColumnDefinition Width="28" />
    <ColumnDefinition Width="30" />
    <ColumnDefinition Width="272*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="100"></RowDefinition>
    </Grid.RowDefinitions>


    <Image Height="36" HorizontalAlignment="Right" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="24" Source="/GuestTracker;component/images/Folding_Chairs_Large.jpg" Margin="1,3,3,0" Grid.Column="1" >
    <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
    <BeginStoryboard>
    <Storyboard>
    <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>
    </BeginStoryboard>
    </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
    <!--<ScaleTransform ScaleX="1" ScaleY="1" />-->
    <ScaleTransform CenterX="1" CenterY="1"></ScaleTransform>
    </Image.RenderTransform>
    </Image>
    <Image Height="36" Name="image2" Stretch="Fill" Width="24" Source="/GuestTracker;component/images/Folding_Chairs_Large2.jpg" Grid.Column="2" Margin="1,3,3,0" VerticalAlignment="Top">
    <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
    <BeginStoryboard>
    <Storyboard>
    <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>
    </BeginStoryboard>
    </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
    <ScaleTransform ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    </Image>
    <Image Height="38" HorizontalAlignment="Right" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="24" Grid.Column="3" Source="/GuestTracker;component/images/Folding_Chairs_Large3.jpg" Margin="0,1,4,0">
    <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
    <BeginStoryboard>
    <Storyboard>
    <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>
    </BeginStoryboard>
    </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
    <ScaleTransform ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    </Image>
    <Image Height="38" HorizontalAlignment="Left" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="24" Grid.Column="4" Source="/GuestTracker;component/images/Folding_Chairs_Large4.jpg" Margin="4,1,0,0">
    <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
    <BeginStoryboard>
    <Storyboard>
    <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>
    </BeginStoryboard>
    </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
    <ScaleTransform ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    </Image>
    <Image Grid.Column="2" Height="50" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="47" Source="/GuestTracker;component/images/Chair_Left_Try.gif" Grid.ColumnSpan="2" Margin="7,42,0,0" >
    <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
    <BeginStoryboard>
    <Storyboard>
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" To="5" Duration="0:0:0.2" />
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY" To="5" Duration="0:0:0.2" />
    </Storyboard>
    </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="Image.MouseLeave">
    <BeginStoryboard>
    <Storyboard>
    <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>
    </BeginStoryboard>
    </EventTrigger>
    </Image.Triggers>
    <Image.RenderTransform>
    <ScaleTransform ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    </Image>

    </Grid>
    </Grid>
    </Window>

    thanks for your time and help

  2. #2
    Join Date
    Aug 2012
    Posts
    2

    Re: Help with image enlargement bringing to front

    HI this is karthik,
    I have the same problem, but in my case I am using rectangles instead of images. Did you solve this... if so can you please help me by suggesting what is the change u made... I used storyboard and mouse over and mouse leave events... while mouse the rectangle enlarges but a small right portion of the enlarged rectangle is going behind the next rectangle..

    tanq for ur time and help

  3. #3
    Join Date
    Aug 2012
    Posts
    2

    Re: Help with image enlargement bringing to front

    HI this is karthik,
    I have the same problem, but in my case I am using rectangles instead of images. Did you solve this... if so can you please help me by suggesting what is the change u made... I used storyboard and mouse over and mouse leave events... while mouse the rectangle enlarges but a small right portion of the enlarged rectangle is going behind the next rectangle..

    tanq for ur time and help

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured