Warum wird mein VisualStateTrigger nicht aktualisiert?

Question

Ich habe folgende Situation: Ich habe eine Split-Ansicht mit zwei Listenansichten. Die Auswahl der linken Gegenstände löst den richtigen Inhalt aus. Wenn die Fensterbreite kleiner als 960px ist, würde ich gerne eine der Listen ausblenden, abhängig von der linken Listenansicht.

breiter als 960px:

| 1 | 2 |

kleiner als 960px und selectedIndex == -1

| 1 |

kleiner als 960px und selectedIndex> = 0

| 2 |

Mein Ansatz dies durch einen Konverter tut:

class WindowStateConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { 
     //Debugger.Break(); 
     if (Window.Current.Bounds.Width > 960) return 1; 
     if ((int)value == -1) return -1; 
     else return 0; 
    } 
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { throw new NotImplementedException(); } 
} 

in meiner XAML, ich fand auf diese Weise auf NuGet die CompareStateTrigger aus der WindowsStateTriggers Bibliothek mit:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     EntranceNavigationTransitionInfo.IsTargetElement="True"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="wideView"> 
       <VisualState.StateTriggers> 
        <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Converter={StaticResource wsc}, Mode=OneWay}" 
                CompareTo="1" Comparison="Equal"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="360"/> 
        <Setter Target="DetailColumn.Width" Value="*"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowDetailView"> 
       <VisualState.StateTriggers> 
        <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Converter={StaticResource wsc}, Mode=OneWay}" 
                CompareTo="0" Comparison="Equal"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="0"/> 
        <Setter Target="DetailColumn.Width" Value="*"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowListView"> 
       <VisualState.StateTriggers> 
        <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Converter={StaticResource wsc}, Mode=OneWay}" 
                CompareTo="-1" Comparison="Equal"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="*"/> 
        <Setter Target="DetailColumn.Width" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="ListColumn" Width="0"/> 
     <ColumnDefinition x:Name="DetailColumn" Width="*"/> 
    </Grid.ColumnDefinitions> 
    <ListView x:Name="SelectionList" 
       Background="LightBlue" 
       Grid.Column="0"/> 
    <ListView x:Name="DetailsList" 
       Background="LightGreen" 
       Grid.Column="1"/> 
</Grid> 

Am Anfang, das funktioniert gut, aber wenn ich die Window-Size in Runtime ändere, passiert nichts. Ich habe sogar Debbuger.Break() innerhalb meines Konverters platziert, um zu überprüfen, ob es etwas tut, aber das tut es nicht. Haben Sie eine Idee für eine Lösung?

EDIT:

ich die Beschreibung für CompositeStateTrigger folgte, sieht meine XAML wie dies jetzt:

<Page 
    x:Class="UWPTicketverwaltung.Views.OverviewPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:UWPTicketverwaltung.Views" 
    xmlns:triggers="using:WindowsStateTriggers" 
    xmlns:converters="using:UWPTicketverwaltung.Converters" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
    <Page.Resources> 
     <ResourceDictionary> 
      <converters:WidthConverter x:Key="screenWidth"/> 
     </ResourceDictionary> 
    </Page.Resources> 
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
      EntranceNavigationTransitionInfo.IsTargetElement="True"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="wideAll"> 
        <VisualState.StateTriggers> 
         <triggers:AdaptiveTrigger MinWindowHeight="960"/> 
         <!--<triggers:CompareStateTrigger Value="{x:Bind Converter={StaticResource screenWidth}, Mode=OneWay}" 
                 CompareTo="959" Comparison="GreaterThan"/>--> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="360"/> 
         <Setter Target="DetailColumn.Width" Value="*"/> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="narrowOverview"> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Mode=OneWay}" 
                  CompareTo="-1" Comparison="Equal"/> 
          <triggers:CompareStateTrigger Value="{x:Bind Converter={StaticResource screenWidth}, Mode=OneWay}" 
                  CompareTo="960" Comparison="LessThan"/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="*"/> 
         <Setter Target="DetailColumn.Width" Value="0"/> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="narrowDetails"> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Mode=OneWay}" 
                  CompareTo="-1" Comparison="GreaterThan"/> 
          <triggers:CompareStateTrigger Value="{x:Bind Converter={StaticResource screenWidth}, Mode=OneWay}" 
                  CompareTo="960" Comparison="LessThan"/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="0"/> 
         <Setter Target="DetailColumn.Width" Value="*"/> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition x:Name="ListColumn" Width="360"/> 
      <ColumnDefinition x:Name="DetailColumn" Width="*"/> 
     </Grid.ColumnDefinitions> 
     <ListView x:Name="SelectionList" 
        Background="LightBlue" 
        Grid.Column="0"/> 
     <ListView x:Name="DetailsList" 
        Background="LightGreen" 
        Grid.Column="1"/> 
    </Grid> 
