我想在开始时就说我刚刚开始使用Xaml冒险,所以请理解问题是否琐碎。
我要设计一个具有可变布局的用户控件,它由UWP-C ++ Cx App的单选按钮控制。 通常,用户控件具有4种可能的视图/状态。我在图片中显示了它:
以这种方式构造此控件的最佳方法是什么?我想将可观察的集合绑定到图片中可见的元素上可能很重要:
集合的元素0-主视图和元素1-4:较小的侧视图
谢谢!
答案 0 :(得分:1)
我们可以尝试使用用户控件和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);
}
}