2016-01-07 51 views
1

工作,我有以下XAML的VisualState AdaptiveTrigger不RelativePanel

<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觸發器看起來不會觸發我

回答

2

直到它發生變化,附加屬性VisualStateManager.VisualStateGroups必須出現在您的第一個網格的第一個UIElement爲了工作。

<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

相關問題