UWP 中一个 CS 文件的不同 XAML 布局结构答案

【问题标题】：Different XAML Layout Structure for one CS file in UWPUWP 中一个 CS 文件的不同 XAML 布局结构
【发布时间】：2018-11-15 14:00:46
【问题描述】：

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

布局的每个变体都应包含相同的控件，但位置不同。（即每个变体应包含一个图像、一个 RichTextEditor 和一个包含 4 个无线电的 radioGroup）

例如如果 questionType=1，图片应该放在屏幕左侧，如果 questionType=2，那么它应该放在富文本编辑器的顶部，并且收音机应该水平放置...

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

到目前为止，我们已经尝试过可视化状态管理器，但不幸的是，使用它我们只能更改控件的对齐方式而不是位置。
我们还检查了条件 xaml，但它似乎只是为了版本适应性。
可见性变化的面板。但我们决定不采用这种解决方案，因为它非常丑陋。

任何将我们引导到正确方向的人，我们将不胜感激。

谢谢。

编辑：

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

【问题讨论】：

借助 VisualState，您可以轻松更改控件的位置。向我们展示您到目前为止所做的工作。
@kennyzx 请检查已编辑的问题。我们发现的唯一示例来自 Microsoft Docs 站点。所以我们用这个作为参考。我们找不到像我在问题中解释的那样做的事情。在android中我们可以写 if(...){use activity1.xml} else {use activity2.xml}

标签： c# uwp uwp-xaml

【解决方案1】：

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

为了简单起见，我使用两个Borders 来表示Image 和RichTextBox。最初图像位于左侧，然后我使用VisualStateManager 进入另一个视觉状态，其中Image 位于顶部。请注意，(Grid.Column) 和 (Grid.Row) 属性的更改与 (FrameworkElement.HorizontalAlignment) 一样

<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>

在后面的代码中，根据值questionType 更改VisualState。

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

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

【讨论】：