Deep confusion:use ControlStyle, or Style statebag?

[Sky]

Hello... Need help desperatly -- am completly losing it here, trying to
figure out how MS intended us to use Styles in their controls....


Does anybody know anything about ControlStyle -- how to create one, when to
use, costs v. benefits?

I'm just not sure which way to Rome, when creating new Controls....use Style
dictionary/statebag? Or create a custom extension of the base Style class?

Routes that I have taken so far, while trying to figure out the answer:

a) Add a TypeConverter to the Style:
[TypeConverter(typeof(ExpandableObjectConverter))]
public Style MyStyle{get {return base.ControlStyle;}}

Wow!!!!

That changes everything in the IDE -- it actually makes a LOT more
sense...the properties like Height/Width/BorderColor, etc. are now in an
expandable +/- section (eg: like Font properties) all grouped in one area.
Seems to me to be MUCH better than having these Css properties as part of
the control itself which I think would be better suited by separating
Behaviour properties from style properties... Anybody concur?
Only glitch....works in the IDE, but not in run-time.
It appears that I don't yet know how to trigger the following bool flag:
public bool ControlStyleCreated {get;}


b) Now -- although this seems to me to be much better in terms of
IDE/Logical layout of the control -- the fact that the values that I am
imputing into the IDE are going somwhere and being preserved -- but not
showing up in the back HTML, or being used at run-time, tells me that that
its a SECOND style object... i.e...This is a State class -- and the
MyControl.Style property is pointing to a StateBag.
So that REALLY confuses me!
Q: Why are there TWO solutions?
Q: Why are they not already merged/wired up together?
Q: Is there a way to merge them together? How can I get the control to parse
the style="" from the html and add /populate the ControlState class
instance? Do I want to/should not want to? How about the other way? Use the
ControlState class instance to create a style="" string?
Q: Is there a ViewState penalty using one approach versus another?
Q: If not wired up so that changes to ControlStyle affect Style, and
vice-versa, Which one takes precendance? In other words, if I set
BorderStyle in both, which one will be rendered as a style attribute in the
final output? The values of State, the values of ControlStyle, or BOTH????
I've already seen that ASP messes up by outputing both in some cases: if you
set MyControl.BackgroundColor = "red"; and you set
MyControl.Style["BACKGROUND-COLOR"] = "blue", the output is....:
<.... style="background-color:red;BACKGROUND-COLOR:blue"...> ...


Anyway -- anybody who can definatly clear up this spagetti and tell me when
to use what/when...wow. Thanks.

Sky


PS:

I just wrote an extension of Style -- because I was frustrated that the
basic one given by MS was put on too much of a diet -----
but...as I'm not sure of what I am doing, I'm not sure that it can be used
as I originally intended:
I include it below in case it can help someone else?

