如何使CompositeStateTrigger與AdaptiveTrigger和DeviceFamilyStateTrigger一起使用UWP

Question

我正在嘗試使AdaptiveTrigger和DeviceFamilyStateTrigger與CompositeStateTrigger一起使用。

發現這個useful link它引導我，但仍然無法使其工作

我創建了一個示例項目在GitHub上重現my issue here。

僅供參考，這裏是我的XAML。我錯過了什麼？

<Grid Background="AliceBlue" x:Name="gridRoot"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup > 
      <VisualState x:Name="narrow"> 
       <VisualState.StateTriggers> 
        <triggers:CompositeStateTrigger Operator="And"> 
         <mytrigger:AdaptiveTrigger MinWindowWidth="0" MaxWindowHeight="520" /> 
         <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
        </triggers:CompositeStateTrigger> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="textBlock.Text" Value="Desktop is narrow" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="medium"> 
       <VisualState.StateTriggers> 
        <triggers:CompositeStateTrigger Operator="And"> 
         <mytrigger:AdaptiveTrigger MinWindowWidth="521" MaxWindowHeight="1199" /> 
         <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
        </triggers:CompositeStateTrigger> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="textBlock.Text" Value="Desktop is medium width" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="wide"> 
       <VisualState.StateTriggers> 
        <triggers:CompositeStateTrigger Operator="And"> 
         <mytrigger:AdaptiveTrigger MinWindowWidth="1200"/> 
         <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
        </triggers:CompositeStateTrigger> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="textBlock.Text" Value="Desktop is wide" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Grid x:Name="gridText"> 
     <TextBlock x:Name="textBlock" FontSize="40" Text="My Text Block" Style="{StaticResource HeaderTextBlockStyle}" FontWeight="ExtraBold"/> 
    </Grid> 

</Grid> 

Answer 1

您的代碼幾乎是正確的。這裏的問題是你在AdaptiveTrigger中設置了錯誤的屬性。在AdaptiveTrigger中，我們應該設置MinWindowWidth和MaxWindowWidth但不是MaxWindowHeight。

所以你可以改變你的代碼如下，它應該能夠工作。

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup> 
     <VisualState x:Name="narrow"> 
      <VisualState.StateTriggers> 
       <triggers:CompositeStateTrigger Operator="And"> 
        <mytrigger:AdaptiveTrigger MaxWindowWidth="520" MinWindowWidth="0" /> 
        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
       </triggers:CompositeStateTrigger> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="textBlock.Text" Value="Desktop is narrow" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="medium"> 
      <VisualState.StateTriggers> 
       <triggers:CompositeStateTrigger Operator="And"> 
        <mytrigger:AdaptiveTrigger MaxWindowWidth="1199" MinWindowWidth="521" /> 
        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
       </triggers:CompositeStateTrigger> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="textBlock.Text" Value="Desktop is medium width" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="wide"> 
      <VisualState.StateTriggers> 
       <triggers:CompositeStateTrigger Operator="And"> 
        <mytrigger:AdaptiveTrigger MinWindowWidth="1200" /> 
        <triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" /> 
       </triggers:CompositeStateTrigger> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="textBlock.Text" Value="Desktop is wide" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>