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" />

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

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

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

VisualState AdaptiveTrigger不使用RelativePanel

1 个答案: