Question

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;
}

现在使用上面的代码拖动可以正常工作。

enter image description here

我的问题（已更新01/19）：我想设置拖动区域的限制。即我想添加拖动到Circle和Triangle。允许将它们拖过其他形状但不能越过TextBlocks或角落中的箭头。所有元素目前都在Grid中。

我尝试了Chris提到的建议并使用了StackPanel。它限制了行为，但后来我无法定位所显示的元素，即在分散的地方。相反，SP迫使我将它们一个堆叠在另一个上面垂直或水平。其他形状也有自己的动画，如调整大小等。

有什么建议吗？

Answer 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>

在Window Phone 7+ Silverlight应用程序中拖动图像

1 个答案: