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

0
0

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.

  • You must to post comments
0
0

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

 

  • You must to post comments
0
0

Hi Frank,

I used method 1 from https://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.

  • You must to post comments
0
0

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:

vertical_label

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

 

Attachment
  • You must to post comments
0
0

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;
}
}
}

 

  • Luca (ITG)
    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.
  • You must to post comments
0
0

Hi Eric,

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

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

Hope that helps.

Best regards
Frank

  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.