public class XActStyle : Style {

public enum eCursorStyle{

auto,//Default

hand,

crosshair,

help,

move,

text,

wait

}

public enum ePositionStyle{

Static, //Default

Relative,

Absolute

}

public enum eOverFlowStyle {

visible,//Default

scroll,

hidden,

auto

}

public enum eTextAlignStyle{

left,//Default.

right,

center,

justify

}

public enum eVerticalAlignStyle{

auto,//Default

baseline,

middle,

bottom,

text_top,

text_bottom

}

string tPrefix = "css_";


public XActStyle():base(){

//this.AddAttributesToRender

//this.CopyFrom

//this.CreateObjRef

//this.IsTrackingViewState

//this.LoadViewState

//this.MergeWith

//this.Reset

//this.SaveViewState

//this.ToString

//this.TrackViewState

//this.Width

//this.Height

}

public XActStyle(StateBag qViewState):base(qViewState){}

//-----------------------

public eCursorStyle Cursor{

get {object tResult = ViewState[tPrefix + "cursor"];if (tResult !=
null){return (eCursorStyle)tResult;}else{return eCursorStyle.auto;}}

set {if (((eCursorStyle)value)!=eCursorStyle.auto){ViewState[tPrefix +
"cursor"]=value;}else{ViewState[tPrefix + "cursor"]=null;}}

}

public ePositionStyle Position{

get {object tResult = ViewState[tPrefix + "position"];if (tResult !=
null){return (ePositionStyle)tResult;}else{return ePositionStyle.Static;}}

set {if (((ePositionStyle)value)!=ePositionStyle.Static){ViewState[tPrefix +
"position"]=value;}else{ViewState[tPrefix + "position"]=null;}}

}

public eOverFlowStyle OverFlow{

get {object tResult = ViewState[tPrefix + "overflow"];if (tResult !=
null){return (eOverFlowStyle)tResult;}else{return eOverFlowStyle.visible;}}

set {if (((eOverFlowStyle)value)!=eOverFlowStyle.visible){ViewState[tPrefix
+ "overflow"]=value;}else{ViewState[tPrefix + "overflow"]=null;}}

}

public eOverFlowStyle OverFlowX{

get {object tResult = ViewState[tPrefix + "overflow-x"];if (tResult !=
null){return (eOverFlowStyle)tResult;}else{return eOverFlowStyle.visible;}}

set {if (((eOverFlowStyle)value)!=eOverFlowStyle.visible){ViewState[tPrefix
+ "overflow-x"]=value;}else{ViewState[tPrefix + "overflow-x"]=null;}}

}

public eOverFlowStyle OverFlowY{

get {object tResult = ViewState[tPrefix + "overflow-y"];if (tResult !=
null){return (eOverFlowStyle)tResult;}else{return eOverFlowStyle.visible;}}

set {if (((eOverFlowStyle)value)!=eOverFlowStyle.visible){ViewState[tPrefix
+ "overflow-y"]=value;}else{ViewState[tPrefix + "overflow-y"]=null;}}

}

public eTextAlignStyle TextAlign{

get {object tResult = ViewState[tPrefix + "text-align"];if (tResult !=
null){return (eTextAlignStyle)tResult;}else{return eTextAlignStyle.left;}}

set {if (((eTextAlignStyle)value)!=eTextAlignStyle.left){ViewState[tPrefix +
"text-align"]=value;}else{ViewState[tPrefix + "text-align"]=null;}}

}

public eVerticalAlignStyle VerticalAlign{

get {object tResult = ViewState[tPrefix + "vertical-align"];if (tResult !=
null){return (eVerticalAlignStyle)tResult;}else{return
eVerticalAlignStyle.auto;}}

set {if
(((eVerticalAlignStyle)value)!=eVerticalAlignStyle.auto){ViewState[tPrefix +
"vertical-align"]=value;}else{ViewState[tPrefix + "vertical-align"]=null;}}

}

//-----------------------

public Unit Margin{

get {object tResult = ViewState[tPrefix + "margin"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"margin"]=value;}else{ViewState[tPrefix + "margin"]=null;}}

}

public Unit MarginTop{

get {object tResult = ViewState[tPrefix + "margin-top"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"margin-top"]=value;}else{ViewState[tPrefix + "margin-top"]=null;}}

}

public Unit MarginRight{

get {object tResult = ViewState[tPrefix + "margin-right"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"margin-right"]=value;}else{ViewState[tPrefix + "margin-right"]=null;}}

}

public Unit MarginBottom{

get {object tResult = ViewState[tPrefix + "margin-bottom"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"margin-bottom"]=value;}else{ViewState[tPrefix + "margin-bottom"]=null;}}

}

public Unit MarginLeft{

get {object tResult = ViewState[tPrefix + "margin-left"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"margin-left"]=value;}else{ViewState[tPrefix + "margin-left"]=null;}}

}

public Unit Padding{

get {object tResult = ViewState[tPrefix + "padding"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"padding"]=value;}else{ViewState[tPrefix + "padding"]=null;}}

}

public Unit PaddingTop{

get {object tResult = ViewState[tPrefix + "padding-top"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"padding-top"]=value;}else{ViewState[tPrefix + "padding-top"]=null;}}

}

public Unit PaddingRight{

get {object tResult = ViewState[tPrefix + "padding-right"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"padding-right"]=value;}else{ViewState[tPrefix + "padding-right"]=null;}}

}

public Unit PaddingBottom{

get {object tResult = ViewState[tPrefix + "padding-bottom"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"padding-bottom"]=value;}else{ViewState[tPrefix + "padding-bottom"]=null;}}

}

public Unit PaddingLeft{

get {object tResult = ViewState[tPrefix + "padding-left"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"padding-left"]=value;}else{ViewState[tPrefix + "padding-left"]=null;}}

}

public Unit TextIndent{

get {object tResult = ViewState[tPrefix + "text-indent"];if (tResult !=
null){return (Unit)tResult;}else{return Unit.Empty;}}

set {if (((Unit)value)!=Unit.Empty){ViewState[tPrefix +
"text-indent"]=value;}else{ViewState[tPrefix + "text-indent"]=null;}}

}

