Windows Presentation Foundation (WPF)- Luento 13

Luentotaltiointi
Looginen ja visuaalinen puu
Dependency properties
Data binding
- Binding-luokka
- DataTemplate
Triggerit
Routed Events
Käyttöliittymän skaalaus
Lisätietoa

Luentotaltiointi

Jatketaan WPF-asioiden parissa.

Looginen ja visuaalinen puu

WPF-käyttöliittymä on rakennettu hierarkisesti. Elementit sijaitsevat hierarkisessa puussa sisäkkäin. Tätä puurakennetta kutsutaan loogiseksi puuksi. Visuaalinen puu on laajennettu looginen jossa kaikki elementin on palasteltu pienimpiin osiinsa.

esimerkki jossa visuaalinen puu, jonka sisällä loogisen puun elementin ovat korostettuina.

Trees in WPF

Dependency properties

DependencyPropertyjen arvot selvitetään dynaamisesti eikä suoraan luokan privaatista attribuutista.

DependencyPropertyt tallennetaan DependencyObject-luokassa olevaan dictionary-tyyppiseen tietorakenteeseen. Avaimena toimii propertyn nimi.

Vain oletusarvoista poikkeavat arvot tallennetaan --> muistia säästyy.

Arvot periytyvät: Jos propertyn arvoa ei ole asetettu niin arvo haetaan loogisessa puussa ylemmältä tasolta.

<ListBox FontSize="20">
            <TextBox>Esimerkkitekstiä. Tämä Textbox perii fonttikoon Listboxilta.</TextBox>
            <TextBox FontSize="15">Lisää esimerkkitekstiä. Tämä Textbox ei peri fonttikokoa Listboxilta.</TextBox>
        </ListBox>

Dependency propertyissa on sisäänrakennettu muutosilmoitusmekanismi, joka mahdollista datasidonnan.

public static readonly DependencyProperty MyCustomProperty = DependencyProperty.Register("MyCustom", typeof(string), typeof(Window1));

public string MyCustom
{
    get
    {
        return this.GetValue(MyCustomProperty) as string;
    }
    set
    { // tänne ei pidä kirjoittaa mitään muuta
        this.SetValue(MyCustomProperty, value);
    }
}

dependency propertyn erikoistapaus Attached DependencyProperty liittää propertyja muihin luokkiin.

Data binding

Databindingin avulla voi automaattisesti päivittää käyttöliittymää lähdetietojen muuttuessa.

Tietoja voi sitoa yksi- tai kaksisuuntaisesti.

Tietoja voi sitoa vain DependencyProperty-tyyppisiin propertyihin.

Kaikilla käyttöliittymäkomponenteilla on DataContext-propery, jonka voi sitoa toiseen elementtiin tai tietolähteeseen. DataContext on periytyvä.

Binding-luokka

Source - viittaa tietolähteeseen
Path - Mistä tietolähteen ominaisuudesta otetaan tietoja. Path on myös oletusproperty eli sitä ei tarvitse välttämättä erikseen mainita.
ElementName - tietolähteenä käytettävän elementin nimi. Korvaa tarvittaessa Source-propertyn
Converter - mahdollisesti tarvittava valueconverter, joka muuntaa tietolähteen tiedot sopivaan muotoon ja toistepäin.
Mode - määrää mihin suuntaan tietoa sidotaan
- TwoWay
- OneWay
- OneTime
- OneWayToSource

       <TextBox x:Name="TextBox1" Width="50" Height="20" />
            <TextBox x:Name="TextBox2" Width="50" Height="20" Text="{Binding Text, Mode=TwoWay, ElementName=TextBox1,
                     UpdateSourceTrigger=PropertyChanged}" />

DataTemplate

        <DataTemplate x:Key="ReseptiTemplate">
            <StackPanel>
                <TextBlock Text="{Binding Path=Nimi}" />
                <TextBlock Text="{Binding Path=Kuvaus}"/>
                <TextBlock Text="{Binding Path=Henkilomaara}"/>
            </StackPanel>
        </DataTemplate>

Data Binding How-to Topics

Triggerit

Triggerien avulla voidaan tehdä tapahtumista riippuvaisia tyylejä, datatemplateja ym.

<Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="Yellow"/>
                </Trigger>
            </Style.Triggers>

MultiTrigger

DataTrigger

MultiDataTrigger

Routed Events

Routed event kulkee koko elementtipuun läpi.

Routing Strategy:

Bubbling - käy läpi elementtipuun alhaalta ylöspäin juureen asti
Direct - toimii kuten windows formsissa eli vain elementti itse saa tapahtuman käsiteltäväkseen
Tunneling - Käydään puu läpi juuresta alaspäin

public static readonly RoutedEvent TapEvent = EventManager.RegisterRoutedEvent(
    "Tap", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyButtonSimple));

public event RoutedEventHandler Tap
{
        add { AddHandler(TapEvent, value); }
        remove { RemoveHandler(TapEvent, value); }
}

WPF ja animaatiot

            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                Storyboard.TargetName="AnimButton"
                Storyboard.TargetProperty="Width"
                From="50.0" To="0.0" Duration="0:0:5"
                AutoReverse="True" RepeatBehavior="Forever" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>

Introduction to WPF Animations

TransformGroup

Käyttöliittymän skaalaus

HorizontalAlignment ja VerticalAlignment

Stretch-property

Viewbox

Lisätietoa

Käyttäjien kommentit