Multimedia ja tulostaminen - Pääteohjaus 7

Video ja ääni
- MediaElement
- MediaPlayer
Tulostaminen
FixedDocument
FlowDocument
Animaatiot
Lisätietoa

Lisätään ohjelmaan videota ja ääntä sekä opetellaan tulostamaan.

Video ja ääni

Videota ja ääntä voit liittää WPF-sovelluksiin MediaElement-kontrollilla ja MediaPlayer-objektilla. Näiden käyttämiseen voi tutustua lukemalla Multimedia Overview-artikkelin.

MediaElement

Aloita uusi WPF-sovellus. Lisää XAMLiin MediaElement-elementti. Aseta MediaElementin source-propertyn arvoksi viittaus mallivideoon eli http://appro.mit.jyu.fi/gko/ohjaus/ohjaus7/malli.wmv tai johonkin omaan videotiedostoosi.
Kokeile toimiiko ohjelmasi ja näkyykö video. Huomannet, että MediaElement ei vie lomakkeelta tilaa kuin vasta ohjelman ollessa käynnissä.
Katso mallia artikkelista luentoesimerkistä tai How to: Control a MediaElement (Play, Pause, Stop, Volume, and Speed) -sivulta ja lisää lomakkeellesi painikkeet joilla voit pysäyttää videon ja käynnistää videon. Huomaa, että LoadedBehavior-ominaisuuden arvoksi pitää asettaa Manual. Voit myös kokeilla mitä tapahtuu jos et muuta LoadedBehaviorin arvoa ja yrität käyttää painikkeitasi.
Kokeile mediaelementissä pelkkää ääntä videon sijaan. Voit käyttää mallitiedostoa tai vaikka jotain omaa mp3-tiedostoasi.
Lisää sovellukseesi myös äänisäädin ja slider jolla voit hypätä videossa eri kohtaan.

Kokeile videon transformointia. Lisää MediaElementin sisään seuraavat:

                <MediaElement.LayoutTransform>
                    <TransformGroup>
                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                        <RotateTransform Angle="45"/>
                        <SkewTransform AngleX="0" AngleY="0" />
                    </TransformGroup>
                </MediaElement.LayoutTransform>
            </MediaElement>

Kokeile miltä video nyt näyttää.

MediaPlayer

MediaPlayer-objekti pitää luoda ohjelmallisesti.

Lisää lomakkeellesi Image-elementti ja anna sille järkevä nimi.

Luo ohjelmakoodissa esim. ikkunan latauduttua MediaPlayer seuraavasti:

MediaPlayer player = new MediaPlayer();
// pitää luoda tapahtumankäsittelijä, joka hoitaa varsinaisen videon näyttämisen
player.MediaOpened += new EventHandler(player_MediaOpened);

player.Open(new Uri("videotiedoston osoite", UriKind.Absolute));

void player_MediaOpened(object sender, EventArgs e)
{
      MediaPlayer player = (MediaPlayer)sender;
      VideoDrawing aVideoDrawing = new VideoDrawing();

      // naturalvideowidth ja -height ei voida käyttää ennen kuin video on avattu
      // tässä pitää määritellä oikeassa suhteessa oleva Rect.
      aVideoDrawing.Rect = new Rect(0, 0, player.NaturalVideoWidth, player.NaturalVideoHeight);
      aVideoDrawing.Player = player;

      player.Play();

      DrawingImage di = new DrawingImage(aVideoDrawing);

      this.oman_image_elementin_nimi.Source = di;
}

Lisää lomakkeelle painikkeet joilla voit hallita videota.

Yritä hallita MediaElementiä Storyboardin avulla. Kts. How to: Control a MediaElement by Using a Storyboard

Tulostaminen

Kokeile miten yksinkertaista on tulostaa lomake tai jokin sen sisältämä kontrolli. Lisää lomakkeellesi painike ja siihen seuraava ohjelmakoodi:

            PrintDialog dialog = new PrintDialog();
            if (dialog.ShowDialog() == true)
            { dialog.PrintVisual(nimi, "Tulostusalue"); }

Korvaa nimi esim. koko ikkunalle tai gridille antamallasi nimellä. Kokeile miten painike toimii ja ohjaa tulostus PDF-tiedostoon.

FixedDocument

Lue artikkeli WPF Printing Part 2 The Fixed Document. Saat artikkelista valmiin koodipohjan.

Lisää lomakkeellesi painike, joka muodostaa ja tulostaa kolmesivuisen dokumentin. Jokaisella sivulla lukee sivun nro ja jotain lorem ipsumia.
Varmista, että teksti tulostuu vain yhteen sarakkeeseen.

FlowDocument

Tutustu Microsoftin FlowDocument Overview -artikkeliin

Lisää XAML-tiedostoosi FlowDocumentReader-elementti:

<FlowDocumentReader x:Name="docreader" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

Lisää readerin sisään FlowDocument-elementti. Kirjoita FlowDocumentin sisään yksinkertainen dokumentti käyttäen edellämainitussa artikkelissa mainittuja ominaisuuksia. Voit käyttää pohjana mallitekstiä.

Lisää painike jolla saat FlowDocumentin tulostettua käyttäen seuraavaa koodia:

private void button3_Click(object sender, RoutedEventArgs e)
        {
            PrintDialog dialog = new PrintDialog();
            if (dialog.ShowDialog() != true) return;

            IDocumentPaginatorSource foo = docreader.Document;
            dialog.PrintDocument(foo.DocumentPaginator, "flow dokkari");
}

Kokeile painikkeen toimintaa. Kokeile miten FlowDocumentReaderin eri näyttötilat vaikuttavat tulostukseen.

Korjaa tulostuskoodia seuraavilla riveillä:

       // tarvitaan jotta ei tule sarakkeita
            docreader.Document.ColumnWidth = dialog.PrintableAreaWidth;
            docreader.Document.ColumnGap = 0;
            docreader.Document.PageWidth = dialog.PrintableAreaWidth;
            docreader.Document.PageHeight = dialog.PrintableAreaHeight;

Miten tulostus toimii nyt? Mitä tapahtuu FlowDocumentReaderille?

Ongelma voidaan kiertää kloonaamalla FlowDocument tai palauttamalla näyttöön sopivat asetukset tulostuksen jälkeen:

            // edellisten jälkeen näytön ulkoasu vastaa tulostusta... ei hyvä
            // täytyy siis kloonata flowdocument
            // valitettavasti seuraava ei kloonaa BlockUIContainereita
            System.IO.MemoryStream s = new System.IO.MemoryStream();
            TextRange source = new TextRange(docreader.Document.ContentStart, docreader.Document.ContentEnd);
            source.Save(s, DataFormats.Xaml);
            FlowDocument copy = new FlowDocument();
            TextRange dest = new TextRange(copy.ContentStart, copy.ContentEnd);
            dest.Load(s, DataFormats.Xaml);
            // nyt tee copy-oliolle samat mitä aiemmin docreader.Document-oliolle...

Nyt tulostuksen pitäisi toimia kelvollisesti ja näytönkin pysyä sopivassa tilassa. Tosin kannattaa huomata, että FlowDocumentReaderia voi suoraan käyttää esikatseluna!

Animaatiot

Katso luentoesimerkistä mallia ja tee ohjelma jossa auto liikkuu näytöllä edestakaisin. Kokeile saatko auton myös kääntymään ympäri.

Lisävinkkiä saat artikkelista: Animation Overview.

Lisätietoa

Käyttäjien kommentit