Язык программирования C#9 и платформа .NET5

Троелсен Эндрю

Работа с редактором трансформаций Visual Studio

В предыдущем примере разнообразные трансформации применялись за счет ручного ввода разметки и написания кода С#. Наряду с тем, что поступать так вполне удобно, последняя версия Visual Studio поставляется со встроенным редактором трансформаций. Вспомните, что получателем служб трансформаций может быть любой элемент пользовательского интерфейса, в том числе диспетчер компоновки, содержащий различные элементы управления. Для демонстрации работы с редактором трансформаций Visual Studio будет создан новый проект приложения WPF по имени

FunWithTransforms

.

Построение

начальной компоновки

Первым делом разделите первоначальный элемент

Grid

на две колонки с применением встроенного редактора сетки (точные размеры колонок роли не играют). Далее отыщите в панели инструментов элемент управления

StackPanel

и добавьте его так, чтобы он занял все пространство первой колонки

Grid

; затем добавьте в панель

StackPanel

три элемента управления

Button

:

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<StackPanel Grid.Row="0" Grid.Column="0">

<Button Name="btnSkew" Content="Skew" Click="Skew"/>

<Button Name="btnRotate" Content="Rotate" Click="Rotate"/>

<Button Name="btnFlip" Content="Flip" Click="Flip"/>

</StackPanel>

</Grid>

Добавьте обработчики событий для кнопок:

private void Skew(object sender, RoutedEventArgs e)

{

}

private void Rotate(object sender, RoutedEventArgs e)

{

}

private void Flip(object sender, RoutedEventArgs e)

{

}

Чтобы завершить пользовательский интерфейс, создайте во второй колонке элемента

Grid

произвольную графику (используя любой прием, представленный ранее в главе). Вот разметка, применяемая в данном примере:

<Canvas x:Name="myCanvas" Grid.Column="1" Grid.Row="0">

<Ellipse HorizontalAlignment="Left" VerticalAlignment="Top"

Height="186" Width="92" Stroke="Black"

Canvas.Left="20" Canvas.Top="31">

<Ellipse.Fill>

<RadialGradientBrush>

<GradientStop Color="#FF951ED8" Offset="0.215"/>

<GradientStop Color="#FF2FECB0" Offset="1"/>

</RadialGradientBrush>

</Ellipse.Fill>

</Ellipse>

<Ellipse HorizontalAlignment="Left" VerticalAlignment="Top"

Height="101" Width="110" Stroke="Black"

Canvas.Left="122" Canvas.Top="126">

<Ellipse.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FFB91DDC" Offset="0.355"/>

<GradientStop Color="#FFB0381D" Offset="1"/>

</LinearGradientBrush>

</Ellipse.Fill>

</Ellipse>

</Canvas>

Окончательная

компоновка показана на рис. 26.10.

Применение трансформаций на этапе проектирования

Как упоминалось ранее, IDE-среда Visual Studio предоставляет встроенный редактор трансформаций, который можно найти в окне Properties. Раскройте раздел Transform (Трансформация), чтобы отобразить области RenderTransform и LayoutTransform редактора (рис. 26.11).

Подобно разделу Brush раздел Transform предлагает несколько вкладок, предназначенных для конфигурирования разнообразных типов графической трансформации текущего выбранного элемента. В табл. 26.6 описаны варианты трансформации, доступные на этих вкладках (в порядке слева направо).

Испытайте каждую из описанных трансформаций,используя в качестве цели специальную фигуру (для отмены выполненной операции просто нажимайте <Ctrl+Z>). Как и многие другие аспекты раздела Transform окна Properties, каждая трансформация имеет уникальный набор параметров конфигурации, которые должны стать вполне понятными, как только вы просмотрите их. Например, редактор трансформации Skew позволяет устанавливать значения скоса х и у, а редактор трансформации Flip дает возможность зеркально отображать относительно оси х или у и т.д.

Трансформация холста в коде

Реализации обработчиков для всех кнопок будут более или менее похожими. Мы сконфигурируем объект трансформации и присвоим его объекту

myCanvas

. Затем после запуска приложения можно будет щелкать на кнопке, чтобы просматривать результат применения трансформации. Ниже приведен полный код обработчиков (обратите внимание на установку свойства

LayoutTransform

, что позволяет фигурам позиционироваться относительно родительского контейнера):