</Page> 

Und mein WidthConverter sieht wie folgt aus:

public class WidthConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, string language) 
    { /*Debugger.Break();*/ return Window.Current.Bounds.Width; } 
    public object ConvertBack(object value, Type targetType, object parameter, string language) 
    { throw new NotImplementedException(); } 
} 

Beim Start alles sieht gut aus , aber wenn ich die Fenstergröße ändere, wird der Auslöser nicht ausgelöst. Irgendeine Idee, was ich falsch mache? Auch mein Converter wird beim Start nur einmal ausgelöst.

EDIT 2:

folgte ich die Anweisungen und Bound den zweiten CompareStateTrigger zum Grid.Width. Das ist mein XAML, es Konverter nicht mehr verwenden:

<Grid x:Name="MainGrid" 
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     EntranceNavigationTransitionInfo.IsTargetElement="True"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="wideAll"> 
       <VisualState.StateTriggers> 
        <triggers:CompareStateTrigger Value="{x:Bind MainGrid.Width, Mode=OneWay}" 
                CompareTo="959" Comparison="GreaterThan"/> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="420"/> 
        <Setter Target="DetailColumn.Width" Value="*"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowOverview"> 
       <VisualState.StateTriggers> 
        <triggers:CompositeStateTrigger Operator="And"> 
         <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Mode=OneWay}" 
                 CompareTo="-1" Comparison="Equal"/> 
         <triggers:CompareStateTrigger Value="{x:Bind MainGrid.Width, Mode=OneWay}" 
                 CompareTo="960" Comparison="LessThan"/> 
        </triggers:CompositeStateTrigger> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="*"/> 
        <Setter Target="DetailColumn.Width" Value="0"/> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowDetails"> 
       <VisualState.StateTriggers> 
        <triggers:CompositeStateTrigger Operator="And"> 
         <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex, Mode=OneWay}" 
                 CompareTo="-1" Comparison="GreaterThan"/> 
         <triggers:CompareStateTrigger Value="{x:Bind MainGrid.Width, Mode=OneWay}" 
                 CompareTo="960" Comparison="LessThan"/> 
        </triggers:CompositeStateTrigger> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="ListColumn.Width" Value="0"/> 
        <Setter Target="DetailColumn.Width" Value="*"/> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition x:Name="ListColumn" Width="420"/> 
     <ColumnDefinition x:Name="DetailColumn" Width="*"/> 
    </Grid.ColumnDefinitions> 
    <ListView x:Name="SelectionList" 
       Background="LightBlue" 
       Grid.Column="0"> 
     <!--<VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups>--> 
    </ListView> 
    <ListView x:Name="DetailsList" 
       Background="LightGreen" 
       Grid.Column="1"/> 
</Grid> 

Das Problem ist jetzt, dass die Breite-Liegenschaften scheinen gar nicht, da die einzigen Staat gewählten verwendet werden soll, die „narrowOverview“ (auch wenn Die App beginnt breiter als 960). Ist die Art der Bindung an die Grid.Width falsch?

