sgcNavigation, FireMonkey, .NET ve Delphi 7 ile 13 için aynı gezinti çubuğu

Yerleşim ve modlar

Tek bileşende modern bir uygulama kenar çubuğu

Çoğu iş uygulaması ana formun sol kenarında aynı şeyi ister: alanlara göre gruplanmış, geçerli sayfası açıkça işaretlenmiş bir sayfa listesi. Forma bir TsgcVCLNavigationBar bırakın, sola hizalayın ve öğeleri ekleyin. Grup başlıkları altlarındaki satırları soluk bir renkle adlandırır ve asla seçilmez. Seçili satır vurgu tonlu bir arka plan ve 3 piksellik bir vurgu çubuğu alır, böylece kullanıcılar nerede olduklarını her zaman görür. Üzerine gelme ve basılı durumları, ipuçları ve devre dışı satırlar sizin yerinize çizilir, bu yüzden çubuk ilk çalıştırmada tamamlanmış görünür.

• Mode := nbmSidebar varsayılan stildir
• IsGroup bir öğeyi grup başlığına dönüştürür
• ItemHeight ve GroupHeight satır yüksekliklerini belirler
• Fare tekerleği uzun listeleri kaydırır, ScrollIntoView herhangi bir öğeyi görünür kılar
• Arapça ve İbranice için sağdan sola: simgeler ve başlıklar yer değiştirir, girinti, ok işaretleri, rozetler ve daralt düğmesi yansıtılır

Yerleşim ve modlar

Animasyonlu simge rayına daralma

Geniş kenar çubukları, kullanıcılarınızın görmeye geldiği verinin yerini çalar. Collapsed'i ayarlayın; çubuk genişletilmiş genişliğinden yaklaşık 150 ms içinde dar bir simge rayına katlanır. Rayda yalnızca simgeler çizilir, başlık ipucuna dönüşür, grup başlıkları ayırıcı çizgilere ve rozetler noktalara dönüşür, böylece önemli hiçbir şey kaybolmaz. Çubuk kendi genişliğini ayarlar, yanındaki içerik de alClient ile bunu takip eder. Collapsed özelliğini bir hamburger düğmesine, bir kullanıcı ayarına veya formun genişliğine bağlayın; ray kenar çubuğu ve akordeon modunda aynı şekilde açılıp kapanır.

• Collapsed iki genişlik arasında geçiş yapar
• Mantıksal piksel olarak ExpandedWidth (220) ve CollapsedWidth (56)
• AnimateCollapse animasyonu açar veya kapatır
• OnCollapsedChange rayın ne zaman açılıp kapandığını bildirir

Gezinti yapısı

Aramalı çok düzeyli bir ağaç

Büyük uygulamalar düz bir sayfa listesine sığmaz. Mode değerini nbmTree yapın, çubuk istediğiniz kadar düzeye sahip bir ağaca dönüşür: öğeler düz bir koleksiyon olarak kalır ve bir öğenin Depth değeri düzeyini belirler; bu yüzden çubuğu dolduran kod neredeyse değişmez. Her düzey girintilidir ve her üst öğe daraltılabilir. ShowSearch özelliğini açtığınızda öğelerin üstündeki bir arama satırı, kullanıcı yazarken ağacı süzer, her eşleşmenin üst öğelerini açık tutar ve eşleşen karakterleri vurgular. Bulanık eşleştirme, 'stg' yazıldığında 'Settings' öğesini bulur. Ağaç modu ve arama tüm sürümlerin parçasıdır.

• Mode := nbmTree ve öğe başına Depth
• ExpandAll, CollapseAll ve Expand(aIndex, aRecursive)
• FilterMode değeri nfmContains veya nfmFuzzy olan Filter
• ShowSearch arama satırını çizer, Esc onu temizler
• Sağ ve Sol ok açar ve daraltır, * bir dalın tamamını açar

Gezinti yapısı

Ağacı izleyen bir breadcrumb

Derin ağaçlar, nerede olduğunuzu görmenin ve yukarı atlamanın bir yolunu gerektirir. Breadcrumb yolu bir segment satırı olarak gösterir, örneğin Mail, Folders, Work. Bir segmente tıklamak oraya geri döndürür, segmentin ardındaki ok ise başka bir yere gitmek için alt öğelerini listeler. Onu bir gezinti çubuğuna bağlayın, seçili öğeyi izlesin ya da Path veya Segments üzerinden kendiniz doldurun. Yol çok uzun olduğunda ilk segmentler bir taşma düğmesinde toplanır. Kayıtlı sürümde boş alana tıklamak, F4 veya Ctrl+L, breadcrumb'ı tam yolu içeren bir düzenleme alanına çevirir; tıpkı bir dosya yöneticisinin adres çubuğu gibi.

• NavigationBar, breadcrumb'ı bir çubuğa bağlar
• Kendi Path, PathDelimiter ve OnGetChildren değerleriniz
• OnSegmentClick ve AutoTruncate
• Yalnızca Kayıtlı OnPathEdit ile düzenleme modu

Gezinti yapısı

Sekmelerin başlık çubuğunda olduğu bir sekmeli form

