Question

我正在尝试为Windows Universal Platform制作自适应UI。我目前有一个Visual State Manager，当宽度大于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>

Answer 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>

Answer 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>

XAML UI中的自适应列

2 个答案: