在 Xaml 的可视状态管理器中设置 Grid width = "*"

Question

我正在尝试构建一个 UWP 应用，该应用使用 Hub 组件在宽模式（默认）下显示 2 个 HubSection，然后在窄模式下切换为仅显示一个 HubSection

我的 HubSection 定义如下：

    <Hub>
        <HubSection x:Name="Column1" Header="section 1" Background="Cornsilk">
        </HubSection>
        <HubSection x:Name="Column2" Header="section 2" Background="Chocolate">
        </HubSection>
    </Hub>

我的视觉状态管理器是这样定义的：

        <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates">
            <VisualState x:Name="DefaultState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Column1.Width" Value="500" />
                    <Setter Target="Column2.Width" Value="700" />

                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="Column1.Width" Value="*" /> <--- This line doesn't work as * is not a number
                    <Setter Target="Column2.Width" Value="0" />

                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

问题是如何在可视状态管理器中将组件的宽度设置为 * 或“使用所有可用空间”？

Answer 1

不确定 HubControl，但我对普通 Grid 做了同样的事情（隐藏列）。

来源：https://github.com/AppCreativity/Kliva/blob/master/src/Kliva/Views/MainPage.xaml#L75

我需要给列定义一个名称并在可视状态管理器中使用它们