So verwenden Sie diesen AdaptiveTrigger in UWP App

Question

Ich schreibe eine UWP-Anwendung.

Ich habe SplitView (für Hamburger Zwecke) auf Seite hinzugefügt.

In Splitview Pane, ich habe zwei Artikel:

• SellButtonGrid
• SellButtonGridAlternate

Sichtbarkeit von beiden Positionen sind abhängig von zwei Bedingungen:

• Minimum 520 Windows Höhe
• und SplitViewPane geöffnet oder geschlossen.

Das bedeutet, 4 Fälle:

1. Windows-Höhe weniger als 520 und splitviewpane geschlossen

2. Windows-Höhe weniger als 520 und splitviewpane offen

3. Windows-Höhe größer als 520 und splitviewpane geschlossen

4. Windows Höhe größer als 52 0 und splitviewpane offen

Für SPLITVIEW- öffnen oder schließen Ich benutze:

<VisualState x:Name="SplitViewOpen"> 
    <VisualState.StateTriggers> 
    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen}" /> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Visible" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" /> 
    </VisualState.Setters> 
</VisualState> 
<VisualState x:Name="SplitViewClosed"> 
    <VisualState.StateTriggers> 
    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen, Converter={StaticResource BooleanNegationConverter}}" /> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
    </VisualState.Setters> 
</VisualState> 

Für unter oder über 520 Erfassungshöhe ich verwenden:

<VisualState x:Name="SmallHeight"> 
    <VisualState.StateTriggers> 
    <AdaptiveTrigger MinWindowHeight="0" /> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
    </VisualState.Setters> 
</VisualState> 
<VisualState x:Name="LargeHeight"> 
    <VisualState.StateTriggers> 
    <AdaptiveTrigger MinWindowHeight="520" /> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Visible" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" /> 
    </VisualState.Setters> 
</VisualState> 

Aber, Die Ergebnisse sind nicht das, was ich erwartet habe. Wie diese visuellen Zustände zusammengeführt werden?

ich versucht, mit: http://dotnetbyexample.blogspot.in/2016/02/an-adaptivetrigger-that-works-with.html

ich obige Lösung verwendet, so: Mein überarbeitet Code:

xmlns:Utils="using:DellApp.Utils" 
xmlns:converters="using:DellApp.Converters" 
xmlns:windowsStateTriggers="using:WindowsStateTriggers" 

Neu Staaten erstellt:

<VisualState.StateTriggers> 
    <windowsStateTriggers:CompositeStateTrigger> 
    <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000" /> 

    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen, 
    Converter={StaticResource BooleanNegationConverter}}" /> 
    </windowsStateTriggers:CompositeStateTrigger> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
    </VisualState.Setters> 
</VisualState> 

<VisualState x:Name="SplitViewCollapsed_SmallHeight"> 
    <VisualState.StateTriggers> 
    <windowsStateTriggers:CompositeStateTrigger> 
    <Utils:AdaptiveTrigger MaxWindowHeight="519" 
    MinWindowHeight="0" /> 
    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen, 
    Converter={StaticResource BooleanNegationConverter}}" /> 
    </windowsStateTriggers:CompositeStateTrigger> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
    </VisualState.Setters> 
</VisualState> 

<VisualState x:Name="SplitViewOpen_SmallHeight"> 
    <VisualState.StateTriggers> 
    <windowsStateTriggers:CompositeStateTrigger> 
    <Utils:AdaptiveTrigger MaxWindowHeight="519" 
    MinWindowHeight="0" /> 
    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen}" /> 
    </windowsStateTriggers:CompositeStateTrigger> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
    </VisualState.Setters> 
</VisualState> 

