Создание Настроек Оформления для Панелей Деревьев в Delphi, Аналогичных Outlook 2013

Delphi , Компоненты и Классы , TTreeView

Приветствую, уважаемые читатели! Сегодня мы поговорим о том, как можно изменить внешний вид панели дерева в Delphi, чтобы она напоминала интерфейс Outlook 2013. В частности, мы рассмотрим, как настроить выделение элементов в дереве, чтобы оно соответствовало желаемому стилю Outlook.

Введение в тему

В Delphi для работы с визуальными стилями элементов управления используется механизм кастомизации элементов в процессе их отрисовки. Это позволяет нам изменять внешний вид элементов управления, не вдаваясь в детали их реализации. В случае с TTreeView мы можем использовать обработчик CustomDraw для изменения основных свойств, таких как цвет шрифта, фон и другие визуальные атрибуты.

Проблема пользователя

Пользователь столкнулся с проблемой, что при попытке изменить стиль выделения элементов в дереве с помощью CustomDraw, он получал стандартное выделение, которое не соответствовало желаемому внешнему виду, аналогичному Outlook 2013. Это происходило даже несмотря на попытки изменить цвета фона и шрифта.

Пример кода

procedure TMainForm.TreeView1CustomDrawItem(Sender: TCustomTreeView;
  Node: TTreeNode; State: TCustomDrawState; var DefaultDraw: Boolean);
begin
  if Node.Level = 1 then
    Sender.Canvas.Font.Size := Sender.Canvas.Font.Size + 2;

   if cdsHot in State then
    Sender.Canvas.Brush.Color := $00F7E6CD
   else if (cdsSelected in State) or (cdsFocused in State) or
    (cdsChecked in State) then
    Sender.Canvas.Brush.Color := $00F2F2F2
   else
    Sender.Canvas.Brush.Color := $00DEDEDE;
  DefaultDraw := true;
end;

Код выше пытается изменить стиль выделения, но, как видно из примера изображения, результаты не соответствуют ожидаемым.

Решение проблемы

Чтобы решить проблему, необходимо отключить визуальные стили для элемента управления. Это можно сделать, вызвав функцию SetWindowTheme с пустыми параметрами на элементе дерева. Пример кода для этого представлен ниже:

type
  TTreeView = class(Vcl.ComCtrls.TTreeView)
  protected
    procedure CreateWnd; override;
  end;

uses uxtheme;

procedure TTreeView.CreateWnd;
begin
  inherited;
  SetWindowTheme(Handle, nil, nil);
end;

Далее, в обработчике CustomDraw можно задать различные стили для выделенных и горячих элементов:

procedure TForm1.TreeView1CustomDrawItem(Sender: TCustomTreeView;
  Node: TTreeNode; State: TCustomDrawState; var DefaultDraw: Boolean);
begin
  if cdsFocused in State then begin
    Sender.Canvas.Brush.Color := $00F2F2F2;
    Sender.Canvas.Font.Color := clBlack;
    Sender.Canvas.Font.Style := Sender.Canvas.Font.Style + [fsBold];
  end else if cdsHot in State then
    Sender.Canvas.Brush.Color := $00F7E6CD
  else
    Sender.Canvas.Brush.Color := $00DEDEDE;
end;

Выводы

Использование обработчика CustomDraw позволяет гибко настраивать внешний вид элементов управления в Delphi. Отключение визуальных стилей с помощью SetWindowTheme дает возможность задать уникальные цвета и шрифты для выделения элементов в дереве, что позволяет имитировать стиль Outlook 2013.

Надеемся, что эта информация окажется полезной для разработчиков, работающих с компонентами Delphi и стремящихся к созданию красивых и функциональных интерфейсов.

Примечание: В коде используются шестнадцатеричные значения цветов, которые можно заменить на соответствующие значения из палитры цветов Delphi для достижения желаемого визуального эффекта.

Создано по материалам из источника по ссылке.

Рассматривается процесс настройки внешнего вида панели дерева в Delphi для создания интерфейса, аналогичного Outlook 2013, через использование обработчика `CustomDraw` и отключение стандартных визуальных стилей.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: TTreeView ::