CssClass property for a UserControl (Apply CSS code to a UserControl element inside it)

[itg-assistant]

Eric Mathay asked 2017-08-22 09:28:43 UTC

Hello,

I have created a Usercontrol containing 1 Label.

I have added a styleSheet control to the usercontrol. This adds a property 'CssClass' to label1 when in the Designer.

I want to expose the 'CssClass' property outside of the usercontrol by defining a new property, but cssclass isn't available.

Error CS1061 'Label' does not contain a definition for 'CssClass' and no extension method 'CssClass' accepting a first argument of type 'Label' could be found (are you missing a using directive or an assembly reference?)

namespace WebPage2
{
public partial class UserControl1 : Wisej.Web.UserControl
{
public override string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
public override string CssClass
{
get { return label1.CssClass; }
set { label1.cssclass = value; }
}

public UserControl1()
{
InitializeComponent();
}
}
}

Do I miss something ?

Best regards.

[itg-assistant]

Frank (ITG) answered 2017-08-22 11:30:00 UTC

Hi Eric,

have you tried calling StyleSheetSource.SetCssClass (label, your cssclass);

Please also have a look at http://wisej.com/blog/shadow_on_the_panel/

Hope that helps.

Best regards
Frank

[itg-assistant]

Eric Mathay answered 2017-08-23 09:08:20 UTC

Hello Frank,

Thanks for the Tip, now it works.

In my case I'm trying to build a vertical label. Any chance to see a "Angle" property added to a standard label ?

namespace WebPage2
{
public partial class UserControl1 : Wisej.Web.UserControl
{
private Wisej.Web.StyleSheet mStyleSheet=null;

public override string Text
{
get { return label1.Text; }
set { label1.Text = value; }
}
public string SetCssClass
{
set { mStyleSheet.SetCssClass(label1, value); }
}

public UserControl1()
{
InitializeComponent();

mStyleSheet = this.styleSheet1;
}
}
}

[itg-assistant]

Luca answered 2017-08-23 14:30:17 UTC

Extender’s properties are added to all control that qualify in the designer. At runtime you have to use the extender directly as Frank noted. We have a number of extenders: Animation, Rotation, ToolTips, ErrorProvider, HelpTips, BubbleNotification, SpeechSynthesis, SpeechRecognition, JavaScript, StyleSheet.

[itg-assistant]

Frank (ITG) answered 2017-08-23 17:02:28 UTC

Hi Eric,

there are several ways to get a vertical label. Either use CSS via the StyleSheetExtender or use Animation or Rotation extender.

With the Rotation extender you simply have to set RotateZ to -90 degrees:

Please note that this rotation is a client side operation, so it might become a bit tricky with the designer which keeps the label at its original size and location possibly making it appear truncated.

Hope that helps.

Best regards
Frank

[itg-assistant]

Eric Mathay answered 2017-08-25 06:48:25 UTC

Hi Frank,

I used method 1 from http://wisej.com/blog/shadow_on_the_panel/ (Using a StyleSheet extender control)

With the Label "AutoSize=false" and this CSS code in the stylesheet control :

For a 90 Clockwise rotation (The designer doesn't show the rotation) :

.vertical{
    writing-mode:vertical-lr;
}

For a 90 Anticlockwise rotation (The designer WILL show the rotation):

.rotated {

      writing-mode: tb-rl;

     transform: rotate(-180deg);

}

It isn't pixel perfect (the vertical position is inexact regarding the selected TextAlign value, "Top/Bot left" being the most reliable), and you will see the rotation in the designer which permits you to create a decent layout.

Regards.

[itg-assistant]

Luca answered 2017-08-25 15:31:12 UTC

Hi Eric,

When in design mode the rotation (or css) only affects the rendering, not the bounds of the control since it needs to have the correct Location and Size properties. If the rotation causes the rendering content to be outside of the rectangle it will show at runtime but not at design time because of the clipping region.

Also, when applying css rotation by default the fulcrum of the rotation is the top left corner. I usually change it to use the center, by adding

transform-origin: 50% 50%;

HTH

/Luca