c# - WPF Grid Faded in on Top of Other Grids Has Inactive Controls -
i'm experiencing unexpected behavior ui i'm working on c# wpf application.
the cliffnotes version have 3 grids "inhabit" same area on form. based on toggle buttons grids enabled or disabled , faded in , out of view. however, seems in cases textboxes can used , others cannot.
here style i'm applying:
<!-- fade in/out style grid --> <style x:key="fadeinoutstyle" targettype="grid"> <style.triggers> <trigger property="isenabled" value="true"> <trigger.setters> <setter property="panel.zindex" value="1"/> </trigger.setters> <trigger.enteractions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetproperty="opacity" from="0.0" to="1.0" duration="0:0:0.8"/> </storyboard> </beginstoryboard> </trigger.enteractions> <trigger.exitactions> <beginstoryboard> <storyboard> <doubleanimation storyboard.targetproperty="opacity" from="1.0" to="0.0" duration="0:0:0.4"/> </storyboard> </beginstoryboard> </trigger.exitactions> </trigger> <trigger property="isenabled" value="false"> <trigger.setters> <setter property="panel.zindex" value="0"/> </trigger.setters> </trigger> </style.triggers> the style seems apply fine, grids fade , out of view expected. here's 1 of "checked" functions enables checked grid , disables others. if want see rest so, bit dog , pony show:
private void individualradio_checked(object sender, routedeventargs e) { this.twoindividualgrid.isenabled = false; this.commercialgrid.isenabled = false; this.individualgrid.isenabled = true; } and here xaml 1 of grids. have nothing more labels , textbox controls. start same margins , similar dimmensions:
<grid name="individualgrid" isenabled="false" height="30" width="420" opacity="0" horizontalalignment="left" verticalalignment="top" margin="10,90,0,0" style="{staticresource fadeinoutstyle}" panel.zindex="0"> <label content="first name" height="25" width="90" verticalalignment="top" horizontalalignment="left" margin="0,0,0,0"/> <textbox name="subjfirstnamebox" height="30" width="100" verticalalignment="top" horizontalalignment="left" style="{staticresource validationstyle}" margin="100,0,0,0"> <textbox.text> <binding path="subjfirstname" mode="twoway"> <binding.validationrules> <exceptionvalidationrule/> </binding.validationrules> </binding> </textbox.text> </textbox> <label content="last name" height="25" width="90" verticalalignment="top" horizontalalignment="left" margin="210,0,0,0"/> <textbox name="subjlastnamebox" height="30" width="100" verticalalignment="top" horizontalalignment="left" style="{staticresource validationstyle}" margin="310,0,0,0"> <textbox.text> <binding path="subjlastname" mode="twoway"> <binding.validationrules> <exceptionvalidationrule/> </binding.validationrules> </binding> </textbox.text> </textbox> </grid> and, because know might ask see it, here couple examples of properties i've binded. in case, first name/subjfirstname textbox not work last name/subjlastname textbox does:
private string subjfirstname; public string subjfirstname { { return subjfirstname; } set { subjfirstname = value; } } private string subjlastname; public string subjlastname { { return subjlastname; } set { subjlastname = value; } } so, see i'm messing here? i'm assuming has stacked grids, if has better approach i'd love hear it. i'm i've done way before though, , i'd think disabling , setting panel index trick.
soo, after deeper view, found following things in mind can cause bug.
<textbox name="subjlastnamebox" height="30" width="100" verticalalignment="top" horizontalalignment="left" style="{staticresource validationstyle}" margin="310,0,0,0"> <textbox.text> <binding path="subjlastname" mode="twoway" updatesourcetrigger="propertychanged"> <binding.validationrules> <exceptionvalidationrule/> </binding.validationrules> </binding> </textbox.text> as can see added updatesourcetrigger="propertychanged" important if use mode="twoway". also, described in comment need add inotifypropertychanged view-model.
//using system.componentmodel; public class myclass : inotifypropertychanged { private string _subjlastname; ///<summary> /// public lastname property ///</summary> public string subjlastname { { return _subjlastname; } set { // if statement here importent! raise notification if value has changed if (_subjlastname != value) { _subjlastname = value; onpropertychanged("subjlastname"); } } } #region inotify #region onpropertychanged + handler ///<summary> /// propertychanged event handler ///</summary> public event propertychangedeventhandler propertychanged; ///<summary> /// notify ui changes ///</summary> private void onpropertychanged(string propertyname) { if (propertychanged != null) { propertychanged(this, new propertychangedeventargs(propertyname)); } } #endregion #endregion } edit:
solution might be:
<trigger property="isenabled" value="false"> <trigger.setters> <setter property="visibility" value="collapsed"/> </trigger.setters> </trigger> <trigger property="isenabled" value="true"> <trigger.setters> <setter property="visibility" value="visible"/> </trigger.setters> </trigger> here use property="visibility" instead of property="panel.zindex" hide complete control if it's not used or show if it's used. (you have tune bit because want show fade? if so, need bring visible before begin fade in. have collapse after fade out.)
hope fix issue.