為什么我的VisualStateTrigger沒有更新？

Question

我有以下情況：我有一個包含兩個列表視圖的拆分視圖。 左邊的項目選擇觸發右邊的內容。 如果窗口寬度小於960像素，我想根據left-listview-selection隱藏其中一個列表。

大於960px：

| 1 | 2 |

小於960px且selectedIndex == -1

| 1 |

小於960px且selectedIndex> = 0

| 2 |

我的方法是通過轉換器執行此操作：

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(); }
}

在我的xaml中，我以這種方式使用Windows上的WindowsStateTriggers庫中的CompareStateTrigger：

<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>

在開始時，這很好，但是當我在運行時更改Window-Size時，什么也沒有發生。 我什至將Debbuger.Break（）放在轉換器中，以檢查它是否起作用，但不起作用。 您有解決方案的想法嗎？

編輯：

我遵循了CompositeStateTrigger的描述，我的XAML現在看起來像這樣：

<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>

我的WidthConverter看起來像這樣：

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(); }
}

在開始時，一切看起來都很好，但是當我更改窗口大小時，觸發器不會觸發。 知道我在做什么錯嗎？ 另外，我的Converter在啟動時僅觸發一次。

編輯2：

我按照說明進行操作，並將第二個CompareStateTrigger綁定到Grid.Width。 這是我的XAML，它不再使用轉換器了：

<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>

現在的問題是，似乎完全不使用Width-Property，因為選擇的唯一狀態是“ narrowOverview”（即使應用程序啟動時寬度大於960）。 綁定到Grid.Width的方法是否錯誤？

Answer 1

為此使用CompositeStateTrigger。 這是一個鏈接

<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

在此處定義ViewModel屬性。 將Vm分配給構造函數中的DataContext

 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

公共類ViewModel：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));
        }
    }