none
Exercice: Créer une application de style Metro de visualisation des images qui utilise File Picker et Orientation en C++ RRS feed

  • Discussion générale

  • Cet article est la dernière part du tutoriel « Créer des applications de style Metro avec C++ ». Dans cette part on va voir un exemple d’application de style Metro développée avec C++, plus précis une application de visualisation des images qui utilise le control File Picker et les évènements Orientation pour voir si le dispositif est utilisee en mode Paysage ou Portrait.

    Pour commencer, on va créer un projet C++ ‘XamlCPPLab2’ comme on a déjà présenté  dans les premiers deux parts de ce tuto. Puis éditez l’élément <Grid> dans MainPage.xaml: 

    <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
          <StackPanel Orientation="Horizontal" x:Name="stk">
            <Image x:Name="img1" Height="200" Width="200" Source="Logo.png"></Image>
            <Image x:Name="img2" Height="200" Width="200" Source="Logo.png"></Image>
            <Image x:Name="img3" Height="200" Width="200" Source="Logo.png"></Image>
          </StackPanel>
    Le résultat est une application simple avec 3 images identique : le logo que Visual Studio considère est le logo par default de votre application. Appuyez sur F5 pour vérifier que l’application fonctionne.




    • Modifié Ciprian Duduiala jeudi 1 mars 2012 07:32
    • Déplacé Florin Ciuca vendredi 7 septembre 2012 09:36 (Origine :Développement d’applications de style Metro pour Windows 8)
    mardi 7 février 2012 14:53

