Kształty – inaczej prymitywy graficzne pozwalają na tworzenie prostych obiektów graficznych takich jak: linie, elipsy, prostokąty, wielokąty itd. Co odróżnia ich od zwykłych elementów graficznych znanych np. z OpenGL? Każdy kształt to klasa która:
Sama się maluje i tworzy – nie musimy obsługiwać zdarzeń znanych np. z WindowsForms (Paint)
Ich układ i właściwości są takie jak innych elementów WPF
Wspierają te same zdarzenia co inne elementy – nie musimy nakładać pracy aby korzystać z zdarzeń kliknięcia czy też naciśnięcia przycisku
Właściwości klasy Shape:
Fill – ustawia pędzel odpowiedzialny za wypełnienie kształtu
Stroke – ustawia pędzel odpowiedzialny za krawędź kształtu
StrokeThickness – ustawia grubość obramowania
StrokeStartLineCap oraz StrokeEndLineCap – determinuje początek i koniec malowanego kształtu (tylko dla linii – inne kształty są zamknięte)
Strech – decyduje w jaki sposób kształt wypełnia dostępne miejsce
DefiningGeometry – pozwala na ustawienie rozmiarów kształtu
GeometryTransform – pozwala na przypisanie transformacji n. obrót
RenderedGeometry – udostępnia finalnie renderowany obiekt
Prymitywy graficzne:
Line – linia
Rectangle – prostokąt
Ellipse – elipsa
Polyline – tworzy układ linii na podstawie wartości x,y
Polygon - wielokąt
Skalowanie kształtów
Aby w łatwy sposób skalować kształt można użyć o tego celu kontrolki Viewbox. Prosty przykład:
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="250">
<Grid>
<Viewbox HorizontalAlignment="Left">
<Canvas Width="200" Height="200">
<Ellipse Canvas.Left="20" Canvas.Top="20" Fill="Red" Width="20" Height="20" />
</Canvas>
</Viewbox>
</Grid>
</Window>
Powiększając okno powiększa się wraz z nim namalowane koło.
Pędzle
Wypełniają wnętrze kształtów. Kilka faktów nt. pędzli:
Wspierają powiadamianie o zmianie stanu – pozwala to na automatyczne przemalowywanie elementów używających dany pędzel
Umożliwiają tworzenie częściowej przeźroczystości (wystarczy ustawić właściwość Opacity)
Klasa SystemBrushes daje nam dostęp do aktualnie używanych przez system Windows pędzli
Do dyspozycji mamy kilka rodzajów pędzli:
SolidColorBrush – maluje jednolity kolor
LinearFradientBrush – pozwala na tworzenie gradientu
RdialGradientBrush – podobny do poprzedniego z tym że tworzy gradient w formie koła
ImageBrush – maluje za pomocą obrazka
DrawingBrush – maluje dany obszar za pomocą kształtów lub zdefiniowanej bitmapy
VisualBrush – pozwala wykorzystać wygląd innych kontrolek podczas malowania (np. efekt odbicia w przypadku przycisku)
BitmapCacheBrush – podobny w działaniu do VisualBrush jednak łatwiejszy w użyciu w przypadku potrzeby użycia takiego pędzla w kilku miejscach programu
Przykład użycia niektórych pędzli:
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="250">
<Grid>
<Canvas>
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" >
<Rectangle.Fill>
<SolidColorBrush Color="Blue" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Canvas.Left="70" Canvas.Top="10" Width="50" Height="50" >
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.3" />
<GradientStop Color="Blue" Offset="0.6" />
<GradientStop Color="Coral" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Canvas.Left="130" Canvas.Top="10" Width="50" Height="50" >
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="1">
<GradientStop Color="Yellow" Offset="0" />
<GradientStop Color="Red" Offset="0.3" />
<GradientStop Color="Blue" Offset="0.6" />
<GradientStop Color="Coral" Offset="1" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
</Grid>
</Window>
Transformacje
Pozwalają na malowanie elementów graficznych i zmianę sposobu ich ułożenia np. obrócenie.
Transformacje z których możemy korzystać w WPFie:
TranslateTransform – wykorzystujemy jeżeli chcemy dany obiekt namalować w innym miejscu (parametry X,Y)
RotateTransform – pozwala obrócić dany obiekt (Angle, CenterX, CenterY)
ScaleTransform – skaluje obiekt (ScaleX, ScaleY, CenterX, CenterY)
SkewTransform – pozwala pochylić obiekt
MatrixTransform – pozwala modyfikować współrzędne za pomocą dostarczonej macierzy.
TransformGroup – pozwala na ustawienie wszystkich transformacji w jednym czasie. Kolejność transformacji wpływa na wynik ostatecznego wyglądu figury.
Przykład odwrócenia:
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="250" Width="250">
<Grid>
<Canvas>
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="50" Height="50" >
<Rectangle.Fill>
<SolidColorBrush Color="Blue" />
</Rectangle.Fill>
<Rectangle.RenderTransform>
<RotateTransform Angle="30" />
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Button Width="100" Height="30">Button
<Button.RenderTransform>
<RotateTransform Angle="50" />
</Button.RenderTransform>
</Button>
</Grid>
</Window>
Tworzenie grafiki można ułatwić sobie za pomocą narzędzia Expression Designer. Pozwala ono na eksport tworzonej grafiki do XAML-a.
Brak komentarzy:
Prześlij komentarz