我有以下情况： 我有一个包含两个列表视图的拆分视图。左侧的项目选择会触发正确的内容。如果窗口宽度小于960px，我想根据left-listview-selection隐藏其中一个列表。
宽于960px：
| 1 | 2 |
小于960px和selectedIndex == -1
| 1 |
小于960px且selectedIndex＆gt; = 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中，我正在使用NuGet上的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(); }
}
开始时一切看起来都很好，但是当我更改窗口大小时，触发器不会触发。知道我做错了什么吗？此外，我的转换器在启动时仅启动一次。
编辑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>
现在的问题是，宽度属性似乎根本不被使用，因为唯一选择的状态是＆＃34; narrowOverview＆＃34; （即使应用程序开始超过960）。绑定到Grid.Width的方式是错误的吗？
答案 0 :(得分：2)
使用CompositeStateTrigger。这是一个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中
在此处定义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
public class 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));
}
}