none
UWP - APP mit ContentDialog und leider (offensichtlich) nicht funktionierendem VisualStateManager RRS feed

  • Frage

  • Hallo,

    ich erstelle eine Universelle-Windows 10-App (UWP). In dieser möchte ich gerne verschiedene "ContentDialog"e verwenden. Da diese etwas mehr Content haben und das ganze sowohl auf PC, Tablet und auf dem Handy laufen soll und das auch noch in Portrait und Landscape, würde ich meine Controls gerne mit dem VisualStateManager arrangieren.

    Scheinbar funktioniert der aber nicht in einem ContentDialog. 

    Liege ich da richtig oder gibt es dafür eine Lösung?

    Gruß

    Stefan

    Freitag, 8. Januar 2016 21:44

Antworten

  • Hallo Stefan,

    ich habe mal versucht dein Problem nachzustellen und das gelang mir ohne Probleme.

    Ich kann es nicht mit Sicherheit sagen an was das liegt, ich habe aber den Eindruck, dass der VisualStateManager nicht reagiert, da das Template des ContentDialogs zu viele Container in einander schachtelt. Denn wenn ich das Template um den RelativePanel und den VSM erweitere, dann funktioniert es ohne Probleme.

    <ContentDialog.Template>
        <ControlTemplate TargetType="ContentDialog">
            <StackPanel Background="{TemplateBinding Background}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="WideView">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="720"  />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="Button2.(RelativePanel.RightOf)" Value="Button1"/>
                                <Setter Target="Button3.(RelativePanel.RightOf)" Value="Button2"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NarrowView">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="Button2.(RelativePanel.Below)" Value="Button1"/>
                                <Setter Target="Button3.(RelativePanel.Below)" Value="Button2"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <RelativePanel>
                        <Button x:Name="Button1" Content="Test Button-1"/>
                        <Button x:Name="Button2" Content="Test Button-2"/>
                        <Button x:Name="Button3" Content="Test Button-3"/>
                    </RelativePanel>
                </Grid>
            </StackPanel>
        </ControlTemplate>
    </ContentDialog.Template>

    (In dem Template fehlen jetzt noch die ganzen anderen Elemente wie die Standardbuttons und der Titel, dass müsstest du ggf. noch alles einbauen.)

    Warum das nur so funktioniert weiß ich allerdings auch nicht. Ich finde das schon etwas unnötig kompliziert es so machen zu müssen.


    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

    Samstag, 9. Januar 2016 14:44
    Moderator

Alle Antworten

  • Hallo Stefan,

    kannst du uns vielleicht ein kleines Demonstrationsbeispiel geben? Ich kann es im Moment nicht selbst testen, könnte das aber morgen nachholen.

    Soweit ich es im Moment weiß funktioniert der VSM eigentlich weitestgehend unabhängig von den Controls. Daher wäre ein konkretes Beispiel ganz praktisch.


    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 21:58
    Moderator
  • Hallo Tom,

    hier ein kleines Beispiel (hätte ich auch gleich abliefern können).

    Ich habe in VS2015 ein vorhandenes Template des ContentDialog genommen und folgendermaßen angepasst:

    <ContentDialog
        x:Class="MainNamespace.Controls.TestContentDialog"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:MainNamespace.Controls"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="Test only..."
        PrimaryButtonText="YES"
        SecondaryButtonText="NO"
        PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
        SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
    
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState x:Name="WideView">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="600" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Button2.(RelativePanel.RightOf)" Value="Button1"/>
                            <Setter Target="Button3.(RelativePanel.RightOf)" Value="Button2"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="NarrowView">
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="0" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="Button2.(RelativePanel.Below)" Value="Button1"/>
                            <Setter Target="Button3.(RelativePanel.Below)" Value="Button2"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
    
            <RelativePanel>
                <Button x:Name="Button1" Content="Test Button-1"/>
                <Button x:Name="Button2" Content="Test Button-2"/>
                <Button x:Name="Button3" Content="Test Button-3"/>
            </RelativePanel>
        </Grid>
    </ContentDialog>

    In einer Page funktioniert das so.

    Und danke für deine Hilfe zu später Stunde.

    Freitag, 8. Januar 2016 22:43
  • Hallo Stefan,

    ich habe mal versucht dein Problem nachzustellen und das gelang mir ohne Probleme.

    Ich kann es nicht mit Sicherheit sagen an was das liegt, ich habe aber den Eindruck, dass der VisualStateManager nicht reagiert, da das Template des ContentDialogs zu viele Container in einander schachtelt. Denn wenn ich das Template um den RelativePanel und den VSM erweitere, dann funktioniert es ohne Probleme.

    <ContentDialog.Template>
        <ControlTemplate TargetType="ContentDialog">
            <StackPanel Background="{TemplateBinding Background}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="WideView">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="720"  />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="Button2.(RelativePanel.RightOf)" Value="Button1"/>
                                <Setter Target="Button3.(RelativePanel.RightOf)" Value="Button2"/>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NarrowView">
                            <VisualState.StateTriggers>
                                <AdaptiveTrigger MinWindowWidth="0" />
                            </VisualState.StateTriggers>
                            <VisualState.Setters>
                                <Setter Target="Button2.(RelativePanel.Below)" Value="Button1"/>
                                <Setter Target="Button3.(RelativePanel.Below)" Value="Button2"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid>
                    <RelativePanel>
                        <Button x:Name="Button1" Content="Test Button-1"/>
                        <Button x:Name="Button2" Content="Test Button-2"/>
                        <Button x:Name="Button3" Content="Test Button-3"/>
                    </RelativePanel>
                </Grid>
            </StackPanel>
        </ControlTemplate>
    </ContentDialog.Template>

    (In dem Template fehlen jetzt noch die ganzen anderen Elemente wie die Standardbuttons und der Titel, dass müsstest du ggf. noch alles einbauen.)

    Warum das nur so funktioniert weiß ich allerdings auch nicht. Ich finde das schon etwas unnötig kompliziert es so machen zu müssen.


    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

    Samstag, 9. Januar 2016 14:44
    Moderator
  • Einfach genial!

    Vielen Dank!

    Samstag, 9. Januar 2016 15:18