단계를 세세히 나눈 것은 자주 프로젝트를 진행하는데 별로 도움이 되지 않은 것 같다
아무튼 계획은 다음과 같이 업데이트 하였다
화면 설계 :
- 메인 창은 왼쪽과 오른쪽으로 나눠진다
- 왼쪽에서는 사진 목록을 추가할 버튼을 만든다
- 그 아래에 사진 목록이 표시되도록 한다
- 오른쪽에는 시작 버튼을 만든다
화면 구현 :
- 사진 목록 추가 버튼을 눌렀을 때 파일 탐색기로 파일 추가를 할 수 있도록 한다
- 추가한 파일 이름이 아래 표시된다
사진 표시 : 추가한 파일이 사진으로 표시된다
새창 띄우기 :
- 시작 버튼을 눌렀을 때 새 창이 표시된다
- 새 창에서는 아무 사진이나 우선 표시한다
- 시작 버튼을 눌렀을 때 추가한 사진 중 첫 번째 사진이 표시된다
사긴 표시 :
- 메인 창에서 보여주는 시간을 입력 받는 영역을 만든다
- 시작 버튼을 누르면 시간이 흐르고 일시정지로 멈춘다
- 시작 버튼을 눌렀을 때 새 창에서 보여주는 시간이 지나면 다음 사진으로 전환된다
- 새 창에서 사진 전환까지 남은 보여주기 시간을 나타낸다
UI/UX 개선 및 Publish :
- github 저장소 Open 후 바이너리 제공
추가 기능 :
- 사진 크롤링 기능 추가
다음 단계
- 멀티 플랫폼 앱으로 전환
----------------
일단 이전까지 상황은 사진 추가를 윈도우 탐색기를 이용하여 추가하고 추가된 사진 이름이 표시되는지 확인 했었다
이제 추가되는 저 사진 이름들을 사진 그리드에 실제 사진으로 추가해야한다
추가인 만큼 이전에 있었던 사진들에 이어서 추가를 시키거나첫번째 위치에 추가하면서 이전 사진들을 한칸씩 밀도록 해야한다
사진이 많아졌을 경우 확인하기 쉽도록 후자의 방법으로 진행한다
그러기 위해서 우선 GridView 대신 ListBox를 사용하여 사진의 추가/삭제를 좀 더 쉽도록 한다
ListBox를 이용하여 불러온 사진들을 쭉 보여주기로 한다
// MainWindow.xaml
<ListBox Name="lvPhotoList" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
// MainWindows.xaml.cs
private void ImageAdditionButton_Click(object sender, RoutedEventArgs e)
{
OpenFileDialog ofd = new OpenFileDialog();
ofd.Filter = "Image Files(*.jpg, *.png) | *.jpg;, *.png; | All Files(*.*) | *.*";
ofd.Multiselect = true;
if ( ofd.ShowDialog() == true)
{
List<Image> imageList = new List<Image>();
foreach ( string filename in ofd.FileNames )
{
Image image = new Image();
image.Source = new BitmapImage(new Uri(filename));
image.Height=200;
image.Width=200;
image.Stretch = System.Windows.Media.Stretch.Uniform;
imageList.Add(image);
}
lvPhotoList.ItemsSource = imageList;
}
}위 코드와 같이 구현하면 사진처럼 보여진다
사진 목록 초기화까지 추가한 모습
댓글