C# UWP中一个CS文件的不同XAML布局结构

我们需要在UWP应用程序中为相同的.cs创建4个不同的.xaml布局。这些布局的结构取决于来自db的值“questionType”

布局的每个变体应包含相同的控件，但位于不同的位置。（即，每个变体应包含一个图像、一个richTextEditor和由4个收音机组成的radioGroup）

例如，如果questionType=1，则图像应位于屏幕左侧，如果questionType=2，则图像应位于富文本编辑器顶部，并且收音机应水平放置

我们已经考虑和尝试过的事情：

到目前为止，我们一直在尝试VisualStateManager，但不幸的是，通过使用它，我们只能更改控件的对齐方式，而不能更改控件的位置

我们还检查了条件xaml，但它似乎只是为了版本适应性

具有变化可见性的面板。但我们决定不采用这种解决方案，因为它非常丑陋

任何能为我们指引正确方向的人都将不胜感激

谢谢

编辑：

...             

VisualStateManager可以更改您在元素上定义的任何属性，而不仅仅是路线

为了简单起见，我使用了两个

边框

s来表示

图像

和

RichTextBox

。最初，图像位于左侧，然后我使用

VisualStateManager

转到另一个视觉状态，在该状态下，

图像

位于顶部。请注意，属性

（Grid.Column）

和

（Grid.Row）

的更改方式与

（FrameworkElement.HorizontalAlignment）

---

也有其他方法，例如使用StackPanel来承载控件（最初为水平方向），然后在其他视觉状态下将其更改为垂直方向。

使用VisualState，您可以轻松更改控件的位置。向我们展示您迄今为止所做的工作。@kennyzx请检查编辑后的问题。我们发现的唯一一个例子来自微软文档的网站。所以我们用这个作为参考。我们找不到如何做我在问题中解释的事情。在android中，我们可以编写if（…）{use activity1.xml}else{use activity2.xml}

<VisualState x:Name="Layout1">
       <Storyboard>
         <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
           Storyboard.TargetName="ContentRoot">
           ...             
         </ObjectAnimationUsingKeyFrames>          
       </Storyboard>
     </VisualState> 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /> 
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /> 
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Border x:Name="imageControl"
            Background="Red"
            Height="200" Width="200"
            Grid.Row="1" />
    <Border x:Name="richTextBoxControl"
            Background="Green"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Grid.Row="1" Grid.Column="1" />

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Layout1" />
            <VisualState x:Name="Layout2">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="imageControl"
                        Storyboard.TargetProperty="(Grid.Column)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                    </ObjectAnimationUsingKeyFrames>    
                    <ObjectAnimationUsingKeyFrames
                        Storyboard.TargetName="imageControl"
                        Storyboard.TargetProperty="(Grid.Row)">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>            
    </VisualStateManager.VisualStateGroups>
</Grid>    

if (questionType == 1) 
   return; //Layout1 is the default state
else if (questionType ==  2)
    VisualStateManager.GoToState(this, "Layout2", true);