Урок 7.2: Векторная графика в XAML

Модуль 7 ⏱️ ~2 часа

Shape элементы

<Canvas>
    <Rectangle Width="100" Height="50" 
               Fill="Blue" Stroke="Black" 
               Canvas.Left="10" Canvas.Top="10"/>
    
    <Ellipse Width="80" Height="80" 
             Fill="Red" 
             Canvas.Left="120" Canvas.Top="10"/>
    
    <Line X1="10" Y1="100" X2="200" Y2="100" 
          Stroke="Green" StrokeThickness="2"/>
</Canvas>

Path и геометрия

<Path Stroke="Black" StrokeThickness="2" Fill="Yellow">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="10,10">
                <LineSegment Point="50,50"/>
                <ArcSegment Point="100,10" 
                            Size="50,50" 
                            SweepDirection="Clockwise"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

Анимация в WPF

<Rectangle x:Name="rect" Width="50" Height="50" Fill="Blue">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="rect"
                                     Storyboard.TargetProperty="(Canvas.Left)"
                                     From="0" To="300" 
                                     Duration="0:0:2"
                                     RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>

Стили и шаблоны

<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="LightBlue"/>
        <Setter Property="FontSize" Value="16"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}"
                            CornerRadius="5">
                        <ContentPresenter HorizontalAlignment="Center"
                                        VerticalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

Практическое задание

Задание: Векторная графика в XAML

Создайте WPF приложение с векторной графикой
Добавьте различные фигуры, анимацию движения
Примените стили

Проверка знаний

Ответьте на вопросы, чтобы проверить, насколько хорошо вы усвоили материал:

1. Усвоили ли вы основные концепции урока?

Да, материал понятен
Частично понятен
Нужно повторить
Не понял

2. Готовы ли вы применить изученное на практике?

Нет, нужно еще изучить
Да, готов попробовать
Возможно
Не уверен

3. Что такое Path в XAML?

Элемент для рисования сложных векторных фигур
Путь к файлу
Маршрут анимации
Свойство элемента