XAML UI 中的自适应列答案

【问题标题】：Adaptive Column in XAML UIXAML UI 中的自适应列
【发布时间】：2016-04-29 04:22:45
【问题描述】：

我正在尝试为 Windows 通用平台制作自适应 UI。我目前有一个视觉状态管理器，当宽度大于 720 时显示用户控件。在外部网格中，我有 2 个相等的列。在一列中，我有一个 Listview，在另一列中，我有一个显示详细信息的用户控件。当宽度小于720时，如何使第二列消失？非常感谢所有帮助。这是一个示例。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="DetailsPage.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <ListView Name="lvElements">
    </ListView>

    <local:UCDetails Visibility="Collapsed" x:Name="DetailsPage" Grid.Column="1" />

</Grid>

【问题讨论】：

标签： xaml win-universal-app

【解决方案1】：

您可以为列提供名称：

    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="DetailColumn" Width="*"/>
        <ColumnDefinition x:Name="MasterColumn" Width="336"/>
    </Grid.ColumnDefinitions>

然后，只需更改宽度。

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates">
            <VisualState x:Name="Small">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.(Width)" Value="0"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Medium">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

【讨论】：

谢谢，这正是我所需要的

【解决方案2】：

当全局宽度小于 720 时，您可以使用新的视觉状态将第二列的宽度设置为 0。这是一个例子：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition x:Name="DetailColumn" Width="*" />
    </Grid.ColumnDefinitions>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="DetailsPage.Visibility" Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        <VisualState x:Name="Normal">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
            <Setter Target="DetailColumn.(Width)" Value="0"/>
                </VisualState.Setters>
        </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <ListView Name="lvElements">
    </ListView>

    <local:UCDetails Visibility="Collapsed" x:Name="DetailsPage" Grid.Column="1" />

</Grid>

【讨论】：