Tarayıcılar, terminaller ve modern düzenleyiciler sekmelerini pencere başlığına koyar; böylece belgeler ekranın tüm yüksekliğini kullanır. Sekmeli form uygulamanız için aynısını yapar. Onu formun üzerine bırakın ve sekme şeridine bağlayın: sgcUI yerel başlığı kaldırır ve pencere simgesi, sekmeler, yeni sekme düğmesi ile simge durumuna küçült, ekranı kapla ve kapat düğmeleri olan temalı bir başlık çubuğu çizer. Başlık çubuğu uygulamanın sgcUI temasını izler, Classic veya Fluent, açık veya koyu. Pencere gölgesini, yeniden boyutlandırma kenarlıklarını ve ekranı kaplama davranışını korur; işaretçi ekranı kapla düğmesinin üzerinde durduğunda Windows 11 yakalama düzenlerini gösterir. Son sekmenin sağındaki boş alan pencereyi sürükler. Kayıtlı sürümde kullanıcı bir sekmeyi şeritten yeni bir pencereye sürükler ve bir web tarayıcısı gibi başka bir pencerenin başlık çubuğuna bırakır.

• Delphi ve C++ Builder'da TsgcVCLNavigationTabbedForm ve TsgcFMXNavigationTabbedForm, .NET'te TsgcWinFormsNavigationTabbedForm, TsgcWpfNavigationTabbedWindow ve TsgcAvaloniaNavigationTabbedWindow
• Tabs sekme şeridini bağlar. Delphi'de Notebook, bir notebook'un şeridini başlık çubuğuna taşır, sayfalar notebook'ta kalır
• Boş şeritte çift tıklama pencereyi büyütür, sağ tıklama sistem menüsünü gösterir
• WPF ve Avalonia'da penceredeki Tabs ek özelliği kurulumu XAML'den yapar
• Yalnızca Kayıtlı ayırma: TearOffMode, ayrılan sekmeyi işaretçinin altındaki pencereye taşır, ttmNewForm ise onu OnCreateTearOffForm ile işaretçiyi izleyen yeni bir pencerede açar

Sekmeli form, Community dahil her sürümde bulunur. Ayırma, sekmelerin ayırması gibi Kayıtlı sürümdedir. Temalı çerçeve masaüstü bileşimli Windows gerektirir ve FireMonkey'de yalnızca Windows'ta uygulanır: macOS, Linux, iOS ve Android'de yerel başlık çubuğu kalır.

Yerleştirme yöneticisi Yalnızca Kayıtlı

Panelleri bırakma kılavuzlarına sürükleyin

Çok sayıda araç penceresi olan uygulamalar, kullanıcının düzenleyebileceği bir çalışma alanına ihtiyaç duyar. TsgcVCLDockManager, TsgcFMXDockManager, TsgcWinFormsDockManager, TsgcWpfDockManager ve TsgcAvaloniaDockManager araç panellerini formun dört kenarına, bölücülerle iç içe bölmeler halinde ve sekmeli gruplar halinde yerleştirir. Kullanıcı bir başlığı veya sekmeyi sürükler ve bırakma kılavuzları nereye konabileceğini gösterir: işaretçinin altındaki gruptaki bir pusula o grubu bir kenardan böler veya paneli içine sekme olarak ekler, kenar kılavuzları paneli tüm alanın bir kenarına yerleştirir ve vurgu renginde bir önizleme dikdörtgeni panelin kaplayacağı yeri gösterir. Esc sürüklemeyi iptal eder. Avalonia yerleştirme sayfası TsgcAvaloniaDockManager'ı XAML ve C# ile gösterir.

• Panels.Add ile Name, Caption, Placement ve DockSize, kendi denetiminiz Control olarak
• Kodda DockPanel, ClosePanel, ShowPanel ve ActivatePanel
• OnPanelDock bir yerleştirmeyi, yüzdürmeyi veya otomatik gizleme değişikliğini reddedebilir
• Her başlıkta kapatma, sabitleme, büyütme ve menü düğmeleri

Yerleştirme yöneticisi Yalnızca Kayıtlı

Masaüstünde yüzen pencereler

Kılavuzlardan uzağa bırakılan bir panel, kullanıcının başka bir yere veya başka bir monitöre taşıyabileceği kendi penceresinde yüzer. Yüzen pencere yerleştirme alanı gibi bir düzen tutar, bu yüzden ona başka paneller yan yana veya sekme olarak yerleştirilebilir ve başlığına çift tıklamak onu yeniden yerleştirir. Yüzen pencereler forma ait, görev çubuğunda görünmeyen, çizilmiş bir başlığı ve yeniden boyutlandıran bir kenarlığı olan çerçevesiz araç pencereleridir ve her biri kendi monitörünün ölçeğini kullanır. VCL, WinForms, WPF, Avalonia masaüstü uygulamalarında ve Windows ile macOS üzerinde FireMonkey'de çalışırlar. iOS ve Android'de paneller yüzmez, sürükleme yalnızca kılavuzları gösterir.

