WPF XAML layout problem displaying cards

Question

4.00/5 (1 vote)

See more:

I want to display 13 cards in a layout(currently i am using a Grid) and when my mouse is over a card it gets up 10 pixels but it is cut by the grid.
How can i show the hole card when the mouse is over? now the card is cuted,
and when we move the mouse somewhere else the card to go back in it's original position

link to a picture on how the card is cut:
http://imageshack.us/photo/my-images/545/theproblem.jpg/[^]

here is the xaml grid:

HTML

  <Grid Margin="10,0,11,2" Name="bottomGrid" MouseLeave="bottomGrid_MouseLeave" Height="116" VerticalAlignment="Bottom" Grid.Row="2" Grid.ColumnSpan="3">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="51*"/>
        <ColumnDefinition Width="72"/>
    </Grid.ColumnDefinitions>
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom1" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown"  HorizontalAlignment="Left" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom2" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="1" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom3" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="2" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom4" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="3" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom5" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="4" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom6" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="5" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom7" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="6" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom8" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="7" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom9" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="8" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom10" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="9" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom11" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="10"     />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom12" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="11" />
    <Image Height="96" Width="72" MinWidth="72" MinHeight="96" MaxWidth="71" Margin="0,20,0,0" Name="bottom13" Source="/Hearts;component/cards/b2fv.png" Stretch="Fill" VerticalAlignment="Top" MouseEnter="bottom1_MouseEnter" Cursor="Hand" MouseLeftButtonDown="bottom1_MouseLeftButtonDown" HorizontalAlignment="Left" Grid.Column="12" />

</Grid>

Method when mouse leaves grid:

C#

private void bottomGrid_MouseLeave(object sender, MouseEventArgs e)
{
    cardUp.Margin = new Thickness(
    cardUp.Margin.Left,
    cardUp.Margin.Top + 10,
    cardUp.Margin.Right,
    cardUp.Margin.Bottom);
    cardUp = null;
}

method when mouse over card:

C#

private void bottom1_MouseEnter(object sender, MouseEventArgs e)
       {
           Image image = sender as Image;
           if (cardUp != null)
           {
               // if a card is already up move it down and move the other one up
               image.Margin = new Thickness(
                   image.Margin.Left,
                   image.Margin.Top - 10,
                   image.Margin.Right,
                   image.Margin.Bottom);
               cardUp.Margin = new Thickness(
                   cardUp.Margin.Left,
                   cardUp.Margin.Top + 10,
                   cardUp.Margin.Right,
                   cardUp.Margin.Bottom);
               cardUp = image;
           }
           else
           {
               image.Margin = new Thickness(
                   image.Margin.Left,
                   image.Margin.Top - 10,
                   image.Margin.Right,
                   image.Margin.Bottom);
               cardUp = image;
           }
       }

Posted 5-May-13 0:52am

Gabriel Sas

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Irina Pykhova · Answer 1 · 2013-05-05T01:04:00

Solution 1

I believe, you need something like this: http://tozon.info/blog/post/2007/10/14/three-ways-to-make-your-wpf-images-pop-out-on-mouseover.aspx

I.e., you should not change margins or sizes in any way,use ScaleTransform and handle it from event triggers or via VisualStates.

Posted 5-May-13 1:04am

Irina Pykhova

Updated 5-May-13 1:06am

v2

Comments

Gabriel Sas 5-May-13 7:42am

the images are moving up on mouse over, but they are just half of card, i am searching how to move the cards on window resize.

Irina Pykhova 5-May-13 8:06am

I'm not sure that I understand. Your initial question was about resizing cards on mouse over, not about resizing window. Look, if you need to resize the card on mouse over - use single ScaleTransfrom for the whole card (in your xaml, it should be applied to the bottomGrid). About windows size - is it a separate question? If you need to move cards according to the window size, use something like wrap panel, which will layout them automatically