Databases
StackOverflow2013
Postsdbo
PODrag & Drop VariableSizedWrapGrid items with touch gestures in Windows 8 Store App (C#)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODrag & Drop VariableSizedWrapGrid items with touch gestures in Windows 8 Store App (C#)
    text
    copied!<p><strong>Update: I received an answer from MS via support channels that it is currently impossible to support touch reordering when the ItemPanelTemplate is a VariableSizeWrapGrid - because it lacks the implementation of some of the interfaces required for that.</strong></p> <p>As a foreword (and to eliminate any misunderstanding), I do have the required functionality working with the mouse. All I need is to achieve the same functionality with the touch gestures.</p> <p>Requirements: 1. Display in a horizontally scrollable container a set of items, each of which may be of either half height or full height. It should be possible to rearrange them by dragging and dropping at a new position. 2. Give the user a way to deselect a previously selected item (to the same effect as right-clicking with the mouse does).</p> <p>My current code:</p> <p>XAML (slightly simplified for clarity)</p> <pre><code> &lt;ScrollViewer HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"&gt; &lt;StackPanel Orientation="Horizontal" Height="600" ScrollViewer.VerticalScrollMode="Disabled"&gt; &lt;controls:MyGridView ScrollViewer.VerticalScrollMode="Disabled" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" SelectionMode="Single" IsSwipeEnabled="True" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsItemClickEnabled="False" Height="600"&gt; &lt;GridView.ItemTemplate&gt; &lt;DataTemplate&gt; &lt;Grid&gt; &lt;ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ItemTemplateSelector}"/&gt; &lt;/Grid&gt; &lt;/DataTemplate&gt; &lt;/GridView.ItemTemplate&gt; &lt;GridView.ItemsPanel&gt; &lt;ItemsPanelTemplate&gt; &lt;VariableSizedWrapGrid ItemHeight="300" ItemWidth="300" Orientation="Vertical"/&gt; &lt;/ItemsPanelTemplate&gt; &lt;/GridView.ItemsPanel&gt; &lt;GridView.ItemContainerStyle&gt; &lt;Style TargetType="GridViewItem"&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Stretch"/&gt; &lt;Setter Property="VerticalContentAlignment" Value="Stretch"/&gt; &lt;/Style&gt; &lt;/GridView.ItemContainerStyle&gt; &lt;/controls:DashletsGridView&gt; &lt;/StackPanel&gt; &lt;/ScrollViewer&gt; </code></pre> <p>MyGridView class here is an extension of GridViewEx that is a part of <a href="http://www.codeproject.com/Articles/536519/Extending-GridView-with-Drag-and-Drop-for-Grouping" rel="nofollow">this sample</a>. The only addition it has to its base class is:</p> <pre><code> protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { try { Item d = item as Item; if (d != null) { element.SetValue(VariableSizedWrapGrid.RowSpanProperty, d.Size == PossibleSizes.Half ? 1 : 2); } } catch { element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 2); } finally { base.PrepareContainerForItemOverride(element, item); } } </code></pre> <p>I have tried a wide variety of layout control combinations (such as eliminating the outer ScrollViewer, or StackPanel, or replacing it with a grid), but none of those supported proper horizontal scrolling or item sizing. Switching the GridView.ItemsPanel from VariableSizedWrapGrid to just WrapGrid did not help either.</p> <p>Please note the combination of flags: IsSwipeEnabled="True" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsItemClickEnabled="False". This is what's working with the mouse d&amp;d, but still no luck with the touch d&amp;d or deselection.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload