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:
<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:
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:
private void bottom1_MouseEnter(object sender, MouseEventArgs e)
{
Image image = sender as Image;
if (cardUp != null)
{
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;
}
}