如何创建动态更改的网格？

问题描述

我想在开始时就说我刚刚开始使用Xaml冒险，所以请理解问题是否琐碎。

我要设计一个具有可变布局的用户控件，它由UWP-C ++ Cx App的单选按钮控制。 通常，用户控件具有4种可能的视图/状态。我在图片中显示了它：

以这种方式构造此控件的最佳方法是什么？我想将可观察的集合绑定到图片中可见的元素上可能很重要：

集合的元素0-主视图和元素1-4：较小的侧视图

谢谢！

解决方法

我们可以尝试使用用户控件和VisualState来实现它。您可以将根Grid分为两列，然后将主View放入第0列，然后将第1列分为6行和6列。

首先，您可以在第二列中添加四个视图，并将其“可见性”设置为“已折叠”。当要显示仅包含主视图的第一个布局时，可以在VisualState中将MainView.(Grid.ColumnSpan)的值设置为2。当要显示主视图和其他小视图时，需要将MainView。（Grid.ColumnSpan）更改为1，并通过更改其行和列来重新布局这些小视图。例如：

.UserControl.xaml：

<Grid x:Name="RootGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid x:Name="MainView" Background="Gray">
        <StackPanel>
            <RadioButton
                x:Name="firstrb"
                Margin="10"
                Click="rb_Click"
                Content="First Layout" />
            <RadioButton
                x:Name="secondrb"
                Margin="10"
                Click="rb_Click"
                Content="Second Layout" />
            <RadioButton
                x:Name="thirdrb"
                Margin="10"
                Click="rb_Click"
                Content="Third Layout" />
            <RadioButton
                x:Name="fourthrb"
                Margin="10"
                Click="rb_Click"
                Content="Fourth Layout" />
        </StackPanel>
    </Grid>
    <Grid x:Name="SideView" Visibility="Collapsed">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel
            x:Name="View1"
            Background="Red"
            Visibility="Collapsed" />
        <StackPanel
            x:Name="View2"
            Background="Yellow"
            Visibility="Collapsed" />
        <StackPanel
            x:Name="View3"
            Background="Blue"
            Visibility="Collapsed" />
        <StackPanel
            x:Name="View4"
            Background="Green"
            Visibility="Collapsed" />
    </Grid>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="FirstLayout">
                <VisualState.Setters>
                    <Setter Target="MainView.(Grid.ColumnSpan)" Value="2" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="SecondLayout">
                <VisualState.Setters>
                    <Setter Target="MainView.(Grid.Column)" Value="0" />
                    <Setter Target="SideView.(Grid.Column)" Value="1" />
                    <Setter Target="SideView.Visibility" Value="Visible" />
                    <Setter Target="View1.Visibility" Value="Visible" />
                    <Setter Target="View1.(Grid.Row)" Value="0" />
                    <Setter Target="View1.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View1.(Grid.Column)" Value="0" />
                    <Setter Target="View1.(Grid.ColumnSpan)" Value="6" />
                    <Setter Target="View2.Visibility" Value="Visible" />
                    <Setter Target="View2.(Grid.Row)" Value="3" />
                    <Setter Target="View2.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View2.(Grid.Column)" Value="0" />
                    <Setter Target="View2.(Grid.ColumnSpan)" Value="6" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="ThirdLayout">
                <VisualState.Setters>
                    <Setter Target="MainView.(Grid.Column)" Value="0" />
                    <Setter Target="SideView.(Grid.Column)" Value="1" />
                    <Setter Target="SideView.Visibility" Value="Visible" />
                    <Setter Target="View1.Visibility" Value="Visible" />
                    <Setter Target="View1.(Grid.Row)" Value="0" />
                    <Setter Target="View1.(Grid.RowSpan)" Value="2" />
                    <Setter Target="View1.(Grid.Column)" Value="0" />
                    <Setter Target="View1.(Grid.ColumnSpan)" Value="6" />
                    <Setter Target="View2.Visibility" Value="Visible" />
                    <Setter Target="View2.(Grid.Row)" Value="2" />
                    <Setter Target="View2.(Grid.RowSpan)" Value="2" />
                    <Setter Target="View2.(Grid.Column)" Value="0" />
                    <Setter Target="View2.(Grid.ColumnSpan)" Value="6" />
                    <Setter Target="View3.Visibility" Value="Visible" />
                    <Setter Target="View3.(Grid.Row)" Value="4" />
                    <Setter Target="View3.(Grid.RowSpan)" Value="2" />
                    <Setter Target="View3.(Grid.Column)" Value="0" />
                    <Setter Target="View3.(Grid.ColumnSpan)" Value="6" />
                </VisualState.Setters>
            </VisualState>
            
            <VisualState x:Name="FourthLayout">
                <VisualState.Setters>
                    <Setter Target="MainView.(Grid.Column)" Value="0" />
                    <Setter Target="SideView.(Grid.Column)" Value="1" />
                    <Setter Target="SideView.Visibility" Value="Visible" />
                    <Setter Target="View1.Visibility" Value="Visible" />
                    <Setter Target="View1.(Grid.Row)" Value="0" />
                    <Setter Target="View1.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View1.(Grid.Column)" Value="0" />
                    <Setter Target="View1.(Grid.ColumnSpan)" Value="3" />
                    <Setter Target="View2.Visibility" Value="Visible" />
                    <Setter Target="View2.(Grid.Row)" Value="0" />
                    <Setter Target="View2.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View2.(Grid.Column)" Value="3" />
                    <Setter Target="View2.(Grid.ColumnSpan)" Value="3" />
                    <Setter Target="View3.Visibility" Value="Visible" />
                    <Setter Target="View3.(Grid.Row)" Value="3" />
                    <Setter Target="View3.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View3.(Grid.Column)" Value="0" />
                    <Setter Target="View3.(Grid.ColumnSpan)" Value="3" />
                    <Setter Target="View4.Visibility" Value="Visible" />
                    <Setter Target="View4.(Grid.Row)" Value="3" />
                    <Setter Target="View4.(Grid.RowSpan)" Value="3" />
                    <Setter Target="View4.(Grid.Column)" Value="3" />
                    <Setter Target="View4.(Grid.ColumnSpan)" Value="3" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

.UserControl.xaml.cpp：

void AppCX::UserControl::rb_Click(Platform::Object^ sender,Windows::UI::Xaml::RoutedEventArgs^ e)
{
    RadioButton^ rb = (RadioButton^)sender;

    if (rb->Name == "firstrb")
    {
        VisualStateManager::GoToState(this,"FirstLayout",false);
    }

    if (rb->Name == "secondrb")
    {
        VisualStateManager::GoToState(this,"SecondLayout",false);
    }

    if (rb->Name == "thirdrb")
    {
        VisualStateManager::GoToState(this,"ThirdLayout",false);
    }

    if (rb->Name == "fourthrb")
    {
        VisualStateManager::GoToState(this,"FourthLayout",false);
    }
}