5일차. PhotoLab 샘플 따라 만들기 (2/3)

코드 작성

MainPage.h

   먼저 MainPage.h에 GetItemsAsync()라는 메소드를 하나 추가해 줍니다. 그리고 코루틴을 사용할 것이기 때문에 리턴값을 winrt::Windows::Foundation::IAsyncAction로 설정해 줍니다.

Windows::Foundation::IAsyncAction GetItemsAsync();

 

MainPage.cpp

  위에서 설명드린 대로 코루틴을 사용합니다. C++/WinRT에서는 co_await로 뒤에 있는 코드가 실행될 때 까지 대기시키게 됩니다. C#의 async/await나 자바스크립트를 써보셨다면 어느 정도 쉽게 접근할 수 있으실 겁니다. 먼저 QueryOptions를 생성해 받아올 파일을 제한해줍니다. 확장자는 jpg와 png, gif만 받아오고, CommonFileQuery에서 OrderByName(enum입니다)을 선택합니다. 말 그대로 이름 순으로 정렬하겠다는 의미입니다. 그 다음은 접근할 폴더 경로를 wstring(hstring으로 하셔도 됩니다) 변수에 저장하였고 사진이 있는 폴더를 가져왔습니다. 이 어플리케이션이 설치된 경로( Windows::ApplicationModel::Package::Current().InstalledLocation() )에서 해당 폴더를 비동기적으로 받아오겠다는 의미입니다. QueryOptions를 이용하여 picturesFolder에서 해당되는 쿼리 결과를 불러오고, 해당 쿼리 결과에서 GetFilesAsync 메서드를 사용해 파일 목록을 IVectorView 형식으로 받아오게 됩니다. 이후에 GridView에 반복문을 이용하여 Items를 붙여줍니다.

// 전략 ...

using namespace winrt;
using namespace Windows::UI::Xaml;
using namespace Windows::Foundation;
using namespace Windows::Storage::Search;
using namespace Windows::Storage;

// 중략 ...

IAsyncAction MainPage::GetItemsAsync()
{
	// 결과값을 이름순으로 정렬하고, jpg/png/gif 확장자만 불러옵니다.
	std::vector<hstring> fileTypeFilter{ L".jpg", L".png", L".gif" };
	QueryOptions queryOptions{
		CommonFileQuery::OrderByName,
		fileTypeFilter
	};
    
	// 설치 폴더 주소에서 Assets\Samples 폴더를 찾아갑니다
	std::wstring picturesFolderPath(L"Assets\\Samples");
	StorageFolder picturesFolder{
		co_await Windows::ApplicationModel::Package::Current()
					.InstalledLocation()
					.GetFolderAsync(picturesFolderPath)
	};
    
	// 위에서 생성한 QueryOptions대로 결과값을 받아온 후 비동기로 파일 목록을 받아옵니다.
	auto result = picturesFolder.CreateFileQueryWithOptions(queryOptions);
	auto Images = co_await result.GetFilesAsync();

	// GridView Items에 Images를 출력합니다.
	for (auto Image : Images) {
		ImageGridView().Items().Append(Image);
	}
}
    
    
// 후략 ...

   예제에서는 ItemsSource로 바인드를 하지만 GetFilesAsync의 반환값이 IVectorView<StorageFile>이기 때문에 컬렉션을 바인딩하기 위해서는 해당 값을 IVectorView<IInspectable>나 IBindableObservableVector<IInspectable>로 변경해야 합니다. 해당 방법을 사용하고 싶다면 Items().Append(child)가 아니라 빈 컬렉션을 생성한 후 값을 옮겨담은 다음에 바인드를 하시면 됩니다. 해당 컬렉션으로 변환하는 방법은 아래와 같습니다.

//빈 IVectorView<IInspectable> 생성
auto imageVector{ winrt::single_threaded_vector<Windows::Foundation::IInspectable>() };
// 배열 복사
for (auto Image : Images) {
	imageVector.Append(Image);
}
// GridView에 바인드
ImageGridView().ItemsSource(imageVector);



// 빈 IBindableObservableVector<IInspectable> 생성
auto imageVector2{ winrt::single_threaded_observable_vector<Windows::Foundation::IInspectable>() };
// 배열 복사
for (auto Image : Images) {
	imageVector2.Append(Image);
}
// GridView에 바인드
ImageGridView().ItemsSource(imageVector2);

 

  컴파일 시 ''auto'을(를) 반환하는 함수를 정의되기 전에 사용할 수 없습니다.' 라는 C3779 오류 메시지나 LNK2019 오류가 출력된다면 pch.h에 아래 코드를 추가해 주세요.

#include <winrt/Windows.Storage.h>
#include <winrt/Windows.Storage.Search.h>
#include <winrt/Windows.Storage.Streams.h>
#include <winrt/Windows.Storage.Pickers.h>

 

 

 

실행 결과

   Assets\Samples에 넣어둔 20개의 파일 개수만큼 Grid가 생성되는 것을 확인할 수 있습니다.

 

 

참고

docs.microsoft.com/ko-kr/windows/uwp/design/basics/xaml-basics-ui

사용자 인터페이스 만들기 자습서 - UWP applications

github.com/Microsoft/Windows-appsample-photo-lab

microsoft/Windows-appsample-photo-lab