Toutes les réponses

  • Ajouter un control File Picker pour les images

    Dans cette étape, on va changer l’application : chaque fois quand l’utilisateur touche ou clique sur une image, le control File Picker apparaitra et l’utilisateur pourra changer le contenu de l’image.

    Tout d’abord, on ajoute le code pour l’évènement qui permet de gérer la touche ou le clic sur une image : ajoutez dans la section publique de MainPage.xaml.h au constructeur MainPage() le code suivant :

    void Img_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::TappedEventArgs ^ e);



    aussi que le code suivant dans le constructeur MainPage() de MainPage.xaml.cpp:

    img1->Tapped += ref new Windows::UI::Xaml::Input::TappedEventHandler(this, &XamlCPPLab2::MainPage::Img_Tapped);

    Notez que le nom de la fonction est img_Tapped, pas le défaut img1_Tapped. On utilise ce nom parce que la fonction img_Tapped sera appelle n’importe quelle image on va changer, donc on peut ajouter aussi ce code :

    img2->Tapped += ref new Windows::UI::Xaml::Input::TappedEventHandler(this, &XamlCPPLab2::MainPage::Img_Tapped);

    Notez qu’on peut aussi gérer l’évènement dans le fichier XAML, pas seulement pas code. Pour img3 on modifie MainPage.xaml pour obtenir:

    <Image x:Name="img3" Height="200" Width="200" Source="Logo.png" Tapped="Img_Tapped"></Image>

    Avant crier le code pour  Img_Tapped il faut inclure au début du MainPage.xaml.cpp quelques déclarations pour les espaces des noms qu’on va utiliser pour la fonction PickImage :

    using namespace Windows::Foundation;
    using namespace Windows::Storage;
    using namespace Windows::UI::Xaml;
    using namespace Windows::UI::Xaml::Controls;
    using namespace Windows::UI::Xaml::Data;
    using namespace Windows::Storage::Pickers;
    using namespace Windows::Storage::Streams;
    using namespace Windows::UI::Xaml::Media::Imaging;

    Puis, ajoutez la fonction img_Tapped:

    void XamlCPPLab2::MainPage::Img_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::TappedEventArgs^ e)
    {
    	Image^ imgToSet = safe_cast<Image^>(sender);
             // on obtient l’image qui a envoyée l’appel à la fonction
    	FileOpenPicker^ fop = ref new FileOpenPicker();
    	fop->FileTypeFilter->Append(".png");
    	fop->SuggestedStartLocation = PickerLocationId::PicturesLibrary;
    	auto fileOp = fop->PickSingleFileAsync();
             // on utilise des expressions lambda pour gérer les opérations asynchrones nécessaires pour 
             // (1) ouvrir le File Picker et obtenir le nom de l’image et 
             // (2) enregistrer le Stream du fichier sélectée comme Stream de l’image 
    	fileOp->Completed = ref new AsyncOperationCompletedHandler<StorageFile^>([imgToSet]
             (IAsyncOperation<StorageFile^>^ op){
    		auto file = op->GetResults();
    		String^ fileName = file->Name;
    		auto streamOp = file->OpenAsync(Windows::Storage::FileAccessMode::Read);
    		streamOp->Completed = ref new AsyncOperationCompletedHandler<IRandomAccessStream^>
                      ([imgToSet](IAsyncOperation<IRandomAccessStream^>^ op){
    			BitmapImage^ bmp = ref new BitmapImage();
    			bmp->SetSource(op->GetResults());
    			imgToSet->SetValue(Image::SourceProperty, bmp);
    		});
    		streamOp->Start();
    	});
    	fileOp->Start();
             // n’oubliez pas d’exécuter les opérations asynchrones
    }

    Notez qu’on ne gère pas les exceptions, donc si l’application est fermée sans choisir une image, une exception est générée.  Pour ne pas compliquer le lab on ne va pas ajouter le code pour les exceptions.

    F5 et testez l’application et le FileOpenPicker :

    Appuyez sur OK pour voir l’image sélectée dans l’endroit approprié.


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mercredi 8 février 2012 08:49
  • Comment utiliser le simulateur de Visual Studio ?

    Jusqu’à maintenant on a une application avec 3 images côte à côte, comme ci-dessous :

    Mais qu’est-ce qu’il se passé quand l’utilisateur modifie l’orientation du dispositif ? Il sera sympa si l’écran en Portrait nous montrera les images placées une au-dessus l’autre.

    Pour tester les changements d’orientation, on a besoin du simulateur qui vient avec Visual Studio. Dans l’Explorateur de Solutions sélectez ‘Properties’ après un clic droit sur le fichier du projet et puis sélectez l’onglet  ‘Debugging’dans la liste située à gauche dans la boite de dialogue ouverte. Finalement, modifies ‘Debugger to Launch’ a ‘Simulator Debugger’:

    Vous pouvez aussi utiliser le ComboBox à côte de ‘Play’ pour lancer le simulateur:

    Enregistrez l’application et appuyez sur F5 pour exécuter l’application avec le simulateur :

    Les boutons situés à droit vous permettent simuler certains scenarios. Pour changer l’orientation avec 90 dégrées utilisez les buttons :

    On sait comment utiliser le simulateur, donc on peut passer au code nécessaire pour modifier la mise en page a la modification de l’orientation d’un dispositif.


    Suivez MSDN sur Twitter   Suivez MSDN sur Facebook


    Ciprian DUDUIALA, MSFT  
    •Nous vous prions de considérer que dans le cadre de ce forum on n’offre pas de support technique et aucune garantie de la part de Microsoft ne peut être offerte.

    mercredi 8 février 2012 09:13
  • Comment répondre aux changements de l’orientation?



    Pour réagir a une modification d’orientation il faut gérer l’évènement ‘OrientationChanged’ pour DisplayProperties. On ajoute dans MainPage.xaml.h la definition du methode :

    void DisplayProperties_OrientationChanged(Platform::Object^ sender);

    et dans MainPage.xaml.cpp on ajoute l’espace de noms:

    using namespace Windows::Graphics::Display;

    Dans le constructeur MainPage() on ajoute aussi ce code:

    DisplayProperties::OrientationChanged += ref new DisplayPropertiesEventHandler(this, &XamlCPPLab2::MainPage::DisplayProperties_OrientationChanged);

    Donc le constructeur MainPage est devenu:

    MainPage::MainPage()
    {
        InitializeComponent();
    	img1->Tapped += ref new Windows::UI::Xaml::Input::TappedEventHandler(this, &XamlCPPLab2::MainPage::Img_Tapped);
    	img2->Tapped += ref new Windows::UI::Xaml::Input::TappedEventHandler(this, &XamlCPPLab2::MainPage::Img_Tapped);
    	DisplayProperties::OrientationChanged += ref new DisplayPropertiesEventHandler(this, &XamlCPPLab2::MainPage::DisplayProperties_OrientationChanged);
    }

    Finalement, dans le fichier XAML le StackPanel est orienté horizontal, donc il nous reste de changer l’orientation du StackPanel en utilisant l’orientation du dispositif, plus précis:

    void XamlCPPLab2::MainPage::DisplayProperties_OrientationChanged(Platform::Object^ sender)
    {
    	if (DisplayProperties::CurrentOrientation == DisplayOrientations::Portrait)
    	{
    		stk->Orientation = Orientation::Vertical;
    	} else
    	{
    		stk->Orientation = Orientation::Horizontal;
    	}
    }

    Maintenant si vous exécutez l’application via le simulateur et vous changez l’orientation, vous pouvez voir les modifications de la mise en page :


    mercredi 8 février 2012 09:20