Различная структура макета XAML для одного файла CS в UWP - PullRequest
Новая
       4

Различная структура макета XAML для одного файла CS в UWP

0 голосов
/ 14 ноября 2018

Нам нужно создать 4 разных макета .xaml для одного и того же .cs в нашем приложении UWP.Структура этих макетов зависит от значения «questionType», которое исходит из db.

Каждый вариант макета должен содержать одинаковые элементы управления, но в разных позициях (т. Е. Каждый вариант должен содержать одно изображение, один richTextEditor и radioGroup, состоящие из 4 радиомодулей)

Например, если questionType = 1,изображение должно располагаться в левой части экрана, если questionType = 2, то оно должно располагаться в верхней части редактора форматированного текста, а радио должно располагаться горизонтально ...

Вещи, которые у нас уже естьрассмотрены и опробованы:

  1. До сих пор мы пробовали визуальный менеджер состояний, но, к сожалению, используя его, мы могли изменять только выравнивание, а не позиции элементов управления.

  2. Мы также проверили условный xaml, но, похоже, это только для адаптируемости версии.

  3. Панели с изменяемой видимостью.Но мы решили не идти с этим решением, потому что оно очень уродливо.

Любой, кто направит нас в правильном направлении, будет признателен.

Спасибо.

Редактировать: 

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

1 Ответ

0 голосов
/ 15 ноября 2018

VisualStateManager может изменять любое свойство, которое вы определяете для элемента, а не только выравнивания.

Для простоты я использую два Border s для представления 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>

И в коде сзади измените VisualState на основе значения questionType. 

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

Существуют альтернативные способы, такие как использование StackPanel для размещения элементов управления, изначально горизонтально ориентированных, и изменение его на вертикально ориентированное в другом визуальном состоянии.

...