<VisualState x:Name="SplitViewOpen_LargeHeight"> 
    <VisualState.StateTriggers> 
    <windowsStateTriggers:CompositeStateTrigger> 
    <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000"/> 
    <StateTrigger IsActive="{Binding ElementName=LayoutSplitView, 
    Path=IsPaneOpen}" /> 
    </windowsStateTriggers:CompositeStateTrigger> 
    </VisualState.StateTriggers> 
    <VisualState.Setters> 
    <Setter Target="SellButtonGrid.Visibility" Value="Visible" /> 
    <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" /> 
    </VisualState.Setters> 
</VisualState> 

So, Was ich getan habe, war ich ded CompositeStateTrigger from WindowsStateTriggers aber ich bin nicht in der Lage, es auszulösen.

Answer 1

Ich habe eine Demo von Ihren Codes gemacht und reproduziert das Problem.Nach der Untersuchung fand ich die folgenden Probleme heraus:

1. Binding funktioniert nicht mit StateTrigger. Aber x:Bind funktioniert perfekt, so dass Sie stattdessen x:Bind verwenden können, und vergessen Sie nicht, das Mode=OneWay für x:Bind anzugeben.
2. Operator="And" müssen unter windowsStateTriggers:CompositeStateTrigger angegeben werden.

   <Page.Resources> 
       <converter:BooleanNegationConverter x:Name="BooleanNegationConverter" x:Key="BooleanNegationConverter"/> 
   </Page.Resources> 
   
   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup> 
         <VisualState> 
          <VisualState.StateTriggers> 
          <windowsStateTriggers:CompositeStateTrigger Operator="And">//use Operator='And' here 
            <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000" /> 
            <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen,Mode=OneWay,Converter={StaticResource BooleanNegationConverter}}" /> 
          </windowsStateTriggers:CompositeStateTrigger> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
          <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
         </VisualState.Setters> 
         </VisualState> 
   
         <VisualState x:Name="SplitViewCollapsed_SmallHeight"> 
          <VisualState.StateTriggers> 
           <windowsStateTriggers:CompositeStateTrigger Operator="And"> 
            <Utils:AdaptiveTrigger MaxWindowHeight="519" MinWindowHeight="0" /> 
            <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen,Mode=OneWay,Converter={StaticResource BooleanNegationConverter}}" /> 
           </windowsStateTriggers:CompositeStateTrigger> 
          </VisualState.StateTriggers> 
          <VisualState.Setters> 
           <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
           <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
          </VisualState.Setters> 
         </VisualState> 
   
         <VisualState x:Name="SplitViewOpen_SmallHeight"> 
          <VisualState.StateTriggers> 
           <windowsStateTriggers:CompositeStateTrigger Operator="And"> 
            <Utils:AdaptiveTrigger MaxWindowHeight="519" MinWindowHeight="0" /> 
            <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen}" /> 
           </windowsStateTriggers:CompositeStateTrigger> 
          </VisualState.StateTriggers> 
          <VisualState.Setters> 
           <Setter Target="SellButtonGrid.Visibility" Value="Collapsed" /> 
           <Setter Target="SellButtonGridAlternate.Visibility" Value="Visible" /> 
          </VisualState.Setters> 
         </VisualState> 
   
         <VisualState x:Name="SplitViewOpen_LargeHeight"> 
          <VisualState.StateTriggers> 
           <windowsStateTriggers:CompositeStateTrigger Operator="And"> 
            <Utils:AdaptiveTrigger MinWindowHeight="520" MaxWindowHeight="18000"/> 
            <StateTrigger IsActive="{x:Bind LayoutSplitView.IsPaneOpen}" /> 
           </windowsStateTriggers:CompositeStateTrigger> 
          </VisualState.StateTriggers> 
          <VisualState.Setters> 
           <Setter Target="SellButtonGrid.Visibility" Value="Visible" /> 
           <Setter Target="SellButtonGridAlternate.Visibility" Value="Collapsed" /> 
          </VisualState.Setters> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
   

   Und hier ist die Probe, die ich gemacht:

So sollte Ihre XAML wie folgt fest AdaptiveTriggerSample