通过 visualState 触发器更改 WrapGrid 的 maximumRowsOrColums 值不起作用答案

【问题标题】：Changing WrapGrid's maximumRowsOrColums value by visualState triggers doesn't work通过 visualState 触发器更改 WrapGrid 的 maximumRowsOrColums 值不起作用
【发布时间】：2015-10-04 10:36:46
【问题描述】：

我正在为我的 win 10 通用应用程序制作自适应布局。出于某种原因，当我尝试在 visualState 触发器中更改 wrapGrid 的 maximumRowsOrColumns 值时，它无法正常工作。

如果用户更改窗口大小，它实际上可以工作，但是在启动程序时，adaptiveTrigger 似乎对该值没有影响。

这里有一些代码：

<Hub>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="WrapPanel.MaximumRowsOrColumns" Value="3" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="narrowView">
                <VisualState.Setters>
                    <Setter Target="WrapPanel.MaximumRowsOrColumns" Value="2" />
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <HubSection>
        <DataTemplate>
            <GridView>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Horizontal"
                                  x:Name="WrapPanel"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
                <GridViewItem>
                    <Rectangle Width="250" Height="100" Fill="Red" Margin="6" />
                </GridViewItem>
                <GridViewItem>
                    <Rectangle Width="250" Height="100" Fill="Yellow" Margin="6" />
                </GridViewItem>
                <GridViewItem>
                    <Rectangle Width="250" Height="100" Fill="Green" Margin="6" />
                </GridViewItem>
                <GridViewItem>
                    <Rectangle Width="250" Height="100" Fill="Blue" Margin="6" />
                </GridViewItem>
            </GridView>
        </DataTemplate>
    </HubSection>
</Hub>

【问题讨论】：

标签： c# xaml windows-10 universal visualstates

【解决方案1】：

如果您希望触发器在启动时工作，您可以尝试强制应用以特定宽度和高度启动。这样就可以触发您的视觉状态。以下是您需要放入 yourfile.xaml.cs 的 sn-p：

ApplicationView.PreferredLaunchWindowingMode != ApplicationViewWindowingMode.Auto;
ApplicationView.PreferredLaunchViewSize = new Size { Width = 600, Height = 500 };
ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

另外一个好的编码习惯是从你的标签中取出你的 Visual State Manager XAML 并将它们放在你的代码末尾（但在标签内）

    <Hub>
        <HubSection x:Name="HubSection" Header="Test">
            <DataTemplate>
                <GridView>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid Orientation="Horizontal"
                              x:Name="WrapPanel1" MaximumRowsOrColumns="3"/>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridViewItem >
                        <Rectangle Width="250" Height="100" Fill="Red" Margin="6" />
                    </GridViewItem>
                    <GridViewItem>
                        <Rectangle Width="250" Height="100" Fill="Yellow" Margin="6" />
                    </GridViewItem>
                    <GridViewItem>
                        <Rectangle Width="250" Height="100" Fill="Green" Margin="6" />
                    </GridViewItem>
                    <GridViewItem>
                        <Rectangle Width="250" Height="100" Fill="Blue" Margin="6" />
                    </GridViewItem>
                    <GridViewItem>
                        <Rectangle Width="250" Height="100" Fill="Orange" Margin="6" />
                    </GridViewItem>
                </GridView>
            </DataTemplate>
        </HubSection>
    </Hub>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="wideView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="WrapPanel1.MaximumRowsOrColumns" Value="3"/>
                    <Setter Target="HubSection.Header" Value="WideView" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="narrowView">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="WrapPanel1.MaximumRowsOrColumns" Value="2" />
                    <Setter Target="HubSection.Header" Value="Vertical" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

【讨论】：