Image Browser using WPF

•  
• Elements of the window:
  • Tree of disks and folders
    •  filled 'on demand', i.e. subfolders are read when the folder's item is being expanded.
  • List of pictures loaded from image files found in the folder selected in the tree.
  • A splitter between the tree and the list.
  • A slider for changing size of displaying pictures.
• Positions and sizes of elements:
  • The upper part of the window is occupied by the slider. The slider has fixed size and is aligned to the right edge of the window.
  • The tree and the list have always the same height. Resizing the window changes height of both of them.
  • When the window's width is changed, the list of pictures is also resized.
• Aesthetic details:
  • Border of the tree and the list:
    • A rounded rectangle drawn using a 1-pixel width pen.
    • Blue blured rectangle.
  • Pictures:
    • A shadowed rectangle as a background of each list item.
    • A label containing the filename and the size of the image (in pixels) aligned to the bottom edge.
    • The rest of the item's rectangle is filled with a picture resized according to its size ratio.
    • The selected (clicked) item is marked using a background grey rectangle.
  • The splitter:
    • Apply special appearance (see the pictures above).
• Hints:
  • The tree of disks and folders:
    • TreeView
    • TreeViewItem.Expanded
    • DirectoryInfo
  • The list of pictures:
    • DirectoryInfo.GetFiles, FileInfo
    • ObservableCollection
    • ScrollViewer, ListBox
  • The splitter:
    • GridSplitter
    • ResizeBehavior
  • Styles:
    • for GroupBox, to set the same border for the tree and the list,
    • for TreeView, to remove an additional border,
    • for GridSplitter, to apply a special look,
    • for Label, to set a common font regardless of the system's settings,
    • for ListBoxItem, to apply a proper look for a single item on the list,
    • for ListBox, to set properties of the list's items.