Tile Control Tutorial. Step 8: Add Action Bar Items
- 7 minutes to read
In this step, you start with the full functional Tile Control-based demo application.
Action bars are Tile Control equivalents of context menus in other components. The Tile Control’s ActionBars property provides access to both the action bar settings and a collection of bar items (also called action buttons). By default, the action bar is empty, and therefore is not displayed.
To add a new item to the collection, click the ellipsis button to the right of the Tile Control’s ActionBars.Items property in the Object Inspector:
`
Then, you can use the collection editor window to add a new bar item:
Following the click on the ‘Add New’ button in the collection editor window, the Object Inspector displays the action bar item’s properties. Now change the item’s Name and Caption property values to ‘TileDemoExit’ and ‘Exit’, respectively:
In addition to (or as an alternative to) the caption, an action bar item is represented by an image. Normally, it is a simple black and white image with transparent pixels. The Tile Control displays this default image for any bar item whose Glyph and ImageIndex properties do not specify any image:
Use the Glyph property to replace the default image. The property’s image can consist of one to three state images in a row. They represent (from left to right) the normal, hot-tracked, and pressed item states:
| Item State | State Image Description | Image Example |
|---|---|---|
| Normal | A simple contoured image. |  |
| Hot-Tracked | A contoured image whose inner area is filled by a semitransparent color. |  |
| Clicked | A transparent image contour on a solid black background. |  |
Use the GlyphFrameCount property to specify the number of state images contained in the Glyph property’s image.
Now, set the TileDemoExit action button’s GlyphFrameCount property to 3 and load the image by clicking the ellipsis button to the right of the Glyph property:
Run the demo application and right-click within the Tile Control area. Click the Exit bar item to check its displayed states:
To close the demo application in response to a click on the Exit action button, handle its OnClick event:
procedure TTileControlDemo.TileDemoExitClick(Sender: TdxTileControlActionBarItem);
begin
Close;
end;
For the purpose of this demo application, the action bar is also intended to allow an end-user to switch between the available tile frame and slider transition effects.
Currently, the Tile Control provides seven frame transition animation effects that can be divided into five groups:
Horizontal scrolling (amScrollLeft and amScrollRight);
Vertical scrolling (amScrollUp and amScrollDown);
Fade In (amFade);
Segmented Fade (amSegmentedFade);
Random Fade (amRandomSegmentedFade).
Use the collection editor to add five more items to the action bar:
Assign the respective glyph sets to each of the newly created action buttons:
To visually separate the Exit action button from the animation effect buttons, set its Align property to abiaRight.
Then, to make the action bar more visually consistent with the Tile Control’s background, set the ActionBars.Color property to clSkyBlue in the Object Inspector:
See how the action bar color affects the color of the displayed glyphs:
To add functionality to the animation-related action buttons, handle their respective OnClick events. First, add the dxAnimation unit to the MainForm.pas file’s ‘uses’ clause (or the dxAnimation.hpp file to MainForm.h in C++Builder).
Prior to handling these events, create the ActivateNextFrame helper procedure that allows an end-user to see the applied animation effect immediately:
procedure TTileControlDemo.ActivateNextFrame;
begin
if(HouseDetailPage.ActiveFrameIndex < HouseDetailPage.Frames.Count - 1) then
HouseDetailPage.ActiveFrameIndex := HouseDetailPage.ActiveFrameIndex + 1
else
HouseDetailPage.ActiveFrameIndex := 0; // Close the loop
end;
Both the horizontal and vertical scrolling effects have two varieties each. The HorizontalScrolling action button’s OnClick handler allows an end-user to switch between the left and right scrolling effects while the respective VerticalScrolling action button’s handler can switch between the up and down scrolling effects:
procedure TTileControlDemo.HorizontalScrollingClick(Sender: TdxTileControlActionBarItem);
begin
if(HouseDetailPage.AnimationMode <> amScrollRight) then // If you click the bar item successively, it switches between two different horizontal animation effects
HouseDetailPage.AnimationMode := amScrollRight
else
HouseDetailPage.AnimationMode := amScrollLeft;
ActivateNextFrame;
end;
procedure TTileControlDemo.VerticalScrollingClick(Sender: TdxTileControlActionBarItem);
begin
if(HouseDetailPage.AnimationMode <> amScrollDown) then // If you click the bar item successively, it switches between two different vertical animation effects
HouseDetailPage.AnimationMode := amScrollDown
else
HouseDetailPage.AnimationMode := amScrollUp;
ActivateNextFrame;
end;
Unlike the horizontal and vertical transitions, individual fade animation effects do not have direct counterparts. Therefore, the FadeIn, SegmentedFade, and RandomSegmentedFade action button’s OnClick event handlers are almost identical. The following code example demonstrates the FadeIn bar item handler:
procedure TTileControlDemo.FadeInClick(Sender: TdxTileControlActionBarItem);
begin
if(HouseDetailPage.AnimationMode <> amFade) then // Both here and below, replace amFade with amSegmentedFade or amRandomSegmentedFade for the respective event handlers
HouseDetailPage.AnimationMode := amFade;
ActivateNextFrame;
end;
Run the demo application. Now all action bar items correctly switch between the frame transition effects. However, the action bar automatically hides in response to an action button click. For the sake of convenience, you can prevent action bar hiding in these cases. To do so, handle the MainTileControl’s OnActionBarsHide event:
procedure TTileControlDemo.MainTileControlActionBarsHide(Sender: TdxCustomTileControl; AReason: TdxTileControlActionBarVisibilityChangeReason; var AHandled: Boolean);
begin
if(AReason = abvcrActionButtonClick) then // If the action bar is about to be hidden by a button click...
AHandled := True; // Prevent automatic handling
end;
By default, the same Tile Control’s action bar configuration is displayed everywhere within the same application, including detail pages. Since unlike the tile frames, the TdxImageSlider control does not support vertical scrolling, you can handle the MainTileControl’s OnActionBarsShow event to display the context-related version of the action bar:
procedure TTileControlDemo.MainTileControlActionBarsShow(Sender: TdxCustomTileControl; AReason: TdxTileControlActionBarVisibilityChangeReason; var AHandled: Boolean);
begin
if((MainTileControl.ActiveDetail <> nil) and (VerticalScrolling.Visible = True)) then // If a detail page is active and the vertical scrolling button is visible
VerticalScrolling.Visible := False // Hide the button
else if(VerticalScrolling.Visible = False) then
VerticalScrolling.Visible := True; // Display the button
end;
As a result, the demo application displays the action bar without the vertical scrolling button at the active detail page:
Finally, expand the action button OnClick event handlers to make them switch animation effects for the tile frames and the image slider depending on the context (i.e., whether the detail page is currently active). The following code demonstrates the expanded version of the RandomSegmentedFade action button’s handler:
procedure TTileControlDemo.RandomSegmentedFadeClick(Sender: TdxTileControlActionBarItem);
begin
if(MainTileControl.ActiveDetail <> nil) then // If the detail page is active
begin
if(ADetailPage.Slider.TransitionEffect <> isteRandomSegmentedFade) then
ADetailPage.Slider.TransitionEffect := isteRandomSegmentedFade;
end
else
begin
if(HouseDetailPage.AnimationMode <> amRandomSegmentedFade) then
HouseDetailPage.AnimationMode := amRandomSegmentedFade;
ActivateNextFrame;
end;
end;
Then, expand the other action button OnClick handlers in the same manner. To see a transition effect applied to the slider immediately, you may also want to implement a procedure that works similarly to ActivateNextFrame.
Finally, run the demo application again and test its behavior.