Centering Text using a Visual Element

[jesse]

I am customizing a tile being put into a Panorama.  I want some text to the lower part of the tile.  I've done this by creating a "LightVisualElement" and adding it to the tile's children... I then add a RadLabelElement to that VisualElement and set it's text.  I would like that ext to be centered to the lower middle of the tile, however nothign I can do can make this happen.

 

I am setting the VisualElement's alignment to BottomCenter, and tried the same with the RadLabelElement.  Any suggestions would be greatly appreciated.

 

LightVisualElement lowerElement;

lowerElement.Alignment = ContentAlignment.BottomCenter;

lowerElement.StretchHorizontally = true;​

tile.Children.Add(lowerElement);

RadLabelElement deviceInfo = new RadLabelElement();

deviceInfo.StretchHorizontally = true;

deviceInfo.TextAlignment = ContentAlignment.BottomCenter;​

deviceInfo.Alignment = ContentAlignment.BottomCenter;​

lowerElement.Children.Add(deviceInfo);

etc.... none of that helps.

[Dimitar]

Hello Jesse,

Thank you for writing.

The LightVisualElement can display text as well. This is why you do not need to add a label. The following snippet shows how you can position the text:

class CustomTileElement : RadTileElement
{
    LightVisualElement customInfo;
    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        customInfo = new LightVisualElement();
        customInfo.Text = "MyText";
        customInfo.StretchVertically = false;
        customInfo.Alignment = ContentAlignment.BottomCenter;
        this.Children.Add(customInfo);

    }
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(RadTileElement);
        }
    }
}

Please let me know if there is something else I can help you with. 

 

Regards,
Dimitar
Telerik

[jesse]

Thank you, this works fine.  The next question I have is how do I place the Tile Text in a specific location?  Instead of just top center or something like that, I want to place the tile text *just* above the customInfo text location.

[Dimitar]

Hello Jesse,

Thank you for writing back.

The TextAlignment property can be used to set the text position. For example:

CustomTileElement tile = new CustomTileElement();
tile.TextAlignment = ContentAlignment.TopCenter;

If this is not suitable for your case you can add another LightVisualElement. The following article shows how you can build an item with advanced layout: Custom Tiles

Let me know if you have additional questions.

Regards,
Dimitar
Telerik