Перетащите изображение в приложение Window Phone 7+ Silverlight

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

Теперь, используя вышеуказанный код, перетаскивание работает отлично.

Моя проблема (Обновлено 01/19): Я хочу установить предел для области перетаскивания.т.е. я хочу добавить перетаскивание в круг и треугольник.Их можно перетаскивать поверх других фигур, но они не могут проходить над текстовыми блоками или стрелками в углу.Все элементы в настоящее время находятся в Grid.

Я попробовал предложение, как упомянуто Крисом, и использовал StackPanel.Это ограничивает поведение, но тогда я не могу расположить элементы, как показано, то есть в разрозненных местах.Вместо этого SP заставляет меня складывать их один над другим по вертикали или по горизонтали.Также другие формы имеют собственную анимацию, такую ​​как изменение размера и т. Д.

Есть предложения?

Answer 1

Вы могли бы получить более простой результат, прикрепив MouseDragElementBehavior к объекту и установив его свойство ConstrainToParentBounds, чтобы он соблюдал границы своего родительского объекта, такие как Grid или Border или что-то еще.См. Здесь [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>