How to create dynamically changed grid? - xaml

Question

I want to say at the very beginning is that I'm just beginning my adventure with Xaml, so please be understanding if question is trivial.
I'm going to design a user control with a variable layout and it is controlled by radio button for UWP - C++Cx App.
Generally, the user control have 4 possible views / states. I show it in the picture:
What is the best way to construct this control in this way? Propably that's important that I want to bind observable collections to elements visible in the picture:
element 0 of collection - main View and elements 1-4 : smaller, side views
Thanks in advance!

Answer 1

We could try to use a User Control and VisualState to achieve it. You could divide your root Grid into two columns and put your main View into column 0, then divide column 1 into 6 rows and 6 columns.
First you could add your four views in the second column and set the Visibility of them as Collapsed. When you want to show the first layout which only contains the main view, you could set the value of MainView.(Grid.ColumnSpan) to 2 in the VisualState. When you want to show the main view and other small views, you need to change the MainView.(Grid.ColumnSpan) to 1 and re-layout those small views by changing its row and column. For example:
.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);
}
}