Codrut-Fluent-Design-System

Codrut Fluent Design System is a suite of components made to mimic the Interface of Windows 11, the Fluent Design System, This is not to be confused with CodrutsVisualLibrary, as that is ajust a suite of independent components

Notice: Under Construction!!

The component package is not at a state where it can be considered finished without encountering bugs. This package has advanced to Its Alpha Stage.

Components

Minimise Panel, a Panel that is able to minimise itself with a optional animation, works best with DoubleBuffered and for more panels, use Align.alTop
Panel, a TPanel component with inproved features and the ability to sync to the System Color Theme
Button, a powerfull button in the Fluent Design style, customizable with custom colors, shapes, button types, long presses, 2-states, checkable, dropdown, and more. It can also be aligned Vertically and Horizontalle, and the Icon as well
ButtonDesign, a very customizable and advanced button from CodrutsVisualLibrary with inproved features, can be styled multiple ways, icon support, gradient, accent color sync, align, subtext, automatic font sizing and more
Radio Button, a radio button component with multiple aligmnets
Scrollbar, a simple scrollbar that minimised itself to a line when not in use
Scrollbox, a modern scrollbox that uses the modern scrollbars
Selector, a component which allows to select between multiple options with a animation when switching
Checkbox, a animated checkbox that supports 3 states
Edit Box, a flue edit box with vertical alignment support
Standard icon, a drawable TGraphicControl icon component that has multiple icons
IconV iew, a simple icon view control that relies on the FXIcon class for drawing & storing. Very lightweight
Slider, a slider with tick support, hint previews and more features
Blur Material, a acrilic blur box that can be drawn from the wallaper or a screenshot of the screen. Great for Windows Fluent Design System like apps
Popup Menu, it supports (FXIconSelect) icons and can have multiple sub-menus, It used a acrylic effect for the background with a accent colored border. It also has Checkable items, Radio Items, separators and as mentioned before, It can go infinite layers deep
Text Box, a simple Label-Like component with more features. It also has a few components dependent on the base class
Animated Text Box, a label box with the ability to animate from a TStringList of values
Scroll Text, a box with scrolling text. The fade size, fade width and animation speed can be adjusted
Progress Bar, a simple animated progress bar with 4 different styles
ImageList, a work-in-progress component that can hold images
Simple shapes, such as Square, Circle, Triangle and more planned in the future
Linear Draw List, a list with a number of elements that are all drawn in a Notify Event given, the layouts are calculated automatically and you can provide a custom Content Justification and orientation.
Linear Control List, a linear draw list that accepts CFX controls, similar to a TControlList but more customizable in terms of layout and custom drawing.
Effects, you can overlay effects onto controls. Effects can be Blur, Monocrome, Invert, Deepfry, Color, Zoom and more!
Layout, which is a component container for storing other controls inside
Scrollable Layout, is another layout-based control but with two scrollbars for scrolling the control.

Apps made with CodrutFluentDesignSystem

Codrut Printing - https://github.com/Codrax/Codrut-Printing
File Sync Manager - (work in progress)

Creatng a CFX Visual Application

Create a new VCL Application in Delphi

Include all required Unit Files The required unit files are: CFX.Forms, CFX.Types, CFX.ThemeManager, CFX.Colors and CFX.Classes
Change Main Form class to FXForm

Place some components You can add any components from the Palette. They are grouped under CFX Main, CFX.Shapes, CFX Animations and CFX Utils.
Adding the Application Manager (FXAppManager) from CFX Utils The App Manager is an optional feature for your application that automatically creates a AppData directory for your application and saves the location on screen where the form was closed, and re-loads that on startup. It can also start an automatic update check for you sending a POST request to the APIEndpoint provided provided under the following format:

{
 "mode":"getversion",
 "app":"app-api-name"
}

And It expects a result in the format of

{
 "version":"1.0.0",
 "updateurl":"https://server.com/download-file.exe" // optional
{

Include additional units (optional) Some of the most usefull units to use are:

CFX.Dialogs, For dialogs and the classes for each type
CFX.QuickDialogs, For executing a quick dialog, with procedures as OpenMessage() or OpenDialog() or OpenInput()
CFX.FormClasses, This unit contains all classes for Full-Screen dialogs. Such as confirmations, status

Image Gallery

The following images are ALPHA versions of the component suite, the components are expected to change in the future.