Table of Contents
Intro
Have you wondered how to make applications that look like Universal Windows Platform based applications, for instance having the Fluent Design System for your Delphi FireMonkey Applications? Since the UX and UI of the UWP applications are based on Fluent, they look so modern and also shiny! Yeah, you can do that thing with the TStyle, because RAD Studio offers many styles or customization that you want. But, the Fluent Design System based components are different in some ways, for instance, using light, and connected animations.
Furthermore, By adopting Fluent Design, UWP automatically supports common input methods such as ink, touch, gamepad, keyboard, and mouse.
So, in this post, you will learn how to enable Delphi FireMonkey applications to utilize Windows Runtime (WinRT) and UWP controls with the WinRT for FireMonkey Library by WINSOFT
Specifications
- Uses Windows Runtime API and XAML Islands
- Supports Windows 32 and 64-bit applications
- Available for Delphi XE3 – 10.4
- Requires Windows 10
Overview
The first thing is to configure the library into your RAD Studio. Please, follow this short tutorial if you don’t have a component/library installing/configuring experience!
Also, watch see this demo action video that shows how UWP controls work in a Delphi FireMonkey application
Development
Well, how we can create UWP components? The solution is to give the XAML code. That is it. But how? Here is our demo UI:
As you can see, you just select the available components from the ComboBox. Then it sets the XAML code into TMemo which is at the bottom. Then when the TMemo gets the XAML code, it is triggered (with the OnChangeTracking) to give that XAML code to the TFXamlControl component. Finally, activates the TFXamlControl component. Voila! We got the UWP Fluent Component within our Delphi FireMonkey application.
Here is the implementation:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
procedure TFormMain.ComboBoxControlChange(Sender: TObject); begin case ComboBoxControl.ItemIndex of 0: ShowButton; 1: ShowCalendar; ... end; end; procedure TFormMain.SetXaml(const Text: string); begin Memo.Lines.Text := Text; end; procedure TFormMain.MemoChangeTracking(Sender: TObject); begin FXamlControl.Xaml.Text := Memo.Lines.Text; FXamlControl.Active := True; end; procedure TFormMain.ShowButton; begin SetXaml('<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Margin="10,0,0,0">Button</Button>'); end; procedure TFormMain.ShowCalendar; begin SetXaml('<CalendarView xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Margin="10,0,0,0"/>'); end; |
So, this is amazing, but we have only the component, how I can set an event listener or an event handler to that component? The answer is we need to implement a new click handler class for handling UWP UI components. And we get the UWP UI element and if that component supports clickability, then you can set the event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
type TClickHandler = class(TInterfacedObject, UI_Xaml_RoutedEventHandler) procedure Invoke(sender: IInspectable; e: UI_Xaml_RoutedEventArgs); safecall; end; procedure TClickHandler.Invoke(sender: IInspectable; e: UI_Xaml_RoutedEventArgs); begin ShowMessage('Control clicked'); end; procedure TFormMain.ButtonAddClickEventHandlerClick(Sender: TObject); var UIElement: UI_Xaml_UIElement; begin if FXamlControl.Active then begin UIElement := FXamlControl.Content; if not Supports(UIElement, UI_Xaml_Controls_Primitives_IButtonBase) then ShowMessage('Button control not found') else begin (UIElement as UI_Xaml_Controls_Primitives_IButtonBase).add_Click(TClickHandler.Create); ShowMessage('Event handler added'); end; end; end; |
The last thing we should consider is giving text or content to UWP XAML UI components. First, we check if that component supports the content setting with the System.SysUtils.Supports function. Then you can set content to them.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
procedure TFormMain.ButtonSetContentClick(Sender: TObject); var UIElement: UI_Xaml_UIElement; begin if FXamlControl.Active then begin UIElement := FXamlControl.Content; if not Supports(UIElement, UI_Xaml_Controls_IContentControl) then ShowMessage('Control does not support Content property') else (UIElement as UI_Xaml_Controls_IContentControl).Content := Box('Hello!'); end; end; |
Read about the new world’s C++/WinRT and how it can help your organization achieve great performance in producing smaller binaries than any other language option for Windows Runtime.
Head over and check out the full WINSOFT WinRT for FireMonkey library!
Like what you see? You can get WinRT for FireMonkey and over 100 other fantastic WinSoft components with our Enterprise Component Pack. For a limited time, when you purchase RAD Studio Enterprise or Architect Edition at special Upgrade Pricing, you will also get this package of third-party software worth over $13,000, including the full WinSoft Component Library, at NO EXTRA COST! Step up to RAD Studio 10.4.1 today!
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
