Grafikai lehetőségek WPF-ben Egyszerű grafika (Shape-ek) Programozás III. Grafikai lehetőségek WPF-ben Grafikai alapok Egyszerű grafika (Shape-ek)

Grafikai lehetőségek WPF-ben A grafikai keretrendszerek között azonosítunk azonnali és visszatartott módúakat Retained (visszatartott) mód: A grafikai primitívekből (vonalak, alakzatok…) készített jelenetet valamilyen formában a memóriában tartja, minden frame rajzolásánál a tárolt modell alapján keletkeznek a rajzolási parancsok. Az alkalmazás alakzatokat adhat hozzá vagy vehet el. Immediate (azonnali) mód: A keretrendszer nem tárolja a jelenetet, minden frame rajzolásánál az alkalmazás közvetlenül adja ki a rajzolási parancsokat. Az összes kirajzolandó dolog számon tartása az alkalmazás feladata. A WPF visszatartott módú grafikai rendszert biztosít Immediate mode: GDI/GDI+, Direct2D, Direct3D Retained mode: WPF, Direct3D (3.0 után megszüntették a retained mode-ot)

Grafikai lehetőségek WPF-ben Shape-ek (System.Windows.Shapes.Shape leszármazottak) Egyszerű, előre elkészített grafikai alakzatok Toolboxban is szerepelnek FrameworkElement utódok: input, fókusz, események… Csak kevés számú (max 10-20) objektum esetén Drawing objektumok (System.Windows.Media.Drawing névtér) Nincs belső támogatásuk input eseményekhez Nem képesek maguktól a megjelenésre, hosztoló objektumban kell őket elhelyezni Legtöbbször XAML-ból kezeljük Gyorsabb a Shape-eknél (max néhány 100 objektumig) Visual objektumok (System.Windows.Media.Visual) Legbonyolultabb, leggyorsabb (max kb. 10000 objektumig) XAML lehetőségek korlátozottak, mindig kódból kezeljük

WPF grafikai alapok – koordináta-rendszer A WPF-ben használt koordináta-rendszer origója a bal felső sarokban van – minden helyzetmegadás a tartalmazó objektum bal felső sarkához képest értendő Egy objektum helyzetét befolyásolják pl.: HorizontalAlignment, Margin, Padding, tartalmazó/tartalommenedzser beállításai, … A fentiekből együtt, ún. Layout (elhelyezési) fázis során áll össze a 2D pozíciója – nem egyszerűen elérhető és nem (nagyon nehézkesen) állítható! A Canvas tartalommenedzser támogatja az objektumok adott koordinátákra való elhelyezését – csak grafikánál!

WPF grafikai alapok – típusok (System.Windows) System.Windows névtérben sok egyszerű típus van, amit főként grafikánál használunk Nincs megjelenítésük, csak adatreprezentációs célra! (Struktúrák (érték típusok)) Point: pont a síkban (2D) X, Y Size: méret Width, Height Rect, Int32Rect: téglalap a síkban X, Y, Width, Height, Top, Bottom, Left, Right Vector: helyvektor a síkban X, Y, Length, LengthSquared

WPF grafikai alapok – színek Minden színt négy darab 8 bites érték jellemez: Vörös (R), zöld (G), kék (B) – 0-255 közötti értékeket vehetnek fel (így összesen 256^3 ≈ 16 millió szín állhat elő). Minél nagyobb a szám, annál nagyobb az adott színkomponens intenzitása. Alfa – A szín átlátszóságát határozza meg. 0-255, 0: teljesen átlátszó, 255: teljesen átlátszatlan. A szín reprezentálására a Color struktúrát használjuk Color color = Colors.Red; Color color = Color.FromArgb(20, 255, 0, 0);

WPF grafikai alapok – ecsetek A WPF grafikus lehetőségeinek mindegyike ecseteket használ a 2D felületek kitöltéseinek megadásához System.Windows.Media.Brush absztrakt osztály utódai SolidColorBrush: adott színnel való kitöltés LinearGradientBrush: lineáris átmenettel való kitöltés RadialGradientBrush: sugaras átmenettel való kitöltés ImageBrush: képpel való kitöltés DrawingBrush: rajzzal való kitöltés VisualBrush: Visual utódobjektummal való kitöltés

WPF grafikai alapok – ecsetek Forrás: http://i.msdn.microsoft.com/dynimg/IC107818.jpg

WPF grafikai alapok – ecsetek C# megadás: XAML megadás: //előre elkészített ecset: button.Background = Brushes.Red; //saját ecset előre elkészített színnel: button.Background = new SolidColorBrush(Colors.Aqua); //saját ecset saját színnel: Color almostRed = Color.FromArgb(20, 255, 0, 0); button.Background = new SolidColorBrush(almostRed); <Button Background="AliceBlue" Content="Button" .../> <Button Background="#FFFF0000" Content="Button2" .../> <Grid.Resources> <SolidColorBrush x:Key="kedvencSzinem" Color="Azure"/> </Grid.Resources> ... <Button Background="{StaticResource kedvencSzinem}"></Button>

Shape-ek Ellipse Rectangle Line Polygon Polyline Path Utóbbi négy elem Toolboxhoz adása: Toolbox  Jobb klikk  Choose Items…  WPF Components Nincs jó szerkesztési idejű támogatás hozzájuk

Shape-ek tulajdonságai Ellipse, Rectangle: Width, Height: kért dimenziók (ActualWidth, ActualHeight: az elrendezések/méretezések után megkapott dimenziók) Stroke: vonal ecsetje StrokeThickness: vonal vastagsága StrokeDashArray, StrokeEndLineCap: vonaldíszítő elemek Fill: kitöltés ecsetje RenderTransform/LayoutTransform: transzformáció az elem elrendezése és méretezése után/előtt (forgatás/nyújtás/eltolás) Line: Stroke, StrokeThickness, StrokeDashArray, StrokeEndLineCap, RenderTransform/LayoutTransform X1, X2, Y1, Y2: vonal két végpontja

Shape-ek tulajdonságai Polygon, Polyline: Stroke, StrokeThickness, StrokeDashArray, StrokeEndLineCap, Fill, RenderTransform/LayoutTransform Points: PointCollection típusú pontgyűjtemény (elemei Point típusúak) Polygon polygon = new Polygon(); //... Point[] points = new Point[3]; points[0] = new Point(0, 0); points[1] = new Point(20, 40); points[2] = new Point(70, 0); polygon.Points = new PointCollection(points); <Polygon Points="0,0 20,40 70,0" .../>

Feladat

System.Windows.Threading.DispatcherTimer Műveletek adott időközönkénti végrehajtására használjuk Interval Tulajdonság, amelynek segítségével megadhatjuk, hogy a timer milyen gyakran jelezzen (TimeSpan típusú) Start(), Stop() Függvények elindításra, leállításra Tick Esemény, ami jelzi, hogy a megadott időtartam letelt (a jelzéssel együtt az időtartam mérése újraindul) Sok más Timer típus van – ne keverjük! (System.Windows.Forms.Timer, System.Timers.Timer, System.Threading.Timer, System.Web.Ui.Timer…)