Rectangle и Ellipse

WPF --- Графика и анимация WPF --- Rectangle и Ellipse

Классы Rectangle и Ellipse представляют две простейшие фигуры. Чтобы создать каждую из них, установите знакомые свойства Height и Width (унаследованные от FrameworkElement) для определения размера фигуры, а затем свойство Fill или Stroke (или оба), чтобы сделать фигуру видимой. Можно также использовать такие свойства, как MinHeight, MinWidth, Horizontal Alignment, Vertical Alignment и Margin.

Если не установить свойство Stroke или Fill, фигура вообще не появится на экране.

Ниже приведен пример размещения эллипса над прямоугольником с использованием контейнера StackPanel:

<StackPanel>
        <Ellipse Fill="LightBlue" Stroke="Green" StrokeThickness="2"
                 Height="50" Width="100" Margin="5"></Ellipse>
        <Rectangle Fill="Yellow" Stroke="Blue" Margin="5" Height="50"
                   Width="100"></Rectangle>
</StackPanel>

Класс Ellipse не добавляет новых свойств. Класс Rectangle добавляет два свойства: RadiusX и RadiusY. Когда они установлены в ненулевые значения, создаются симпатичные скругленные углы.

Свойства RadiusX и RadiusY можно трактовать как описание эллипса, используемого для размещения в углах прямоугольника. Например, если установить значения обоих свойств в 10, то WPF нарисует углы как части окружности шириной в 10 единиц.

По мере увеличения радиуса все большая часть прямоугольника будет закруглена. При увеличении RadiusY в большей мере, чем RadiusX, углы будут больше закруглены с левой и правой сторон и меньше — с верхней и нижней. Если увеличить свойство RadiusX до размера ширины прямоугольника, a RadiusY — до размера его высоты, прямоугольник превратится в обычный эллипс.

На рисунке показано несколько прямоугольников со скругленными углами:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="225">
    <Window.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Shape.Stroke" Value="LightBlue"></Setter>
            <Setter Property="Shape.StrokeThickness" Value="2"></Setter>
            <Setter Property="Margin" Value="5"></Setter>
            <Setter Property="Height" Value="50"></Setter>
            <Setter Property="Width" Value="100"></Setter>
            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel HorizontalAlignment="Left">
        <Label Margin="5,5,0,0">CornerRadius = 5</Label>
        <Rectangle RadiusX="5" RadiusY="5"></Rectangle>
        <Label Margin="5,5,0,0">CornerRadius = 10</Label>
        <Rectangle RadiusX="10" RadiusY="10"></Rectangle>
        <Label Margin="5,5,0,0">CornerRadiusX = 25, CornerRadiusY = 10</Label>
        <Rectangle RadiusX="25" RadiusY="10"></Rectangle>
        <Label Margin="5,5,0,0">CornerRadiusX = 100, CornerRadiusY = 60</Label>
        <Rectangle RadiusX="100" RadiusY="60"></Rectangle>
    </StackPanel>
</Window>