本文介绍了WPF XAML布局问题显示卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在布局中显示13张卡片（目前我正在使用网格），当我的鼠标在卡片上方时，它会上升10像素，但会被网格切割。
如何当鼠标结束时我可以显示孔卡吗？现在这张卡被卡了，
当我们将鼠标移动到其他地方时，卡片会回到原来的位置
链接到关于如何切割卡片的图片：
[]
这里是xaml网格：
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:
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:
method when mouse over card:
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;
}
}
推荐答案
这篇关于WPF XAML布局问题显示卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！