//-----------------------

//And for the fun of it....

public bool EffectDropShadow{

get {object tResult = ViewState[tPrefix + "e_dropshadow"];if (tResult !=
null){return (bool)tResult;}else{return false;}}

set {if (((bool)value)!=false){ViewState[tPrefix +
"e_dropshadow"]=value;}else{ViewState[tPrefix + "e_dropshadow"]=null;}}

}

//-----------------------

//Example: Simple wrapping to get it back to W3C naming...

public System.Drawing.Color Color {

get {return base.ForeColor;}set{base.ForeColor=value;}

}

//Clear

//Clip

//Filter

//Direction

//Display

//Visibility

//text-indent

//text-justify

//z-index

//zoom

//white-space





void AddAttributesToRender(HtmlTextWriter writer, WebControl owner){

base.AddAttributesToRender(writer,owner);//Ensure base style class adds its
attrs to the output stream...

//Now for ours:

//-----------------------

if (ViewState[tPrefix+"cursor"]!=null){

writer.AddStyleAttribute("cursor",Enum.Format(typeof(eCursorStyle),((eCursor
Style)ViewState[tPrefix+"cursor"]),"G"));

}

if (ViewState[tPrefix+"position"]!=null){

writer.AddStyleAttribute("position",Enum.Format(typeof(eCursorStyle),((eCurs
orStyle)ViewState[tPrefix+"position"]),"G"));

}

if (ViewState[tPrefix+"overflow"]!=null){

writer.AddStyleAttribute("overflow",Enum.Format(typeof(eOverFlowStyle),((eOv
erFlowStyle)ViewState[tPrefix+"overflow"]),"G"));

}

if (ViewState[tPrefix+"overflow-x"]!=null){

writer.AddStyleAttribute("overflow-x",Enum.Format(typeof(eOverFlowStyle),((e
OverFlowStyle)ViewState[tPrefix+"overflow-x"]),"G"));

}

if (ViewState[tPrefix+"overflow-y"]!=null){

writer.AddStyleAttribute("overflow-y",Enum.Format(typeof(eOverFlowStyle),((e
OverFlowStyle)ViewState[tPrefix+"overflow-y"]),"G"));

}

if (ViewState[tPrefix+"text-align"]!=null){

writer.AddStyleAttribute("text-align",Enum.Format(typeof(eTextAlignStyle),((
eTextAlignStyle)ViewState[tPrefix+"text-align"]),"G").Replace('_','-'));

}

if (ViewState[tPrefix+"vertical-align"]!=null){

writer.AddStyleAttribute("vertical-align",Enum.Format(typeof(eVerticalAlignS
tyle),((eVerticalAlignStyle)ViewState[tPrefix+"vertical-align"]),"G").Replac
e('_','-'));

}

//-----------------------

if (ViewState[tPrefix+"margin"]!=null){

writer.AddStyleAttribute(tPrefix+"margin",((Unit)ViewState[tPrefix+"margin"]
).ToString());

}

if (ViewState[tPrefix+"margin-top"]!=null){

writer.AddStyleAttribute(tPrefix+"margin-top",((Unit)ViewState[tPrefix+"marg
in-top"]).ToString());

}

if (ViewState[tPrefix+"margin-right"]!=null){

writer.AddStyleAttribute(tPrefix+"margin-right",((Unit)ViewState[tPrefix+"ma
rgin-right"]).ToString());

}

if (ViewState[tPrefix+"margin-bottom"]!=null){

writer.AddStyleAttribute(tPrefix+"margin-bottom",((Unit)ViewState[tPrefix+"m
argin-bottom"]).ToString());

}

if (ViewState[tPrefix+"margin-left"]!=null){

writer.AddStyleAttribute(tPrefix+"margin-left",((Unit)ViewState[tPrefix+"mar
gin-left"]).ToString());

}

//-----------------------

if (ViewState[tPrefix+"padding"]!=null){

writer.AddStyleAttribute("padding",((Unit)ViewState[tPrefix+"padding"]).ToSt
ring());

}

if (ViewState[tPrefix+"padding-top"]!=null){

writer.AddStyleAttribute(tPrefix+"padding-top",((Unit)ViewState[tPrefix+"pad
ding-top"]).ToString());

}

if (ViewState[tPrefix+"padding-right"]!=null){

writer.AddStyleAttribute(tPrefix+"padding-right",((Unit)ViewState[tPrefix+"p
adding-right"]).ToString());

}

if (ViewState[tPrefix+"padding-bottom"]!=null){

writer.AddStyleAttribute(tPrefix+"padding-bottom",((Unit)ViewState[tPrefix+"
padding-bottom"]).ToString());

}

if (ViewState[tPrefix+"padding-left"]!=null){

writer.AddStyleAttribute(tPrefix+"padding-left",((Unit)ViewState[tPrefix+"pa
dding-left"]).ToString());

}

if (ViewState[tPrefix+"text-indent"]!=null){

writer.AddStyleAttribute("text-indent",((Unit)ViewState[tPrefix+"text-indent
"]).ToString());

}

//-----------------------

if (ViewState[tPrefix+"e_dropshadow"]!=null){

writer.AddStyleAttribute("filter","progidXImageTransform:Microsoft.dropsha
dow(OffX=2,OffY=2,Color='gray',Positive='true';");

}

//-----------------------

}

public override void CopyFrom(Style qStyle){

base.CopyFrom(qStyle);

//Now ours:

_SetStyles(qStyle,true);

}

public override void MergeWith(Style qStyle){

base.MergeWith(qStyle);

//Now ours:

_SetStyles(qStyle,false);

}

private void _SetStyles(Style qStyle, bool qAlwaysOverride){

XActStyle tStyle = qStyle as XActStyle;

if (tStyle!=null){

//Seems to be good to go:

if ((qAlwaysOverride)||(ViewState[tPrefix + "cursor"]==null)){Cursor =
tStyle.Cursor;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "position"]==null)){Position =
tStyle.Position;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "overflow"]==null)){OverFlow =
tStyle.OverFlow;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "overflow-x"]==null)){OverFlowX
= tStyle.OverFlowX;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "overflow-y"]==null)){OverFlowY
= tStyle.OverFlowY;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "text-align"]==null)){TextAlign
= tStyle.TextAlign;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"vertical-align"]==null)){VerticalAlign = tStyle.VerticalAlign;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "margin"]==null)){Margin =
tStyle.Margin;}

if ((qAlwaysOverride)||(ViewState[tPrefix + "margin-top"]==null)){MarginTop
= tStyle.MarginTop;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"margin-right"]==null)){MarginRight = tStyle.MarginRight;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"margin-bottom"]==null)){MarginBottom = tStyle.MarginBottom;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"margin-left"]==null)){MarginLeft = tStyle.MarginLeft;}


if ((qAlwaysOverride)||(ViewState[tPrefix + "padding"]==null)){Padding =
tStyle.Padding;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"padding-top"]==null)){PaddingTop = tStyle.PaddingTop;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"padding-right"]==null)){PaddingRight = tStyle.PaddingRight;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"padding-bottom"]==null)){PaddingBottom = tStyle.PaddingBottom;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"padding-left"]==null)){PaddingLeft = tStyle.PaddingLeft;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"text-indent"]==null)){TextIndent = tStyle.TextIndent ;}

if ((qAlwaysOverride)||(ViewState[tPrefix +
"e_dropshadow"]==null)){EffectDropShadow = tStyle.EffectDropShadow;}

}

}

public override void Reset(){

ViewState[tPrefix + "cursor"]=null;

ViewState[tPrefix + "position"]=null;

ViewState[tPrefix + "overflow"]=null;

ViewState[tPrefix + "overflow-x"]=null;

ViewState[tPrefix + "overflow-y"]=null;

ViewState[tPrefix + "text-align"]=null;

ViewState[tPrefix + "vertical-align"]=null;


ViewState[tPrefix + "margin"]=null;

ViewState[tPrefix + "margin-top"]=null;

ViewState[tPrefix + "margin-right"]=null;

ViewState[tPrefix + "margin-bottom"]=null;

ViewState[tPrefix + "margin-left"]=null;


ViewState[tPrefix + "padding"]=null;

ViewState[tPrefix + "padding-top"]=null;

ViewState[tPrefix + "padding-right"]=null;

ViewState[tPrefix + "padding-bottom"]=null;

ViewState[tPrefix + "padding-left"]=null;

ViewState[tPrefix + "text-indent"]=null;

ViewState[tPrefix + "e_dropshadow"]=null;

}

}//Class:End