Фотогалерея с помощью TStringGrid

Всем привет. В этой статье, я хотел бы рассказать: как я делал, в своем проекте, фотогалерею. Если честно, то сперва, решил немного «погуглить» по этому вопросу и найти что-нибудь интересное. В принципе я ничего не нашел, были варианты создавать TImage и в них грузить фото, но это меня, почему-то не сильно устроило. Дальше я нашел какой-то компонент, который предлагает создать фотогалерею, с разными эффектами и все в этом плане, но я даже не стал качать его.

После этого, я начал выбирать для себя, самый оптимальный вариант, тут пришла мне в голову мысль, использовать именно TStringGrid для фотогалереи, хотя тут, конечно, лучше бы подошел TDrawGrid, но я остановился, именно на компоненте TStringGrid. Тем более, я уже что-то похожее делал с данным компонентом, а еще скажу Вам, я даже про это рассказывал, в данном блоге – Как закрасить нужные ячейки в TStringGrid. Я решил этот вариант модернизировать и применить для своей задачи. Не знаю, правильно ли я все организовал и сделал, но у меня получилась фотогалерея, которая полностью устраивает меня.

На форму я установил компоненты:

• TStringGrid
• TListBox
• TImage

Компонент TStringGrid – естественно для самой фотогалереи. Компонент TListBox – для списка файлов фотогалереи (не обязательно компонент, можно TStringList использовать), а компонент TImage – для отображения фотографии, которую мы будем крепить в нашу фотогалерею (TStringGrid).

У меня получилась, примерно, следующая фотогалерея:

Да, эта возможность мне нужна была, именно для моего проекта MapWindow GIS в Delphi, а особенно для того, чтобы собрать локальные карты Яндекс в одно целое.

Для начала, я определился с размером каждой фотографии, которая будет отображаться в фотогалереи. Я остановился на стандартном размере – 150 на 150 пикселей. Поэтому, в свойствах DefaultColWidth и DefaultRowHeight, выставил значение 150. Затем, я подключил в uses, модуль pngimage, так как фотогалерея может содержать различные форматы изображений. Сделал фиксированную ширину фотогалереи (5 фотографий, затем переход на новую строку).

Далее, я просканировал папку с изображениями, получил их название (название каждого файла, с расширением) и названия всех файлов помещал в компонент TListBox (я говорил не обязательно в TListBox, можно, например, использовать тип TStringList). После того, как я получил список всех файлов, для фотогалереи (название всех файлов), я заполняю TStringGrid (каждую ячейку), названием этих файлов. В общем, событие OnShow формы, предназначенной для фотогалереи, выглядит следующим образом:

Исходный код

procedure TLocalMapYandex.FormShow(Sender: TObject);
var
 fs:TSearchRec;
 k,l:integer;
begin
  try
   ListBox1.Clear;
   j:=2;
   if FindFirst(ExtractFilePath(ParamStr(0))+'Yandex\'+'*.*', faAnyFile, fs)=0 then
    repeat
     ListBox1.Items.Add(fs.Name);
    until FindNext(fs)<>0;
     FindClose(fs);
   StringGrid1.RowCount:=Round((ListBox1.Count-3)/3);
   k:=0;
   l:=0;
   for i:=2 to ListBox1.Count-1 do
    begin
     StringGrid1.Cells[l,k]:=ListBox1.Items[i];
     inc(l);
     if l=5 then
      begin
       inc(k);
       l:=0;
      end;
    end;
  except
   on e:Exception do
  end;
end;

Для получения списка файлов, я использую функции FindFirst, после того, как список у меня сформирован, я создаю цикл, сначала этого списка (начинается с двух) и до конца, заполняю TStringGrid названием файлов. То есть, в каждой ячейке TStringGrid, будет присутствовать название каждого файла фотогалереи.

После того, как все это мы сделали, нам необходимо событие OnDrawCell компонента TStringGrid. В нем мы и будем отображать, каждую фотографию в каждой ячейке компонента. Я сделал так: если значение ячейки в TStringGrid (имя файла), совпадает со значением TListBox (именем файла), то загружаем в TImage данную картинку и перерисовываем в TStringGrid (в ячейку). Весь обработчик, у меня выглядит следующим образом:

Исходный код

procedure TLocalMapYandex.StringGrid1DrawCell(Sender: TObject; ACol,
  ARow: Integer; Rect: TRect; State: TGridDrawState);
var
 fs:TSearchRec;
 i:integer;
begin
  try
   for j:=2 to ListBox1.Count-1 do
    begin
     if (StringGrid1.Cells[ACol,ARow]=ListBox1.Items[j]) then
      begin
       Image1.Picture.LoadFromFile('Yandex\'+ListBox1.Items[j]);
       StringGrid1.Canvas.StretchDraw(Rect, Image1.Picture.Graphic);
      end;
    end;
   except
    on e:Exception do
   end;
end;

Не знаю, на сколько это правильно будет, но я особых примеров не нашел, как сделать фотогалерею, а дополнительный компонент, мне был ни к чему. Я просто модернизировал то, когда я закрашивал ячейки в TStringGrid. Остается только лишь узнать количество строк, для нашей фотогалереи. Я написал абы что, поэтому лучше всего сделать хорошую фотогалерею, чтобы выдавалось правильное количество строк, а не как у меня, с запасом. Поэтому можно добавить вот такую проверку, а затем определиться с количеством строк:

Исходный код

if ListBox1.Count-3 mod 5=0 then
    StringGrid1.RowCount:=(ListBox1.Count-3) div 5
   else
    StringGrid1.RowCount:=(ListBox1.Count-3) div 5+1;

Это с учетом того, что в каждой строке будет по 5 ячеек с фотографиями.

Это с учетом того, что в каждой строке будет по 5 ячеек с фотографиями. Также, можно добавить такую функцию, чтобы по нажатию на каждую картинку, она открывалась в новом окне (в полном размере), для этого, можно использовать событие OnSelectCell компонента TStringGrid.

Ну вот и все, как-то так я это все сделал!