none
Flyout Menü in AppBar: DateTimePicker schließt mein Flyout Menü RRS feed

  • Frage

  • Hallo @all!

    Ich erstelle eine Windows 10 UWP App welche in der CommandBar einen Button anzeigt welcher dann ein Flyout Menü öffnet. Das sind in etwa so aus:

    <AppBarButton Icon="Filter" Flyout="{StaticResource FlyoutBase1}" />
    
    <MenuFlyout x:Key="FlyoutBase1">
                <MenuFlyoutItem Text="Bearbeitet" Background="{x:Null}" Style="{StaticResource MenuFlyoutItemStyle1}"/>
            </MenuFlyout>
    
    <Style x:Key="MenuFlyoutItemStyle1" TargetType="MenuFlyoutItem">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                <Setter Property="Padding" Value="{ThemeResource MenuFlyoutItemThemePadding}"/>
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="UseSystemFocusVisuals" Value="True"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="MenuFlyoutItem">
                            <Grid x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
    
                                <TextBlock Grid.Column="0" Grid.Row="0" Text="Dispodat von:" Margin="2 2 5 2" Foreground="{TemplateBinding Foreground}" TextTrimming="CharacterEllipsis" />
                                <TextBlock Grid.Column="1" Grid.Row="0" Text="bis:" Margin="2 2 5 2" Foreground="{TemplateBinding Foreground}" TextTrimming="CharacterEllipsis" />
    
                                <CalendarDatePicker Grid.Column="0" Grid.Row="1" Margin="2 2 5 2" />
                                <CalendarDatePicker Grid.Column="1" Grid.Row="1" Margin="2 2 5 2" />
    
                                <ToggleSwitch Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2" OnContent="Offline Termine anzeigen" OffContent="Offline Termine ausblenden" IsOn="True" />
                                
                                <TextBox Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="3" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

    Das Flyout Menü wird super angezeigt, doch wenn ich dann im Menü auf eins der Datumsfelder tippe um ein Datum auszuwühlen, dann schließt sich das Flyout Menü sofort.

    Kann mir bitte jemand weiterhelfen und sagen warum das so ist? Ich vermute dass das Datums Control ebenfalls ein Flyout verwendet um den Kalender darzustellen, und das sich ein "Flyout über ein Flyout" nicht verträgt ?

    Vielen Dank für jede Hilfe!
    Grüße

    Thomas

    Donnerstag, 7. Januar 2016 14:29

Antworten

  • Hallo Thomas,

    spontan hätte ich jetzt gesagt dass es manuell positioniert werden muss. Das geht dann über die HorizontalOffset bzw. VerticalOffset-Eigenschaft des Popups. An die Position eines Controls müsstest du wie folgt ran kommen:

    var trans = button.TransformToVisual(null);
    var point = trans.TransformPoint(new Point());

    Manchmal ist es aber auch möglich einen kleinen Trick kit einem StackPanel o.ä. zu begehen. Packe beispielsweis mal folgenden Code in eine leere App:

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Height="100" Width="100" Content="Open Popup" Click="Button_Click"/>
        <Popup Width="100" Height="100" Name="popup" >
            <Border Background="red" Width="100" Height="100"/>
        </Popup>
    </StackPanel>
    Das wird aber vielleicht nicht mit der COmmandBar funktionieren.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Freitag, 8. Januar 2016 15:04

Alle Antworten

  • Hallo Thomas,

    Flyouts können sich nicht gegenseitig überlagern, typischerweise schließen diese sich, in den Benutzeroberflächen von Windows 10, sobald man wo anders hin tippt/klickt. Das liegt einfach am Konzept dieses Controls.
    Bei MenuFlyouts macht das vielleicht etwas mehr Sinn, da man auch immer nur ein Menü zu gleich bedienen kann. Das wirst du auch nicht ohne weiteres ändern können.

    Vielleicht ist für dich aber das normale Popup eine Alternative? Dort gibt es die IsLightDismissEnabled-Eigenschaft welche bestimmt ob das Popup automatisch wieder geschlossen wird oder nicht.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Donnerstag, 7. Januar 2016 15:03
  • Hi Tom,

    Danke für deine Antwort. Ich habs jetzt mal mit dem Popup versucht, an sich funktionierts damit, doch leider zeigts mir das Popup immer ganz links oben in meinem Fenster an, jedoch hätte ich es gerne unten, zentriert über meinen AppBarButton.

    Kannst du mir vielleicht ein Beispiel zeigen damit das Popup an der korrekten Position angezeigt wird?

    Danke nochmals
    Gruß

    Thomas

    Freitag, 8. Januar 2016 09:23
  • Hallo Thomas,

    spontan hätte ich jetzt gesagt dass es manuell positioniert werden muss. Das geht dann über die HorizontalOffset bzw. VerticalOffset-Eigenschaft des Popups. An die Position eines Controls müsstest du wie folgt ran kommen:

    var trans = button.TransformToVisual(null);
    var point = trans.TransformPoint(new Point());

    Manchmal ist es aber auch möglich einen kleinen Trick kit einem StackPanel o.ä. zu begehen. Packe beispielsweis mal folgenden Code in eine leere App:

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button Height="100" Width="100" Content="Open Popup" Click="Button_Click"/>
        <Popup Width="100" Height="100" Name="popup" >
            <Border Background="red" Width="100" Height="100"/>
        </Popup>
    </StackPanel>
    Das wird aber vielleicht nicht mit der COmmandBar funktionieren.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Freitag, 8. Januar 2016 15:04