none
C# / XAML: Probleme mit Layout change unter Windows 8.1 RRS feed

  • Frage

  • Hallo zusammen,

    ich habe ein extremes Problem bei Anpassung meiner App an unterschiedliche Zustände für Windows 8.1. In 8.0 war es eigentlich kein Problem, doch hat sich jetzt alles verändert. Dazu habe ich mir ein ganz einfaches Beispiel vorgenommen, doch schon hierbei funktioniert es einfach nicht.

    Ich habe 4 Buttons, die in einem Stackpanel eingebettet sind. Im "Full-Screen" sind die Buttons wie folgt angeordnet:

    <StackPanel x:Name="StackButton" Orientation="Vertical" Grid.Row="1" Margin="350,250,150,150" >
                    <StackPanel x:Name="StackBlock1" Orientation="Horizontal">
                        <Button Content="Nummer 1" />
                        <Button Content="Nummer 2" />
                    </StackPanel>
                    <StackPanel x:Name="StackBlock2" Orientation="Horizontal">
                        <Button Content="Nummer 3" />
                        <Button Content="Nummer 4" />
                    </StackPanel>
                </StackPanel>

    Wenn ich mein Fenster teile, sollten alle Buttons untereinander angeordnet werden. Dazu habe ich bereits den VisualState Manager in XAML geschrieben:

    <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Small">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StackBlock1" Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StackBlock2" Storyboard.TargetProperty="Orientation">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Vertical"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    mit dem C#-Code:

    public ItemPage()
            {
                this.InitializeComponent();
                this.navigationHelper = new NavigationHelper(this);
                this.navigationHelper.LoadState += navigationHelper_LoadState;
    
                this.SizeChanged += ItemPage_SizeChanged;
            }
    
            void ItemPage_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                if (e.NewSize.Width < 500)
                {
                    VisualStateManager.GoToState(this, "Small", true);
                }
                else if (e.NewSize.Width >= 500)
                {
                    VisualStateManager.GoToState(this, "Normal", true);
                }
            }

    Allerdings ändert sich überhaupt nichts, wenn die Größe meiner App verändere.

    Weiß jemand, woran das liegt ? Anhand anderer Beispiele habe ich es bereits probiert, allerdings klappt es mit meinem Beispiel nicht.

    Wäre super, wenn jemand sagen könnte, was ich falsch mache.

    Gruß, Michael

    Sonntag, 1. Juni 2014 17:06

Antworten

  • Hallo,
    ich habe deinen Code mal in ein neues Projekt kopiert. Da lief alles.

    Ich habe dafür in den App-Einstellungen (Package.appxmanifest) die Mindestbreite auf 320px herunter gesetzt, damit ich auch unter die 500px komme.
    Die angefügte VisualStateManager.VisualStateGroups-Eigenschaft habe ich in das Grid in der Page gepackt. Wenn ich die Eigenschaft direkt in die Page packe, geht es auch bei mir nicht.

    Noch 2 allgemeine Hinweise:

    1. Wenn du nur 2 VisualStates hast, ist die 2. if-Abfrage sinnlos. Der Wert wird immer größer-gleich 500 sein.
    2. Du solltest die Gruppe benennen und im Codebehind deiner Klasse entsprechend die VisualStates mitteilen (per Attribut):
      [TemplateVisualState(Name = "Small", GroupName = "MyCommonStates")]
      [TemplateVisualState(Name = "Normal", GroupName = "MyCommonStates")]
      Scheinbar wird das zwar nicht zwingend benötigt, ich würde es trotzdem machen, da alle .NET Klassen es genauso machen.


    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert Michael80xxx Montag, 9. Juni 2014 16:11
    Sonntag, 1. Juni 2014 19:40

Alle Antworten

  • Hallo Michael,

    Hast du dir das ganze mal im Debugger angeschaut, es könnte ja sein, dass das Property Width nicht dem entspricht was du denkst oder zeigt die Ausgabe irgendetwas an?

    Viele Grüße

    BlackCoin

    Sonntag, 1. Juni 2014 19:10
  • Hallo,
    ich habe deinen Code mal in ein neues Projekt kopiert. Da lief alles.

    Ich habe dafür in den App-Einstellungen (Package.appxmanifest) die Mindestbreite auf 320px herunter gesetzt, damit ich auch unter die 500px komme.
    Die angefügte VisualStateManager.VisualStateGroups-Eigenschaft habe ich in das Grid in der Page gepackt. Wenn ich die Eigenschaft direkt in die Page packe, geht es auch bei mir nicht.

    Noch 2 allgemeine Hinweise:

    1. Wenn du nur 2 VisualStates hast, ist die 2. if-Abfrage sinnlos. Der Wert wird immer größer-gleich 500 sein.
    2. Du solltest die Gruppe benennen und im Codebehind deiner Klasse entsprechend die VisualStates mitteilen (per Attribut):
      [TemplateVisualState(Name = "Small", GroupName = "MyCommonStates")]
      [TemplateVisualState(Name = "Normal", GroupName = "MyCommonStates")]
      Scheinbar wird das zwar nicht zwingend benötigt, ich würde es trotzdem machen, da alle .NET Klassen es genauso machen.


    Tom Lambert - C# MVP
    Bitte bewertet- und markiert Beiträge als Antwort. Danke.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    • Als Antwort markiert Michael80xxx Montag, 9. Juni 2014 16:11
    Sonntag, 1. Juni 2014 19:40
  • Hallo,

    also der Debugger nennt mir die passende Width, so dass die Seite den Small Zustand laden müsste.

    (in dem Fall ist das Width = 300).

    Gruß Michael

    Sonntag, 1. Juni 2014 20:01
  • Hallo,

    danke jetzt scheint alles zu klappen wie es soll.

    Noch einen schönen, sonnigen Tag

    Gruß Michael

    Montag, 9. Juni 2014 16:12