locked
Semantic Zoom Issue With Drag/Drop RRS feed

  • Question

  • I've been building a similar interface to the Windows 8 home screen, where a user can drag an item to the bottom of the screen to automatically go into semantic zoom mode.

    This works great with the mouse, but when I do it using a touch screen or the touch setting on the emulator, the semantic zoom acts wonky.  It doesn't complete the zoom out animation so many times the zoomed out mode ends up displaying heavily zoomed in or in the lower right hand corner.  If I let go of the drag, it suddenly completes and zooms out property.

    I'm using a "drag enter" event on an invisible area at the bottom of the screen to set the semantic zoom mode.

    Wednesday, August 8, 2012 6:17 PM

Answers

  • I can reproduce this.  I am going to file a bug.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, August 13, 2012 8:39 PM
    Moderator

All replies

  • You will need to provide a project in order to get anywhere with this.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, August 9, 2012 1:36 PM
    Moderator
  • No Problem.  Here's the XAML and the Code-behind.

    You'll notice if you drag an item from the zoomed in view to the bottom of the screen with 'Touch Mode' turned on, the semantic zoom doesn't do a complete zoom out.  However, it works fine if using "Mouse mode"

    I couldn't find a recommended way to do this, so if there's a better way to perform a drag/drop with semantic zoom I'd be glad to use it.

    <Page
        x:Class="App2.MainPage"
        IsTabStop="false"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App2"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <Page.Resources>
    
            
        </Page.Resources>
    
        <Grid x:Name="ParentGrid" >
            <SemanticZoom HorizontalAlignment="Stretch" x:Name="ScheduleSemanticZoom" Grid.Column="1" AllowDrop="True"  >
                <SemanticZoom.ZoomedInView>
                    <ListView CanDragItems="True" Width="400" HorizontalAlignment="Left">
                        <ListView.Items>
                            <ListViewItem >
                                <Grid Background="White">
                                    <TextBlock Text="Drag Me To The Semantic Drag Area" Foreground="Black" FontSize="20" />
                                </Grid>
                            </ListViewItem>
                            <ListViewItem >
                                <Grid Background="White">
                                    <TextBlock Text="Drag Me To The Semantic Drag Area" Foreground="Black" FontSize="20" />
                                </Grid>
                            </ListViewItem>
                            <ListViewItem >
                                <Grid Background="White">
                                    <TextBlock Text="Drag Me To The Semantic Drag Area" Foreground="Black" FontSize="20" />
                                </Grid>
                            </ListViewItem>
                        </ListView.Items>
                    </ListView>
                </SemanticZoom.ZoomedInView>
    
                <SemanticZoom.ZoomedOutView>
                    <GridView 
                        x:Name="gdZoomedOutBoard"
                        Margin="0,-3,0,0"
                        Padding="116,0,40,0" 
                        ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionMode="Single" 
                        AllowDrop="True" >
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid VerticalChildrenAlignment="Center" />
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
    
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Button AllowDrop="True" />
                            </DataTemplate>
                        </GridView.ItemTemplate>
    
                        <GridView.ItemContainerStyle>
                            <Style TargetType="GridViewItem">
                                <Setter Property="Margin" Value="4" />
                                <Setter Property="Padding" Value="10" />
                                <Setter Property="HorizontalContentAlignment" Value="Center" />
                                <Setter Property="VerticalContentAlignment" Value="Center" />
                            </Style>
                        </GridView.ItemContainerStyle>
    
                        <GridView.Items>
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                            <GridViewItem Content="Hello" />
                        </GridView.Items>
                    </GridView>
                </SemanticZoom.ZoomedOutView>
            </SemanticZoom>
    
            <Grid Background="Red" VerticalAlignment="Bottom" Height="auto" x:Name="SemanticDragArea" DragEnter="SemanticDragArea_DragEnter" AllowDrop="True" >
                <StackPanel>
                    <TextBlock FontSize="16" Text="Drag Item into here to begin semantic zoom.  You should see that the zoom doesn't happen completely, and when you let go of the dragged item the zoom finishes.  "   />
                    <TextBlock FontSize="16" Text="This works in 'Mouse' mode, but NOT in 'Basic Touch' mode." />
                </StackPanel>
            </Grid>
    
                    
        </Grid>
    </Page>
    
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.ApplicationModel.DataTransfer;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace App2
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
    
            public MainPage()
            {
                this.InitializeComponent();
    
            }
    
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.  The Parameter
            /// property is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            private void SemanticDragArea_DragEnter(object sender, DragEventArgs e)
            {
                // When we drag the object into this area, we perform the semantic zoom.  This is to simulate Windows 8 drag/drop/semantic zoom in the start area
                ScheduleSemanticZoom.IsZoomedInViewActive = false;
            }
    
        }
    
    }
    


    Thursday, August 9, 2012 6:18 PM
  • I can reproduce this.  I am going to file a bug.


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, August 13, 2012 8:39 PM
    Moderator
  • What is the progress on this bug? I need to use this feature - is there a work around to dragging and dropping into semantic zoom?

    Thank you!

    Liam

    Wednesday, December 4, 2013 1:12 AM
  • It's an unsupported scenario. 

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, December 4, 2013 1:13 PM
    Moderator