locked
'Display: none' in design time mode RRS feed

  • Question

  • Can I set control's desiplay property to none, when I'm in design mode? I wish I have the same behavior as Flyouts have, but for a ProgressBar. It really slows my Expression Blend.

    Thanks for help,

    Best regards


    Thursday, May 9, 2013 3:19 PM

Answers

  • Hi Jonatan,

    I use a small script to detect if design mode is enabled and add a custom attribute to the body element. Then I can use that attribute to target my CSS rules to specific elements only at design time.

    Here's an example.

    designTime.js

    (function () {
    	"use strict";
    
    	var isInBlendDesignMode = Windows.ApplicationModel.DesignMode.designModeEnabled;
    
    	if (isInBlendDesignMode) {
    		document.body.setAttribute('data-designtime', 'true');
    	}
    
    })();

    default.html

    <body>
        <p id="myControl">Content goes here</p>
    	<script src="/js/designTime.js"></script>
    </body>

    default.css

    body[data-designtime=true] #myControl {
    	display: none;
    }

    I hope that helps. Let me know if you have any questions.

    Thanks,

    Joel

    Thursday, May 9, 2013 4:46 PM
  • Yes, you can do this with the Boolean flag Windows.ApplicationModel.DesignMode.designModeEnabled and a little bit of JS:

    if (Windows.ApplicationModel.DesignMode.designModeEnabled) {
        document.getElementById("progressBar").style.display = "none";
    }
    

     

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Thursday, May 9, 2013 4:47 PM

All replies

  • Hi Jonatan,

    I use a small script to detect if design mode is enabled and add a custom attribute to the body element. Then I can use that attribute to target my CSS rules to specific elements only at design time.

    Here's an example.

    designTime.js

    (function () {
    	"use strict";
    
    	var isInBlendDesignMode = Windows.ApplicationModel.DesignMode.designModeEnabled;
    
    	if (isInBlendDesignMode) {
    		document.body.setAttribute('data-designtime', 'true');
    	}
    
    })();

    default.html

    <body>
        <p id="myControl">Content goes here</p>
    	<script src="/js/designTime.js"></script>
    </body>

    default.css

    body[data-designtime=true] #myControl {
    	display: none;
    }

    I hope that helps. Let me know if you have any questions.

    Thanks,

    Joel

    Thursday, May 9, 2013 4:46 PM
  • Yes, you can do this with the Boolean flag Windows.ApplicationModel.DesignMode.designModeEnabled and a little bit of JS:

    if (Windows.ApplicationModel.DesignMode.designModeEnabled) {
        document.getElementById("progressBar").style.display = "none";
    }
    

     

    Kraig

    Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

    Thursday, May 9, 2013 4:47 PM