• Kodda FloatPanel(aPanel, aLeft, aTop)
• Yerleştirme yöneticisinde AllowFloating, panel başına CanFloat
• Placement := dplFloat bir paneli FloatWidth x FloatHeight boyutunda yüzen olarak başlatır
• Görünür çalışma alanının dışındaki bir yüzen pencere, düzen yüklenirken alanın içine geri taşınır

Yerleştirme yöneticisi Yalnızca Kayıtlı

Düzeni kaydedin ve geri yükleyin

Kullanıcılar panellerini bıraktıkları yerde bulmayı bekler. SaveLayout tüm düzeni kompakt JSON olarak yazar: bölmeleri ve boyutlarını, grupları ve etkin panellerini, her kenarın otomatik gizlenen gruplarını, sınırlarıyla yüzen pencereleri, büyütülmüş grubu ve gizli panelleri. LoadLayout onu bir sonraki başlatmada geri yükler. Metin Delphi ve .NET'te aynıdır, bu yüzden tek bir düzen dosyası ikisine de hizmet eder. Düzenin adını verdiği ama formda henüz bulunmayan bir panel, örneğin açık olan bir belge, OnRestorePanel olayına ulaşır ve kodunuz içeriğini oluşturur veya paneli bırakır.

• SaveLayout, SaveLayoutToFile ve SaveLayoutToStream
• LoadLayout, LoadLayoutFromFile ve LoadLayoutFromStream yabancı bir metinde False döndürür ve hiçbir şeyi değiştirmez
• Çalışma zamanında oluşturulan paneller için OnRestorePanel
• Panel başına bir "Window" komutu komut paletini bir pencere değiştiriciye dönüştürür

FireMonkey, VCL, WinForms, WPF ve Avalonia için C++ Builder desteğiyle Kayıtlı sürüm. Klavye, UI Automation, sağdan sola, temalar ve yüksek DPI dahildir.

Bilgi veren öğeler

Okunmamış sayılar için rozetler

Kullanıcılar sayfayı açmadan önce dikkat gerektiren bir şey olduğunu görmelidir. Bir öğeye okunmamış sayı ya da Yeni sözcüğü gibi bir Badge verin; çubuk onu satırın sağında vurgu renginde, siyah veya beyaz (hangisi daha okunaklıysa) metinli bir hap olarak çizer. Değer değiştikçe koddan ayarlayın, çubuk kendini yeniden çizer. Daralmış rayda rozet simge üzerinde bir noktaya dönüşür. Rozet düz metin olduğundan aynı özellik, özel çizim kodu olmadan sayıları, kısa etiketleri ve durum sözcüklerini kapsar.

• Badge öğe başına kısa bir metindir
• Boş bir Badge hiçbir şey çizmez
• Hap, tema vurgusunu veya sizin AccentColor değerinizi kullanır
• Sayıyı açıklamak için Hint ile birleştirin

Bilgi veren öğeler Yalnızca Kayıtlı

Öğeleri TAction'larınıza bağlayın

Bir TActionList üzerine kurulu uygulamalar komutlarını, başlıklarını ve etkinlik kurallarını zaten tek yerde tutar. Bir öğeyi Action özelliği üzerinden herhangi bir VCL veya FireMonkey TAction'a bağlayın; Caption, Enabled, Visible, Hint ve ImageIndex eylemi izler. Tıklama, eylemi çubuk ActionComponent olacak şekilde çalıştırır ve OnUpdate boşta çalışır, böylece eylem devre dışı kalır kalmaz öğe grileşir. .NET'te aynı iş Command ve CommandParameter ile yapılır. Tek bir TActionList formun menüsünü, araç çubuğunu ve klavye kısayollarını yönetebilir.

• Action bir öğeyi herhangi bir TBasicAction'a bağlar
• Öğenin OnClick olayı eylemin yerine çalışır
• SGC_NAVIGATION_ACTIONS altında derlenir
• .NET: ICommand ile Command ve CommandParameter

Community: eylem yerine öğenin OnClick veya çubuğun OnItemClick olayını atayın.

Klavye, temalar ve çıktı

Açık, koyu ve vurgu renginiz

Uygulamanın temasını yok sayan bir menü sonradan eklenmiş gibi görünür. Theme; yüzey, kenarlık, metin, grup başlığı, üzerine gelme ve vurgu renklerini paylaşılan sgcUICore token'larından ayarlar, böylece aynı Theme'e sahip bir çubuk ile bir sgcDashboard birebir uyum sağlar. AccentColor, seçim çubuğu, odak dikdörtgeni ve rozetler için vurguyu marka renginizle değiştirir. Bir dashboard kutucuğunda barındırılan çubuk, dashboard'un temasını kendiliğinden izler. Temayı çalışma zamanında değiştirin, çubuk anında yeniden çizilir; ayarlar sayfanızdaki bir koyu mod anahtarı için hazırdır.

• Theme: utDefault (varsayılan, uygulama temasını izler), utLight veya utDark
• AccentColor $AARRGGBB değeri olarak, 0 tema vurgusunu korur
• Her sgcUI ürünüyle aynı token'lar
• Dashboard kutucukları temalarını çubuğa iletir