UWP: Новые контролы (часть 1). RelativePanel

Сегодня мы начнем с Вами обсуждать новые контролы для операционной системы Windows 10. Начнем мы с RelativePanel.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.ColumnSpan="2" 
               Text="This is a header" 
               Style="{ThemeResource HeaderTextBlockStyle}" />
    <Image Grid.Row="1" 
           MaxWidth="800"  
           Source="Assets\drone.jpg" 
           VerticalAlignment="Top" />
    <TextBlock Grid.Column="1" 
               Grid.Row="1" 
               Text="This is a text about drones."
               Margin="10,0,10,0" 
               TextWrapping="Wrap" />
</Grid>

В данном участке кода своеобразная сетка, в ячейках которой расположены 2 текстовых поля и картинка. Если мы запустим данный код — получим следующее:

Вроде как все выглядит довольно-таки прилично, но есть проблема, Windows 10 позволяет изменять размер окон, а так же дополнительно можно запустить это приложение на телефоне. По этому невооруженным глазом заметно, что у меня недостаточно места, чтобы показать изображение и текст на меньшем размере окна. Поэтому мне хотелось бы создать универсальный интерфейс, который я смог бы изменять динамически при нехватке места. Впринципе, нам попросту нужно поместить текст под изображением и VisualStateManager это лучший способ для этого. Но я использую Grid, у которого два столбца и две строки, а для меньших дисплеев мне нужна одна колонка и три рядка, которыми практически невозможно управлять в VisualStateManager даже для моего примера (реальные интерфейсы являются гораздо более сложным). Вот почему разработчики дублируют некоторые части интерфейса и просто работать с Visibility внутри VisualStateManager при  создании универсальных приложений для Windows 8.1.

Начиная с Windows 10 у разработчиков есть возможность использовать новый контейнер, который позволяет избежать проблем с сеткой — это RelativePanel. Давайте посмотрим на тот же пример, но с использованием RelativePanel.

<RelativePanel >
    <TextBlock Name="header" 
               Text="This is a header" 
               Style="{ThemeResource HeaderTextBlockStyle}" />
    <Image Name="image"
           MaxWidth="800"
           RelativePanel.Below="header"  
           Source="Assets\drone.jpg" />
    <TextBlock Name="text"
               Text="This is a text about drones." 
               Margin="10,0,10,0" 
               TextWrapping="Wrap" 
               RelativePanel.AlignTopWith="image" 
               RelativePanel.RightOf="image" />
</RelativePanel>

Как вы видите в случае RalativePanel можно объявить позицию встроенных элементов, использующих свойства зависимостей. Их очень легко переформатировать, используя VisualStateManager. Например, вы можете использовать следующий код, чтобы показать тот же интерфейс в один ряд:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="Normal">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="900" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="Mobile">
            <VisualState.Setters>
                <Setter Value="" Target="text.(RelativePanel.AlignTopWith)" />
                <Setter Value="image" Target="text.(RelativePanel.Below)" />
                <Setter Value="" Target="text.(RelativePanel.RightOf)" />
                <Setter Value="0,10,0,10" Target="text.Margin" />
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

После того, как окно меньше, чем 900 пикселей, текст будет перемещен ниже изображения. Обратите особое внимание, как объявлять свойства зависимостей в атрибуте Target.

Источник: UWP: New Controls (part 1 – RelativePanel)