Answer 1

Verwenden Sie CompositeStateTrigger für diese. hier ist ein link

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="MainGrid"> 

    <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="wideAll"> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex,Mode=OneWay}" 
                 CompareTo="-1" Comparison="GreaterThan"/> 
          <triggers:CompareStateTrigger Value="{x:Bind PageViewModel.ScreenWidth,Mode=OneWay}" 
                CompareTo="960" Comparison="GreaterThan"/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="420"/> 
         <Setter Target="DetailColumn.Width" Value="*"/> 
        </VisualState.Setters> 
       </VisualState> 
       <!--blue--> 
       <VisualState x:Name="narrowOverview"> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex,Mode=OneWay}" 
                 CompareTo="-1" Comparison="Equal"/> 
          <triggers:CompareStateTrigger Value="{x:Bind PageViewModel.ScreenWidth,Mode=OneWay}" 
                 CompareTo="960" Comparison="LessThan"/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="*"/> 
         <Setter Target="DetailColumn.Width" Value="0"/> 
        </VisualState.Setters> 
       </VisualState> 
       <!--Green--> 
       <VisualState x:Name="narrowDetails"> 
        <VisualState.StateTriggers> 
         <triggers:CompositeStateTrigger Operator="And"> 
          <triggers:CompareStateTrigger Value="{x:Bind SelectionList.SelectedIndex,Mode=OneWay}" 
                 CompareTo="-1" Comparison="GreaterThan"/> 
          <triggers:CompareStateTrigger Value="{x:Bind PageViewModel.ScreenWidth,Mode=OneWay}" 
                 CompareTo="960" Comparison="LessThan"/> 
         </triggers:CompositeStateTrigger> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="ListColumn.Width" Value="0"/> 
         <Setter Target="DetailColumn.Width" Value="*"/> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition x:Name="ListColumn" Width="420"/> 
      <ColumnDefinition x:Name="DetailColumn" Width="*"/> 
     </Grid.ColumnDefinitions> 
     <ListView x:Name="SelectionList" 
       Background="LightBlue" 
       Grid.Column="0" > 
     </ListView> 
     <ListView x:Name="DetailsList" 
       Background="LightGreen" 
       Grid.Column="1" /> 
    </Grid> 

MainPage.xaml.cs

Ansichtsmodell Eigenschaft definieren hier. Vergeben Vm zu Datacontext in Konstruktor

public sealed partial class MainPage : Page, INotifyPropertyChanged 
    { 
    ViewModel viewModel; 
    public ViewModel PageViewModel 
     { 
     get 
     { 
       return viewModel; 

     } 
     set 
     { 
     if(viewModel!=value) 
      { 
      viewModel= value; 
      OnPropertyChanged("PageViewModel"); 
      } 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

     protected void OnPropertyChanged(string propertyName) 
     { 
      // the new Null-conditional Operators are thread-safe: 
     this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  

     } 

public MainPage() 
{ 
           this.SizeChanged += MainPage_SizeChanged; 
           PageViewModel=(ViewModel) DataContext; 
} 

      private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) 
      { 
      PageViewModel.ScreenWidth =(int)  Window.Current.Bounds.Width; 
           Debug.WriteLine(Vm.ScreenWidth); 
      } 

      } 

Class1.cs

public class Ansichtsmodell: INotifyPropertyChanged {

 int screenWidth; 
     public int ScreenWidth 
     { 
      get 
      { 
       return screenWidth; 
      } 
      set 
      { 
       if(value!=screenWidth) 
       { 
        screenWidth = value; 
        OnPropertyChanged("ScreenWidth"); 
       } 
      } 

     } 

     public event PropertyChangedEventHandler PropertyChanged; 
     protected void OnPropertyChanged(string propertyName) 
     { 
      // the new Null-conditional Operators are thread-safe: 
      this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    }