Gestern Nacht wieder Stunden um die Ohren geschlagen um ein minimales Detail in Windows 8 METRO Anwendungen zu klären. Es gibt in HTML ein Flyout Control, das es in XAML nicht gibt.
Microsoft (hier Tim Heuer) empfiehlt alternativ das PopUp Steuerelement, das ich schon zu Silverlight Zeiten wenig geschätzt habe, statt dessen zu verwenden.
Die Grundproblematik kommt aus dem single Window Ansatz der WinRT. Es gibt ja kein Childwindow oder anderen modalen Dialog (außer MessageDialog der aber nicht XAML ist).
Es gibt aber Anwendungsfälle in denen das eben doch nützlich ist. In meinem Fall einen Datensatz hinzufügen.
Man findet in Windows 8 METRO Anwendungen seit der Customer Preview auch Beispiele dafür.
Da Menüs in die Appbar gelegt werden sollen, habe ich einen Neu und Save Button erzeugt, dessen Sichtbarkeit gewechselt wird.
<Page.BottomAppBar>
<AppBar x:Name="GlobalAppBar" Padding="10,0,10,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0"
HorizontalAlignment="Left">
<Button x:Name="Back" Tag="Back" Style="{StaticResource BackAppBarButtonStyle}"
HorizontalAlignment="Left" Click="Back_Click"/>
</StackPanel>
<StackPanel x:Name="RightCommands" Orientation="Horizontal" Grid.Column="1"
HorizontalAlignment="Right">
<Button x:Name="add1" Tag="add" Style="{StaticResource AddAppBarButtonStyle}"
HorizontalAlignment="Left" Click="add_Click"/>
<Button x:Name="save1" Tag="save" Style="{StaticResource SaveAppBarButtonStyle}"
HorizontalAlignment="Left" Click="save_Click1" />
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>
Wenn nun “Neu” gewählt wird, wird das Popup per popup1.Isopen=true angezeigt und der Neu Button deaktiviert.
<Popup x:Name="popup1" HorizontalAlignment="Right" VerticalAlignment="Top" Width="200" Margin="0,0,100,0"
IsLightDismissEnabled="true" Closed="popup1_Closed_1">
<Grid Background="#FFE5E5E5" Height="334" Width="302">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="5Code" VerticalAlignment="Top"
Margin="10,18,0,0" Foreground="#FF0F50DA"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="fullname" VerticalAlignment="Top"
Margin="10,65,0,0" Foreground="#FF1355E2"/>
<TextBox x:Name="txtKey" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top"
Margin="76,10,0,0"/>
<TextBox x:Name="txtFirma" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top"
Margin="76,54,0,0" Width="150"/>
</Grid>
</Popup>
Wenn der Benutzer nun irgendwo hin klickt, verschwindet das Popup. Es behält aber seinen Status und Inhalt. Das Problem ist, wenn der Benutzer auf den Save Button in der Appbar clickt, verschwindet das Popup auch, aber das Save Event wird nicht gefeuert.
Ich habe mich eine Zeitlang bemüht das zu umschiffen, leider erfolglos. Die einzig sinnvolle Kombination ist, den Save Button in das Popup zu legen.
Am Ende keine befriedigende Lösung, da die Style Guides Command Buttons im Daumenbereich der Appbar vorsehen. Man könnte auch automatisch speichern im Closing Event des Popups. Das entspricht auch den Guidelines, immer alles automatisch zu speichern. Das iPhone macht das letztendlich auch schon immer so. Die Settings Dialoge bei Windows 8 tun das auch. Bei klassischen Formularen mit Dateneingabe erwartet der Benutzer aber heute eine OK CANCEL Situation. Schließlich könnte er etwas aus versehen verändert haben.
Das ist für mich aktuell ein unbefriedigend gelöstes UI Problem.