VisualState AdaptiveTrigger 不能与 RelativePanel 一起使用答案

【问题标题】：VisualState AdaptiveTrigger not working with RelativePanelVisualState AdaptiveTrigger 不能与 RelativePanel 一起使用
【发布时间】：2016-01-07 14:36:20
【问题描述】：

我有以下 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 触发器看起来不适合我

【问题讨论】：

标签： xaml uwp

【解决方案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" />

它不介意它不适用于它必须去那里的第一个 Grid。

如果您想了解有关 VisualStates 的更多信息，我写了一篇关于此的文章：

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

【讨论】：