Jump to content
IElite

Listbox Item Fonts

Recommended Posts

OK, I know I can create my own Item class. However, I just want to do something simple and can't figure it out

 

I want to change the font size and alignment of the item text.

 

No matter what font name or size I give, they do not seem to work.

 

Also, can't figure out how to center the text

procedure TfrmMenu.InitializeObject;begin
  inherited;
  {$I 'frmMenu:impl'}


  //lbxMenu.ItemClass:= TLBItem;
  lbxMenu.ItemHeight := 50;


  //font
  lbxMenu.Font.Color:= clBlack;
  lbxMenu.Font.Name:= 'arial';  //never seems to work
  lbxMenu.Font.Size:= 24;        //never seems to work
  lbxMenu.Font.Weight:= 'Bold';


  //colors
  lbxMenu.Color:= TColor($616A2E);  

  lbxMenu.Styles.ItemColor:= TColor($BA6F2E);
  lbxMenu.Styles.SelectedColor := TColor($9DAC10);
  lbxMenu.Styles.HighlightedColor:= TColor($BF7F30);


end;

Share this post


Link to post
Share on other sites

If I create a Class

 

 TLBItem = class(TW3Label)
  private
  protected
    procedure InitializeObject; override;
  end;




procedure TLBItem.InitializeObject;
begin
  inherited InitializeObject;
  StyleClass:= 'lbItem';
  AlignText:= taCenter;
end;

The style Class does not work

 

 

However, if I add the style class when I create my items, it does

 

procedure TfrmMenu.AddItem(ACaption: String);
 begin
   var lbItem := lbxMenu.Items[lbxMenu.Add] as TLBItem;
   lbItem.Caption := ACaption;
   lbItem.StyleClass:= 'lbItem';
 end;

The only problem is I am using Selected and Highlighted colors.  When an item is selected or highlighted, then my fonts change back to the original default fonts before the styleclass was applied

 

 

 

frustrating.....

Share this post


Link to post
Share on other sites

Hi warleyalex,

 

Thanks! Its interesting to see how many different ways things can be done.

 

I am baffled as to why some of those font properties work and some do not. As this by design, or a bug?

 

Also baffled as to why my second example does not work.

 

I am gonna try some of your suggestions.

 

Thanks again

Share this post


Link to post
Share on other sites

Here is my project 

 

https://cdn.rawgit.com/holmesshanea/smartmobilestudio/master/Adirondacky/www/index.html

 

and its code

 

https://github.com/holmesshanea/smartmobilestudio/tree/master/Adirondacky

 

 

In all browsers, the font does not work correctly when items are selected. The font reverts back before the style change

 

In some browsers, the image in the header does not show up

 

and in all browsers, when I click the refresh button, it goes black!

 

any suggestions

Share this post


Link to post
Share on other sites

Hi ielite,

 

if you look at the components source code, it's obviously that your code (style) is not working.

 

You have to define your custom style classes in the TW3ListBox, and not on the Item itself, e.g.:

lbxMenu.Styles.Item := 'lbItem';
lbxMenu.Styles.Highlighted := 'lbItem';
lbxMenu.Styles.Selected := 'lbItem';

The TW3ListBox.HandleMouseEnter event overrides the item style using its defined styles.

procedure TW3ListBox.ColorItem(item: TW3CustomControl; itemStyle: String;
  itemColor: TColor; colorVisible: boolean);
begin
  if colorVisible then begin
    item.StyleClass := itemStyle; //<- style applied!!!
    item.Color := itemColor;
  end;
end;

My advise:

If you have troubles with styles, use the build in chrome debugger (F12) and have a look at the html code (elements tab), and watch wich styles are applied and when.

Share this post


Link to post
Share on other sites

ahhhhh, i see

 

Awesome!  Thank You!  I will give that a try

 

 

Hi ielite,

 

if you look at the components source code, it's obviously that your code (style) is not working.

 

You have to define your custom style classes in the TW3ListBox, and not on the Item itself, e.g.:

lbxMenu.Styles.Item := 'lbItem';
lbxMenu.Styles.Highlighted := 'lbItem';
lbxMenu.Styles.Selected := 'lbItem';

The TW3ListBox.HandleMouseEnter event overrides the item style using its defined styles.

procedure TW3ListBox.ColorItem(item: TW3CustomControl; itemStyle: String;
  itemColor: TColor; colorVisible: boolean);
begin
  if colorVisible then begin
    item.StyleClass := itemStyle; //<- style applied!!!
    item.Color := itemColor;
  end;
end;

My advise:

If you have troubles with styles, use the build in chrome debugger (F12) and have a look at the html code (elements tab), and watch wich styles are applied and when.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×