Wisch Geste Windows 10 FCU UWP

Obwohl Microsoft seit Windows XP Touch und Pen im Betriebssystem als integralen Bestandteil behandelt, ist es noch immer schwierig mit Gesten umzugehen. Lediglich Manipulation Events die speziell auf Finger Eingaben reagieren, werden ausgelöst. Aber kein Zoom, Pinch oder Rotate. Um aus den Events, den EventArgs eine Geste letztendlich zu erkennen, hilft eine Klasse GestureRecognizer in Kombination mit ManipulationInputProcessor. Nichts was intuitiv von der Hand flutscht. Schon recht früh keimte die Idee in Listen ein Delete per Wischgeste auszulösen. Der Aufwand und das Ergebnis, endeten in der Empfehlung, das Wipe and Delete Feature aus den Spezifikationen zu entfernen. Ähnliches gilt für das bei Android und IPhone verbreitete aktualisieren einer Liste durch ziehen.

Wieder einmal soll ein neues UWP Steuerelement Abhilfe schaffen. Zumindest teilweise gelingt dies dem SwipeControl Control. Nicht nur der Name ist sonderbar, sondern auch die Nutzung und Parameterisierung, so das mich brennend interessieren würde ob die Entwickler in Redmond sitzen oder überhaupt bei Microsoft beschäftigt sind.

Das Stuerelement ist eine Art Container der im Datatemplate einer z.B. Listview platziert wird und dann den üblichen Inhalt des Datatemplates enthält. Je nach Wischrichtung (Links Rechts) wird ein Template (Leftitems RigthItems) aktiviert. Darunter muss ein SwipeItems Element angelegt werden. Per Mode Reveal oder Execute wird das Verhalten des eingewischten Kontext Menüs gesteuert. Reveal lässt nur ein aktiviertes Element zu und verschwindet nach Funtkionsaufrauf automatisch. Bei Execute bleiben auch mehrere Items aktiviert.

image

Weder erschließt sich mir, warum der Standard ein dauerhaft aktiviertes Menüitem ist, noch wie Benutzer es wieder wegbekommen soll. Eine Gegenläufige Wischgeste ist es jedenfalls nicht. Bleibt nur das Attribut   BehaviorOnInvoked="Close" des SwipeItem Elements. Von den SwipeItems können auch mehrere in das rechte oder linke SwipeItems Control deklariert werden. Besonders absurd finde ich das man das Icon nicht einfach per Name definieren kann, sondern explizit eine SymbolIconSoruce als Resource anlegen muss. Das wird an anderen Stellen der UWP API mit Icon=”Delete” besser gelöst. Der komplette XAML Code

   1:      <Page.Resources>
   2:          <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
   3:          <SymbolIconSource x:Key="EditIcon" Symbol="Edit"/>
   4:      </Page.Resources>
   5:   
   6:      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   7:   
   8:          <ListView x:Name="liste1" Width="600" Height="300">
   9:              <ListView.ItemTemplate>
  10:                  <DataTemplate x:DataType="x:String" >
  11:                      <SwipeControl x:Name="ListViewSwipeContainer" >
  12:                          <SwipeControl.LeftItems>
  13:                              <SwipeItems Mode="Reveal">
  14:                                  <SwipeItem Text="Edit"  
  15:                                             IconSource="{StaticResource EditIcon}"
  16:                                             Invoked="SwipeItem_Invoked"
  17:                                             />
  18:                       
  19:                              </SwipeItems>
  20:                          </SwipeControl.LeftItems>
  21:   
  22:                          <SwipeControl.RightItems>
  23:                              <SwipeItems  Mode="Execute">
  24:                                  <SwipeItem Text="Delete"
  25:                                             IconSource="{StaticResource DeleteIcon}"
  26:                                             Invoked="SwipeItem_Invoked_1"
  27:                                             BehaviorOnInvoked="Close"
  28:                                             Background="Red"/>
  29:                              </SwipeItems>
  30:                          </SwipeControl.RightItems>
  31:                          <StackPanel Orientation="Vertical" Margin="5">
  32:                              <TextBlock Text="{x:Bind}" FontSize="18"/>
  33:                              <StackPanel Orientation="Horizontal">
  34:                                  <TextBlock Text="Mein bestimmter Monat..." FontSize="12"/>
  35:                              </StackPanel>
  36:                          </StackPanel>
  37:                      </SwipeControl>
  38:                  </DataTemplate>
  39:              </ListView.ItemTemplate>
  40:          </ListView>

Als nächstes noch der Blick in den C# Soruce Code, der Code Behind. Auch diskussionswürdig der Name des Events Invoke (an anderer Stelle auch mal InvokeItem). Mit folgendem Code kann ich zuverlässig Visual Studio ins Nirvana schicken, bzw den  Debugger. Normal gestartet läuft die App.

   1:     private async void SwipeItem_Invoked_1(SwipeItem sender, SwipeItemInvokedEventArgs args)
   2:          {
   3:              
   4:              var msg = new MessageDialog("Ping");
   5:              await msg.ShowAsync();
   6:   
   7:          }

 

swipe

für mich noch offen sind Layout Fragen. Konkret ist die Liste eigentlich 400px breit, aber auch bei Swipe Geste wird nur der Bereich der maximalen Textlänge eines Listeneintrages genutzt. Noch eine Menge zu lernen.

Kommentare sind geschlossen