VisualState AdaptiveTrigger не работает с RelativePanel

Question

У меня есть следующий XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid Name="MainView"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <RelativePanel Grid.Row="0">     
      <Slider Width="350" Name="ZoomSlider" Margin="10" Minimum="30" Maximum="200" Value="100" SnapsTo="Ticks" TickFrequency="10" 
        RelativePanel.AlignHorizontalCenterWithPanel="True" RelativePanel.AlignTopWithPanel="True" /> 

      <Button Width="100" Name="btn_prev" Margin="10" Click="btn_prev_Click" RelativePanel.LeftOf="ZoomSlider">Previous</Button> 
      <Button Width="100" Name="btn_next" Margin="10" Click="btn_next_Click" RelativePanel.RightOf="ZoomSlider">Next</Button> 
      <Button Width="100" Foreground="White" Background="DarkBlue" Name="btn_Extraspage" Content="Extra page" RelativePanel.RightOf="btn_next" RelativePanel.AlignVerticalCenterWith="btn_next" Click="btn_Extraspage_Click"/>    
     </RelativePanel> 
     <WebView Name="book_view" LoadCompleted="book_view_LoadCompleted" Grid.Row="1" Margin="5 5"></WebView> 
     <!-- Responsive VisualStates --> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="NormalStateReadView"> 
        <!-- VisualState to be triggered when window width is >=548 and <720 effective pixels --> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="720" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="btn_prev.(RelativePanel.LeftOf)" Value="ZoomSlider" /> 

         <Setter Target="btn_next.(RelativePanel.RightOf)" Value="ZoomSlider" /> 

         <Setter Target="btn_Extraspage.(RelativePanel.RightOf)" Value="btn_next" /> 
         <Setter Target="btn_Extraspage.(RelativePanel.AlignVerticalCenterWith)" Value="btn_next" /> 
        </VisualState.Setters> 
       </VisualState> 
       <VisualState x:Name="NarrowStateReadView"> 
        <VisualState.StateTriggers> 
         <AdaptiveTrigger MinWindowWidth="0" /> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <!--RelativePanel.Below="ZoomSlider" RelativePanel.AlignLeftWith="ZoomSlider"--> 
         <Setter Target="btn_prev.(RelativePanel.Below)" Value="ZoomSlider" /> 
         <Setter Target="btn_prev.(RelativePanel.AlignLeftWith)" Value="ZoomSlider" /> 

         <!--RelativePanel.LeftOf="btn_Extraspage" RelativePanel.AlignVerticalCenterWith="btn_prev"--> 
         <Setter Target="btn_next.(RelativePanel.LeftOf)" Value="btn_Extraspage" /> 
         <Setter Target="btn_next.(RelativePanel.AlignVerticalCenterWith)" Value="btn_prev" /> 


         <!--RelativePanel.Below="ZoomSlider" RelativePanel.AlignRightWith="ZoomSlider" RelativePanel.AlignVerticalCenterWith="btn_prev"--> 
         <Setter Target="btn_Extraspage.(RelativePanel.Below)" Value="ZoomSlider" /> 
         <Setter Target="btn_Extraspage.(RelativePanel.AlignRightWith)" Value="ZoomSlider" /> 
         <Setter Target="btn_Extraspage.(RelativePanel.AlignVerticalCenterWith)" Value="btn_prev" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
    </Grid> 

Я ожидаю, чтобы разместить кнопку Назад и следующую кнопку слева и справа от ползунка на широкий угол обзора

И место Предыдущая и следующая кнопка ниже ползунка влево и вправо на узком изображении

XAML проанализирован без ошибок, но эффект рендеринга не так ожидаемый. Ярлык NarrowStateReadview выглядит не срабатывающим для меня

Answer 1

До тех пор пока он не изменится, вложенное свойство VisualStateManager.VisualStateGroups должно появиться в первом UIElement в вашем случае первой Grid для работы.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="NormalStateReadView"> 
       <!-- VisualState to be triggered when window width is >=548 and <720 effective pixels --> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 

Это не значит, что это не относится к первой сетке, к которой он должен идти.

И если вы хотите получить больше информации о VisualStates я сделал статью о том, что:

http://www.codeproject.com/Articles/896974/Advanced-View-States-for-Windows-apps