Adaptív megjelenítés a WPF layout rendszer segítségével Bátyai Krisztián MCT, MCPD 3.5, MCTS 3.5 WPF NetAcademia Oktatóközpont

Az előadás célja: WPF layout rendszer lehetőségei útravalók: Mindenre van „gyári” lehetőség! ha mégse… azt könnyedén programozható! Komoly delta a Winformshoz képest a layout 3 utravaló amit az előadás közben megmutatunk.

Amiről szó lesz… Alapozás Adatsablon Egyedi layout Layout csere Alapozás, layout csere, adatsablonok, converterek, kaxaml layout rendszer- ficsörszet, egyedi layout Layout csere Converter-ek Layout példák

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK MÁSODIK NEGYEDIK HATODIK

WPF Layout kulcsszavakban Iteratív méretező algoritmus (measure, arrange) Egymásba ágyazhatóság Szolgáltatások Margó, Padding Igazítás Clipping Layout vezérlők Transzformációk Template-k LAYOUT

Beépített panelek 4/4/2017 9:55 PM 6 ©2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

Layout alapozás…

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK MÁSODIK NEGYEDIK HATODIK

A bolygó neve… a végcél

Layout csere Miért? Mit? ItemsPanelTemplate <ListBox> <ListBoxItem>Merkur</ListBoxItem> <ListBoxItem>Venus</ListBoxItem> <ListBoxItem>Föld</ListBoxItem> <ListBoxItem>Mars</ListBoxItem> </ListBox> <ListBox.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal”/> </ItemsPanelTemplate> </ListBox.ItemsPanel>

Naprendszer ListBox el(ő)készítése

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK MÁSODIK NEGYEDIK HATODIK

DataTemplate Data Template Adatobjektumhoz rendelt megjelenés Bárhol felhasznáható Egy objektumhoz többféle sablon <DataTemplate> <Border...> <StackPanel Orientation="Horizontal"> <TextBlock VerticalAlignment="Center" Margin="5, 0"> <TextBlock Text="{Binding Path=Name}" TextBlock.FontWeight="Bold"/> <LineBreak/>Telefon : <TextBlock Text="{Binding Path=Phone}" TextBlock.FontStyle="Italic" /> <LineBreak/>Szobaszám : <TextBlock Text="{Binding Path=Room}" /> </TextBlock> <Image Source="{Binding Path=Picture}" Height="60" Margin="4" Name="img"></Image> </StackPanel> </Border> </DataTemplate>

DataTemplate készítése

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK NEGYEDIK MÁSODIK HATODIK

Konverterek

Konverterek készítése

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK MÁSODIK NEGYEDIK HATODIK

Saját layout vezérlő készítése Ötlet Tulajdonságok meghatározása protected override Size MeasureOverride(Size availableSize) protected override Size ArrangeOverride(Size finalSize) Measure : szűlő megkérdezi a gyereket hogy Hé te mekkora akarsz lenni ha ennyi helyed van? protected override Size MeasureOverride(Size availableSize) { … // Ask each child how big it would like to be, given a certain amount space foreach (UIElement child in Children) child.Measure(new Size(…)); // The child’s answer is now in child.DesiredSize } // Tell my parent how big I would like to be given the passed-in availableSpace return new Size(…); child.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity)); Arrange : Megmondom mennyit kaptál és hova kerülsz RECT protected override Size ArrangeOverride(Size finalSize) // Tell each child how much space it is getting child.Arrange(new Rect(…)); // The child’s size is now in child.ActualHeight & child.ActualWidth // Set my own actual size (ActualHeight & ActualWidth)

Measure Szülő megkérdezi a Gyerekeket mennyi helyet szeretnének a rendelkezésre állóból… protected override Size MeasureOverride(Size availableSize) { // Ask each child how big it would like to be, given a certain amount space foreach (UIElement child in Children) child.Measure(new Size(…)); // The child’s answer is now in child.DesiredSize } return new Size(…);

Arrange A Szülő megmondja a Gyerekeknek mennyi helyet és hol kapnak protected override Size ArrangeOverride(Size finalSize) { // Tell each child how much space it is getting foreach (UIElement child in Children) child.Arrange(new Rect(…)); // The child’s size is now in child.ActualHeight & child.ActualWidth } // Set my own actual size (ActualHeight & ActualWidth) return new Size(…); protected override Size ArrangeOverride(Size finalSize) { … // Tell each child how much space it is getting foreach (UIElement child in Children) child.Arrange(new Rect(…)); // The child’s size is now in child.ActualHeight & child.ActualWidth } // Set my own actual size (ActualHeight & ActualWidth) return new Size(…);

Kártyaasztal készítése

Amiről szó lesz… ELSŐ HARMADIK ÖTÖDIK HATODIK MÁSODIK NEGYEDIK

Fícsör feszt

Amiről szó volt… ELSŐ HARMADIK ÖTÖDIK MÁSODIK NEGYEDIK HATODIK

Összefoglalás: Volt egy cél, hogy értük el… útravalók:

További információk