VisualStateManager中的UWP多個VisualState觸發器

Question

我正在創建Windows通用應用程序

我想做結合3列的布局。 每列顯示不同的信息。

第一列包含ListView 。 如果您選擇一個項目， 第二欄應顯示。

第二列還包含ListView 。 如果選擇一個項目，則應顯示第三個欄。

第三列中顯示了一些信息。

我只需要顯示一些信息的列即可（空白列隱藏）。 我也想添加響應功能。 因此，在移動設備上應僅顯示優先級最高的一列。

這是一個例子

桌面（開始）：

| 1 |

桌面（單擊第一個ListView）：

| 1 | 2 |

桌面（單擊第二個ListView）：

| 1 | 2 | 3 |

中移動（開始）：

| 1 |

桌面（單擊第一個ListView）：

| 2 |

桌面（單擊第二個ListView）：

| 3 |

所以我想用兩個StateTriggers創建VisualState 。

像這樣：

<VisualState x:Name="VSShowThird">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
        <StateTrigger IsActive="{Binding Path=ShowThirdColumn}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Visible" />
        <Setter Target="ThirdColumn.Visibility" Value="Visible" />
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="VSShowSecond">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
        <StateTrigger IsActive="{Binding Path=ShowSecondColumn}" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Visible" />
        <Setter Target="ThirdColumn.Visibility" Value="Collapsed" />
    </VisualState.Setters>
</VisualState>
<VisualState x:Name="VSShowFirst">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="750" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="FirstColumn.Visibility" Value="Visible" />
        <Setter Target="SecondColumn.Visibility" Value="Collapsed" />
        <Setter Target="ThirdColumn.Visibility" Value="Collapsed" />
    </VisualState.Setters>
</VisualState>

但是它不能正常工作。

您能建議我任何解決方案嗎？

非常感謝。

Answer 1

我創建了這個觸發器，然后我

public class AdaptiveTriggerWithState : AdaptiveTrigger
{
    private double _minWindowHeightProperty;
    private double _minWindowWidthProperty;
    private const int INACTIVE_STATE_SIZE = 10000;

    public static DependencyProperty IsActiveProperty = 
        DependencyProperty.Register(
                                "IsActive", 
                                typeof(bool), 
                                typeof(AdaptiveTriggerWithState), 
                                new PropertyMetadata(default(bool), OnIsActive_Changed));

    private static void OnIsActive_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var instance = (AdaptiveTriggerWithState)d;
        instance.IsActive = (bool)e.NewValue;
    }

    public bool IsActive
    {
        get { return (bool)GetValue(IsActiveProperty); }
        set
        {
            SetValue(IsActiveProperty, value);
            SetValue(MinWindowHeightProperty, (IsActive ? this._minWindowHeightProperty : INACTIVE_STATE_SIZE));
            SetValue(MinWindowWidthProperty, (IsActive ? this._minWindowWidthProperty : INACTIVE_STATE_SIZE));
        }
    }

    public new System.Double MinWindowHeight
    {
        get { return (Double)GetValue(MinWindowHeightProperty); }
        set
        {
            this._minWindowHeightProperty = value;
            SetValue(MinWindowHeightProperty, (IsActive ? this._minWindowHeightProperty : INACTIVE_STATE_SIZE));
        }
    }
    public new System.Double MinWindowWidth
    {
        get { return (Double)GetValue(MinWindowWidthProperty); }
        set
        {
            this._minWindowWidthProperty = value;
            SetValue(MinWindowWidthProperty, (IsActive ? this._minWindowWidthProperty : INACTIVE_STATE_SIZE));
        }
    }


}