Ich habe eine Seite mit einem relativen Bereich, den ich basierend auf der Breite neu organisieren möchte. Es scheint jedoch keinen Status beim Laden anzuwenden, es sei denn, die Breite ist> 720px. Wenn ich die Größe der Seite nach dem Laden verändere, funktionieren beide Status.

Eine Problemumgehung wäre, die Fenstergröße auf der geladenen Seite zu überprüfen und den Status manuell auszuwählen, aber ich glaube, dies sollte automatisch behandelt werden? Ich habe andere Seiten, die funktionieren. Ich bin mir nicht sicher, was ich anders mache. Hier ist eine vereinfachte Version meines Codes. Ich habe einen roten / blauen Hintergrund eingestellt, damit ich feststellen kann, ob / welcher Status angewendet wird.

<Page.Resources>
    <converters:HighlightConverter x:Key="HighlightConverter"/>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <gui:MainAppBar x:Name="mainAppBar" Grid.Row="0"/>

    <ScrollViewer Grid.Row="1">
        <RelativePanel>

            <StackPanel x:Name="ZonesContainer" Margin="12,12,0,0">
                <TextBlock Text="Zones"/>
                <ItemsControl x:Name="ZonesPanel">
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="ContentPresenter">
                            <Setter Property="Margin" Value="6"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <ItemsWrapGrid x:Name="ZonesWrapGrid" Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <StackPanel x:Name="Panel" Orientation="Horizontal">
                            </StackPanel>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </StackPanel>

            <StackPanel x:Name="SourcesContainer" RelativePanel.RightOf="ZonesContainer" Margin="12,12,0,0">
                <GridView x:Name="SourcesPanel" Header="Sources">
                </GridView>
            </StackPanel>

            <StackPanel x:Name="NetworkServicesContainer" RelativePanel.Below="SourcesContainer" RelativePanel.AlignLeftWith="SourcesContainer" Margin="12,12,0,0">
                <GridView x:Name="NetworkServicesPanel" Header="Network">
                </GridView>
            </StackPanel>

        </RelativePanel>
    </ScrollViewer>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="WindowStates">
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ZonesContainer.Background" Value="Blue"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="ZonesContainer.Background" Value="Red"/>
                    <Setter Target="SourcesContainer.(RelativePanel.Below)" Value="ZonesContainer" />
                    <Setter Target="SourcesContainer.(RelativePanel.AlignLeftWith)" Value="ZonesContainer" />
                    <Setter Target="NetworkServicesContainer.(RelativePanel.Below)" Value="SourcesContainer" />
                    <Setter Target="ZonesWrapGrid.Orientation" Value="Horizontal" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

</Grid>

Aktualisiere

Ich habe den Code aktualisiert, um das fehlende ZonesWrapGrid anzuzeigen. Es scheint in Beziehung zu stehen. Die visuellen Zustände wirken sich aus, wenn ich die Größe der Seite ändere. Dadurch ändert sich die Ausrichtung von ZonesWrapGrid. Es wird nur kein Status beim Laden festgelegt.

Wenn ich jedoch die ZonesWrapGrid-Änderung aus dem visuellen Status-Manager entferne, werden die Schmal- / Breitenzustände beim Laden korrekt angewendet, aber ich verliere natürlich die gewünschte Ausrichtungsänderung.