Programujeme: dubna 2016

RAD Studio 10 Seattle a Windows 10 (část 2.)

V minulém příspěvku jsme si ukázali, jak provázat aplikace vyvíjené v prostředích Delphi nebo C++ Builder 10 Seattle s centrem akcí operačního systému Windows 10, nebo jak použít nové vizuální styly.
Další novou komponentou pro knihovnu VCL, která je navržena pro podporu nových Windows 10 je ovládací prvek "SplitView". Komponenta SplitView je obdobou komponenty MultiView, která je součástí knihovny FireMonkey pro návrh multiplatformních aplikací. Jedná se o výsuvný panel, který může být použit k umístění libovolných ovládacích prvků. S použitím výsuvných panelů se můžeme setkat jak přímo u Windows 10, tak u mnoha dalších aplikací v čele s kancelářským balíkem Microsoft Office.

Realizace podobných výsuvných nabídek je nyní ve vývojových prostředích Delphi a C++Builder poměrně jednoduchou záležitostí. Jednou z možných variant je právě použití komponenty SplitView a komponenty CategoryButtons, která nabízí velmi široké možnosti pro přizpůsobení vzhledu a chování.

SplitView

Důležitá nastavení pro panel SplitView jsou:
Placement - Určuje umístění panelu v rámci formuláře. SplitView lze aktuálně uchytit k levé (svpLeft) nebo pravé (svpRight) hraně okna.
CloseStyle - Jak název napovídá, upravuje toto nastavení chování panelu při jeho skrytí. To může být buď úplné (svcColapse), nebo částečné (svcCompact). Šířku vysunutého a částečně skrytého panelu lze určit dle potřeby.
DisplayMode - Nastavení, které ovlivňuje, zda klientská oblast formuláře je či není dotčena zobrazením panelu. Pokud ne (svmOverlay), panel při vysunutí "překrývá" vizuální prvky umístěné v oblasti, kde se panel SplitView zobrazí. V opačném případě (svmDocked) budou komponenty, které mají pozici určenou relativně ke klientské oblasti formuláře panelem "odsunuty".
UseAnimation - Určuje, zda má být pro zobrazení/skrytí SplitView použita animace (panel se neobjeví, ale je vysouván postupně). Pokud je animace zapnuta, lze nastavit počet kroků (parametr AnimationStep) a časový odstup (parametr AnimationDelay) mezi nimi. Kombinací těchto atributů lze měnit plynulost, s jakou se bude komponenta SplitView zobrazovat.

Delphi

// Nastavení SplitView
SplitView1.Placement := svpLeft;
SplitView1.CloseStyle := svcCompact;
SplitView1.DisplayMode := svmDocked;
SplitView1.UseAnimation := True;
SplitView1.AnimationStep := TrackBar1.Position;
SplitView1.AnimationDelay := TrackBar2.Position;

// Zobrazení panelu
procedure TForm1.Button1Click(Sender: TObject);
begin
if SplitView1.Opened then
SplitView1.Close
else
SplitView1.Open;
end;

C++Builder

// Nastavení SplitView
SplitView1->Placement = svpRight;
SplitView1->CloseStyle = svcCollapse;
SplitView1->DisplayMode = svmOverlay;
SplitView1->UseAnimation = True;
SplitView1->AnimationStep = 50;
SplitView1->AnimationDelay = 30;

// Zobrazení panelu
void __fastcall TForm1::Button1Click(TObject *Sender)
{
if (SplitView1->Opened) {
SplitView1->Close();
} else {
SplitView1->Open();
}
}

CategoryButtons

Pro návrh nabídky, kterou lze uživateli zobrazit s využitím SplitView můžeme použít komponentu CategoryButtons. Tato komponenta slouží jako kontejner pro správu tlačítek. Tlačítka lze členit do kategorií, které lze dle potřeby skrýt (sbalit) nebo zobrazit (rozbalit). Tlačítka mohou kromě textu obsahovat i grafiku.

Pokud se chceme vzhledem co nejvíce přiblížit výsuvným nabídkám operačního systému Windows 10, musíme pro CategoryButtons změnit některá nastavení.

Delphi

V případě, že chceme u jednotlivých tlačítek zobrazit kromě textu i ikony, připravíme si vhodnou grafiku. Tlačítkům můžeme ikony přiřadit jak přímo, tak odkazem na index komponenty ImageList, kterou můžeme použít jako kontejner:
CategoryButtons1.Images := iList;

Pokud pro SplitView nastavíme částečné skrývání (svcCompact), je vhodné ve stavu closed zneviditelnit popisky tlačítek (z čistě estetického důvodu):
CategoryButtons.ButtonOptions :=
CategoryButtons.ButtonOptions - [boShowCaptions];

Dále skryjeme rámeček, aby tlačítka působila jako nedílná součást SplitView:
CategoryButtons.BorderStyle := bsNone;

Tlačítka ukotvíme ke komponentě SplitView:
CategoryButtons.Anchors := [akLeft, akRight];

Dle potřeby upravíme písmo pro popisky tlačítek:
CategoryButtons.Font.Size := 11;
CategoryButtons.Font.Color := clWhite;

Odpovídajícím způsobem upravíme také vzhled tlačítek:
// Výšku tlačítka
CategoryButtons.ButtonHeight := 45;
// Standardní barvu tlačítky
CategoryButtons.RegularButtonColor := clNone;
// Barva stisknutého tlačítka
CategoryButtons.SelectedButtonColor := clNone;
// Barva tlačítka nad kterým je kurzor myši
CategoryButtons.HotButtonColor := clGray;
// Šířka tlačítka přes celou šířku komponenty CategoryButtons
CategoryButtons.ButtonOptions :=
CategoryButtons.ButtonOptions + [boFullSize];
// Tlačítka nebudou v rámečku kategorie
CategoryButtons.ButtonOptions :=
CategoryButtons.ButtonOptions + [boCaptionOnlyBorder];
// Horizontální zobrazení kategorií
CategoryButtons.ButtonOptions := CategoryButtons.ButtonOptions
- [boVerticalCategoryCaptions];

Stejný kód pro C++Builder

CategoryButtons->Images = iList;
CategoryButtons->Categories->Items[0]->Items->Items[0]->ImageIndex = 0;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boShowCaptions;
CategoryButtons->BorderStyle = bsNone;
CategoryButtons->Anchors = CategoryButtons->Anchors<<akLeft<<akRight;
CategoryButtons->Font->Size = 11;
CategoryButtons->Font->Color = clWhite;
CategoryButtons->ButtonFlow =cbfHorizontal;
CategoryButtons->ButtonHeight = 45;
CategoryButtons->RegularButtonColor = clNone;
CategoryButtons->SelectedButtonColor = clNone;
CategoryButtons->HotButtonColor = clGray;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boFullSize;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions<<boCaptionOnlyBorder;
CategoryButtons->ButtonOptions =
CategoryButtons->ButtonOptions>>boVerticalCategoryCaptions;

Výsledkem by měl být zhruba následující vzhled nabídky: