Windows Phone 7.5 Silverlight应用
我想让用户在限制区域内拖动页面上的图像。 此图像位于具有其他元素的网格中。
我将使用GestureListener,甚至尝试过实施。下面是代码。我在阅读了一些样本文章之后尝试过。
<Image x:Name="imgFootball" Margin="55,108,55,1" Grid.Row="1" Source="/Ball.png" Height="250" Width="250">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener DragDelta="GestureListener_DragDelta"></toolkit:GestureListener>
</toolkit:GestureService.GestureListener>
<Image.RenderTransform>
<CompositeTransform x:Name="imgImageTranslate" />
</Image.RenderTransform>
</Image>
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
imgImageTranslate.TranslateY += e.VerticalChange;
imgImageTranslate.TranslateX += e.HorizontalChange;
}
现在使用上面的代码拖动可以正常工作。
我的问题(已更新01/19):我想设置拖动区域的限制。即我想添加拖动到Circle和Triangle。允许将它们拖过其他形状但不能越过TextBlocks或角落中的箭头。所有元素目前都在Grid中。
我尝试了Chris提到的建议并使用了StackPanel。它限制了行为,但后来我无法定位所显示的元素,即在分散的地方。相反,SP迫使我将它们一个堆叠在另一个上面垂直或水平。其他形状也有自己的动画,如调整大小等。
有什么建议吗?
答案 0 :(得分:1)
通过将MouseDragElementBehavior附加到对象并设置其ConstrainToParentBounds属性,可以获得更简单的结果,因此它将像Grid或Border之类的那样尊重其Parent对象的边界。请参阅此处[http://microsoftfeed.com/2011/how-to-add-mousedragelementbehavior-in-windows-phone-7/] [1] [1]:http://microsoftfeed.com/2011/how-to-add-mousedragelementbehavior-in-windows-phone-7//
* * *示例显示了您在父边界内拖动命名的两个元素,因为您只将行为附加到这些特定对象。
<phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:el="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="WindowsPhonetester.PhonePage1"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Border BorderBrush="#FFF50606" BorderThickness="3" Margin="9,141,8,174">
<Rectangle Fill="#FFF35206" HorizontalAlignment="Left" Height="74" Margin="20,29,0,0" Stroke="Black" VerticalAlignment="Top" Width="76"/>
</Border>
<Path Data="M43,98 L21,111 L41,124 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="27" Margin="20.5,97.5,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="23"/>
<Path Data="M406,103 L406,125 L429,113 z" Fill="#FFF4F4F5" HorizontalAlignment="Right" Height="23" Margin="0,102.5,26.5,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="24"/>
<TextBlock Height="28" Margin="108,98,112,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<Ellipse Fill="#FF0635F3" Height="79" Margin="164,181,204,0" Stroke="Black" VerticalAlignment="Top">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</Ellipse>
<Rectangle Fill="#FFF3DF06" HorizontalAlignment="Right" Height="64" Margin="0,181,26,0" Stroke="Black" VerticalAlignment="Top" Width="123"/>
<Path Data="M78,318 L41,383 L111,380 z" Fill="#FFF306DF" HorizontalAlignment="Left" Height="66" Margin="40.5,0,0,223.5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="71">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior ConstrainToParentBounds="True"/>
</i:Interaction.Behaviors>
</Path>
<Path Data="M275,309 L322,305 L357,327 L362,360 L342,391 L295,398 L259,376 L252,338 z" Fill="#FF06F30A" HorizontalAlignment="Right" Height="94" Margin="0,0,93.5,208.5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Bottom" Width="111"/>
</Grid>
</Grid>
</phone:PhoneApplicationPage>