GridView, ListView példa képek megjelenítése, URL megadási módok
2 féle url megadási módot használtam. Ha a neten kerestem képeket, és annak a linkjét másoltam be,akkor azt elfogadta, és megjelenítette az alkalmazásban.Ez volt a gyorsabb verzió, amire később jöttem rá. Elsőnek letöltöttem a netről képeket, és a projekten belül hozzáadtam az assets mappához, és ezzel az url-ellel raktam bele a projektbe, pl: Assets/gyumolcsok.jpg
Alkalmazások?
Mivel a blognak 2MB-nyi feltöltési korlátja van, így a demó ezen az url-en érhető el: itt.
FlipView beállítási lehetőségek
ActualHeight: a keretelem aktuális magasságát adja meg (csak olvasható).
ActualWidth: a keretelem aktuális szélességét adja meg (csak olvasható).
AllowDrop: megad vagy beállít egy értéket, amely meghatározza, hogy az UIElement lehet a drag-and-drop műveletek egy vidd célja (olvasható-írható).
Background: megad vagy beállít egy ecsetet, amely biztosítja a control hátterét (olvasható-írható).
BaseUri: megad egy egységes erőforrás-azonosítót (egy rövid karaktersorozat, amelyet egy webes erőforrás azonosítására használunk. Közismert példái a webcímek, más néven URL-ek.), ami reprezentálja az alap egységes erőforrás-azonosítót XAML-épített objektum számára, az XAML betöltési ideje alatt (csak olvasható).
BorderBrush: megad vagy beállít egy ecsetet, ami “leírja” a keret control hátterét (olvasható-írható).
BorderThickness: megadja vagy beállítja a control keret vastagságát (olvasható-írható).
CacheMode: megad vagy beállít egy értéket, amely jelzi, hogy a megadott tartalom cache-be kell, hogy legyen, ha ez lehetséges (olvasható-írható).
CharacterSpacing: megadja vagy beállítja a karakterek közötti távolságot (1 és 1000 között) (olvasható-írható).
Clip:
DataContext:
DefaultStyleKey: megadja vagy beállítja a kulcsot, ami a kontrol alapértelmezett stílusára hivatkozik (olvasható-írható).
DesiredSize: megadja azt a méretet, ami (csak olvasható).
Dispatcher: megadja a CoreDispatcher-t, ami ezzel az objektummal áll kapcsolatban (csak olvasható).
DisplayMemberPath: megadja vagy beállítja a tulajdonság nevét vagy elérési útját, amivel megjelenhet minden adat (olvasható-írható).
FlowDirection: (olvasható-írható).
FocusState: megadja az értéket, ami megadja, hogy az ellenőrzés középpontjában áll-e, és a módot, amit a középpontban kapunk (csak olvasható).
FontFamily: megadja vagy beállítja a controlban használt szöveg betűtípusát (olvasható-írható).
FontSize: megadja vagy beállítja a controlban használt szöveg méretét (olvasható-írható).
FontStretch: megadja vagy beállítja a fokozatot, amely a betűtípust kondenzálja és bővíti a képernyőt (olvasható-írható).
FontStyle: megadja vagy beállítja a stílust, ami a szöveghez van rendelve (olvasható-írható).
FontWeight: megadja vagy beállítja a megadott betűtípus vastagságát (írható-olvasható).
Foreground: megadja vagy beállítja azt az ecsetet, ami leírja az előtér színét (olvasható-írható).
GroupStyle: a GroupStyle objektumok gyűjteményét adja meg, amik meghatározzák a csoportok minden szinten való megjelenítését (csak olvasható).
GroupStyleSelector: (olvasható-írható).
Height: megadja vagy beállítja a FrameWorkElement ajánlott magasságát (olvasható-írható).
HorizontalAlignment: megadja vagy beállítja a control tartalmának vízszintes igazítását (olvasható-írható).
HorizontalContentAlignment: (olvasható-írható).
IsDoubleTapEnabled: megadja vagy beállítja azt az értéket, ami meghatározza, hogy a DoubleTapped esemény származhat-e abból az elemből (olvasható-írható).
IsEnabled: megadja vagy beállítja azt az értéket, ami jelzi, hogy a DoubleTapped felhasználó kölcsönhatásba léphet-e a controllal (olvasható-írható).
IsGrouping: megadja azt az értéket, ami jelzi, hogy a vezerlő egyesítést használ-e (csak olvasható).
IsHitTestVisible: megadja vagy beállítja, hogy az UIElement foglalt területe visszatérhet-e valódi értékekkel hit teszt miatt (olvasható-írható).
IsHoldingEnabled: megad vagy beállít egy értéket, ami meghatározza, hogy a Holding esemény származhat-e ebből az elemből (olvasható-írható).
IsRightTapEnabled: megad vagy beállít egy értéket, ami meghatározza, hogy a RightTapped esemény származhat-e ebből az elemből (olvasható-írható).
IsSynchronizedWithCurrentItem: megad vagy beállít egy értéket, ami megmutatja, hogy egy Selectornak a SelectedItem-et szinkronban kell-e tartania az aktuális elemmel az Items tulajdonságban (olvasható-írható).
IsSynchronizedWithCurrentItemProperty: azonosítja a IsSynchronizedWithCurrentItem függőség tulajdonságot (csak olvasható).
IsTabStop: megad vagy beállít egy értéket, ami jelző, hogy a control szerepel el a fül navigációban (írható-olvasható).
IsTapEnabled: megad vagy beállít egy értket, ami meghatározza, hogy a Tapped esemény származhat-e ebből az elemből (írható-olvasható).
ItemContainerGenerator: megadja, hogy az ItemContainerGenerator társul-e az ItemsControlhoz (csak olvasható).
ItemContainerStyle: megadja vagy beállítja a stílust, amely akkor használható, amikor az elemet konténerré teszik (írható-olvasható).
ItemContainerStyleSelector: (írható-olvasható).
ItemContainerTransitions: megadja vagy beállítja a Transition stílus elemek gyűjteményét, ami egy ItemsControl elemeikre alkalmazható (írható-olvasható).
Items: megadja azt a gyűjteményt, ami a kontrol tartalmának létrehozásakor használt (csak olvasható).
ItemsPanel: megadja vagy beállítja azt a sablont, ami meghatározza a panelt, ami ellenőrzi az elemek elrendezését (írható-olvasható).
ItemsSource: megad vagy beállít egy objektumforrást, amit az ItemsControl tartalmának létrehozásakor használt (olvasható-írható).
ItemTemplate: megad vagy beállít egy DataTemplate-t, amit minden elem megjelenítésére használ (írható-olvasható).
ItemTemplateSelector: (írható-olvasható).
Language: megad vagy beállít egy globális nyelvi információ, ami érvényes egy FrameWorkElement-re (írható-olvasható).
ManipulationMode: (írható-olvasható).
Margin: megadja vagy beállítja a FrameworkElement külső margóját (írható-olvasható).
MaxHeight: megadja vagy beállítja egy FrameworkElement maximális magasságát (írható-olvasható).
MaxWidth: megadja vagy beállítja egy FrameworkElement maximális szélességét (írható-olvasható).
MinHeight: megadja vagy beállítja egy FrameworkElement minimális magasságát (írható-olvasható).
MinWidth: megadja vagy beállítja egy FrameworkElement minimális szélességét (írható-olvasható).
Name: megadja vagy beállítja az objektumazonosító nevét (írható-olvasható).
Opacity: megadja vagy beállítja az objektum átlátszóságának mértékét (írható-olvasható).
Padding: megadja vagy beállítja a kontrolon belüli ellenőrzést (írható-olvasható).
Parent: megadja a FrameworkElement szülő objektumát az objektumfában (csak olvasható).
PointerCaptures: (csak olvasható).
Projection: megadja vagy beállítja a perspektivikus vetítést, amit akkor kell alkalmazni, amikor az elemhez van rendelve (írható-olvasható).
RenderSize: (csak olvasható).
RenderTransform: (írható-olvasható).
RenderTransformOrigin: (írható-olvasható).
Resources: (írható-olvasható).
SelectedIndex: megadja vagy beállítja a kiválasztott elem indexét (írható-olvasható).
SelectedIndexProperty: azonosítja a SelectedIndex függőség tulajdonságát (csak olvasható).
SelectedItem: megadja vagy beállítja a kiválasztott elemet (írható-olvasható).
SelectedItemProperty: azonosítja a SelectedItem függőség tulajdonságát (csak olvasható).
SelectedValue: megadja vagy beállítja a kiválasztott elem értékét, amelyet a SelectedValuePath használatával érhetjük el (írható-olvasható).
SelectedValuePath: (írható-olvasható).
SelectedValuePathProperty: (csak olvasható).
SelectedValueProperty: (csak olvasható).
Style: megad vagy beállít egy stílus példányt, ami az objektum rendezése során használnak (írható-olvasható).
TabIndex: (írható-olvasható).
TabNavigation: (írható-olvasható).
Tag: megadja vagy beállítja egy tetszőleges objektum értékét, amit arra lehet használni, hogy eltárolja az információkat az objektumról (írható-olvasható).
Template: megad vagy beállít egy control templatet (írható-olvasható).
Transitions: megad vagy beállítja az UIElementhez alkalmazandó átmeneti stílust elemeinek gyűjteményét (írható-olvasható).
Triggers: (csak olvasható).
UseLayoutRounding: (írható-olvasható).
VerticalAlignment: (írható-olvasható).
VerticalContentAlignment: (írható-olvasható).
Visibility: megadja vagy beállítja az UIElement láthatóságát (írható-olvasható).
Width: megadja vagy beállítja egy FrameworkElement szélességét (írható-olvasható).
Flipview template készítés
Template-hez még sose volt szerencsém, így ez még hátra van.
Exif írás, olvasás
Ezzel kapcsolatban az interneten találtam egy programkódot, aminek működése során hozzá lehet adni egy képet a saját gépünkről, majd kiírja az exif információkat. Íme egy képernyőkép ezzel kapcsolatban:
Ezzel a programmal csak annyi a gond, hogy webszerveren keresztül működik.
Képernyő tervek
Képernyőtervek itt.
A mai bejegyzés folyamán a maradék 2 animációt szeretném megcsinálni, illetve a kép beillesztéses kérdésre is választ szeretnék adni.
Kezdjük a képek beillesztésével.
Ennek megoldására találtam egy olyan PictureBox nevezetű Controlt. Ebbe könnyen bele lehet tenni a képet.
Nézzük meg közelebbről. Létrehozunk egy új projektet a Visual Studioban. Toolbox segítségével hozzáadunk egy PictureBoxot. Jobb oldalt a Properties-nél van egy Image “rész”, ahol a …-ra kattintva beilleszthetjük a képeinket. Ahhoz, hogy a képünk teljes módban látszódjon, mind a form méretét, mind a picturebox méretét át kell állítani. Ezt a Size-nál tehetjük meg. Íme a végeredmény:
A második animációnál az volt a feladat, hogy egy gomb lenyomására történjen valami animáció.
Ezt egy piros pöttyel oldottam meg, illetve egy gombbal, amit ha megnyomunk akkor jobbra, majd ha ismét megnyomjuk, akkor a pötty visszaugrik az eredeti pozícióba.
Na, de lássuk a kódot:
Létrehozok egy x változót, ez majd a mozgatásnál lesz segítségemre, az y változó pedig a pötty kirajzolásához kell. Majd létrehozom a gombot, egy segédváltozót, ami szintén a mozgatásnál segít. A konstruktorba a gomb feliratát helyeztem el, illetve magát a gombot, és hogy a gomb megnyomásnál hozzáadom a mozgatásos eseményt.
Az idozito metódusnál próbáltam volna felhasználni a villogó gombnál használt dolgokat, de valamiért állandó mozgásra nem sikerült a pöttyöt bírnom.
Az OnPaint metódussal rajzolódik ki egy pöttyünk, majd a main-nel a program futtatását tesszük lehetővé.
A kódot innen le lehet tölteni: ButtonToMove
Egy MVVM mintapéldával és az összetettebb animációval még adós vagyok.
A mai napon a MVVM (Model-View-ViewModel) mintapéldához láttam hozzá. Először egy kép, hogy hogyan is néz ki egy ilyen minta:
A Model feladata az üzleti logikával való interakció fenntartása. Itt kérhetünk ki adatokat az adatelérési rétegből, kommunikálhatunk szolgáltatásokkal.
A View kizárólag az adott felhasználói felületet tartalmazza, mögöttes kódjában nem találhatók objektumok az üzleti logikából.
A sorból már csak a ViewModel maradt ki, melynek feladata a kettő összekapcsolása.
A példát magát is elkezdtem, egyelőre félkész állapotban van.
Inkább az animációkkal foglalkoztam, legelsőnek a villogó gombbal, ami kisebb fejtörést okozott, de végül sikerült megoldani a dolgot.
Nézzük a demót.
Elsőnek Visual Studioban létrehoztam egy új projektet. A Program.cs-be dolgoztam. Először a névtereket írtam be, hogy miket fogok használni a program során:
Utána létrehoztam a saját névteremet, az osztályt, majd a szükséges változóimat.
Majd következik a “szokásos” konstruktor, és ennek “részletezése” (2 részletben):
Majd a villogást úgy oldottam meg, hogy egy segédváltozót el kezdek növelgetni a végtelenbe egyesével, majd ha páros a szám, akkor nem látszódik a gomb, ha páratlan, akkor látszódik. Így egy villogó hatást értünk el.
Majd végül a main, amibe létrehozzuk a gombot.
Magát a projektet pedig innen lehet letölteni: Villogo_Gomb
A 3 vezérlőnek (ListView, FlipView és Virtualization) néztem utána.
ListView:
FlipView:
A Virtualization-ről nem esik szó a könyvben, illetve máshol se találtam róla információt.
A feladataim közt volt átnézni az alkalmazás életcikluást és ennek debuggolását. Ez az első feladatok közt is szerepelt, de ekkor elegendő információt nem találtam. Viszont a most kapott win8 könyvben pár oldalon erről volt szó.
Az új életciklus modell szerint 3 állapota lehet egy alkalmazásnak:
Amikor elindítjuk alkalmazásunkat, akkor lépünk az első állapotba, azaz a működő alkalmazásba. Ha “pihentetjük” az alkalmazásunkat, vagy egy másik alkalmazást indítunk, akkor az alkalmazásunk a megállított állapotba kerül át. Ha visszatérünk eredeti alkalmazásunkhoz, akkor ismét működik az alkalmazásunk. Ha túl régen használtuk az alkalmazást, vagy az operációs rendszer úgy találja, hogy az operatív memória fogyóban van, akkor véglegesen bezárhatja az alkalmazásunkat, mely az állapot mentésének hiányában elveszítheti a felhasználó a teljes munkafolyamatát. Ekkor az alkalmazásunk a terminált állapotban van.
A könyvben még megtalálható a windows 8 stílusú alkalmazások állapotai. Ezek a következők:
A NotRunning akkor következik be, amikor először fut az alkalmazás, azaz a Windows Store-ból lett telepítve, vagy a Task Manager segítségével zárták be az alkalmazást, vagy felhasználói ki-/bejelentkezés történt, vagy a számítógépet újraindították. Ezeket úgy kezelhetjük, hogy a szokásos módon inicializáljuk és jelenítsük meg az alapértelmezett felhasználói felületet.
A Running akkor következik be, ha a programot a csempéje vagy valamelyik integrációs esemény segítségével indították el. Ekkor le kell kezelni az Activation eseményt.
A Suspended esetén a program pihentetésre került, mivel nem történt egy ideje felhasználói reakció. Ekkor szintén le kell kezelni az Activation eseményt.
A Terminatednél a rendszer kezd kifogyni az erőforrásaiból (pl. tápellátás, szabad operatív memóriaterület, stb…), így kénytelen az alkalmazásunkat pihentetett állapotból véglegesen leállítani. Ilyen esetben a mentett adatokat állítsuk vissza, törekedjünk a felhasználói munkafolyamat szakadásmentes, hiánytalan visszaállítására. Használjuk ehhez az alkalmazásszintű eseményeket!
A ClosedByUser akkor történik meg, ha több, mint 10mp telt el az Alt+F4 vagy bezárás gesztus alapú bezárási események óta. Ilyenkor inicializáljunk a szokásos módon, jelenítsük meg az alapértelmezett felhasználói felületet és indítsunk egy friss munkafolyamatot.
Pár fontos tényező:
Az animációkhoz kerestem anyagot, illetve próbáltam őket létre is hozni több-kevesebb sikerrel, a következő feladat ez lesz. Illetve a 3 layout vezérlőt nézem át tüzetesebben.
Mostani feladataim a következők:
A mai nap folyamán telepítettem a windows 8-at, illetve a Visual Studio-t. Ezen kívül megismerkedtem a windows 8 kinézetével, stb. Illetve az mvvm mintapéldához kerestem anyagokat, amivel még később jelentkezem.
Az elmúlt 3-4 hét történései.
A Silverlight könyvet kellett röviden áttekintenem, illetve az alábbi témakörökre nagyobb figyelmet kellett szentelnem:
Ezen témakörök nagy része megtalálható volt a Silverlight könyvben.
Az egyes témakörökről pár lényeges mondat:
A Windows 8-nál a Metro alkalmazások életciklusa nagymértékben különbözik a megszokott, hagyományos alkalmazásokétól. A lehető legjobb felhasználói élmény biztosításának érdekében az alkalmazások életciklusa feletti hatalmat a Microsoft kivette a felhasználók kezéből, és inkább a rendszer szerves részévé tette.
A fejlesztői környezet olyan programozási eszközök, könyvtárak és beállítások csoportja, melyekkel a szoftverfejlesztés során a felhasznált programozási nyelven, vagy nyelveken létrehozott forráskódokat futás kész állapotba lehet hozni és azt tesztelni. Ez jelentheti a fordítást, vagy nem önálló programok futtatási környezetbe helyezését. Mindkét esetben a környezet általában tartalmazza a futtatókörnyezetet is a tesztelés miatt.
A legtöbb információt a Silverlight könyvből nyertem. A könyv elejét (az első 7 fejezetet) részletesen néztem át, az utolsó fejezeteket inkább átlapoztam. De a könyvet sikerült megszereznem elektronikus formában, így a későbbiekben is utána lehet nézni dolgokat, akár a maradék részeket is el lehet olvasni.
Hasznos dolgokat találtam a devportal.hu-n. Szerintem ezt az oldalt a későbbiekben is sűrűn meglátogatom.