locked
can not find wrap panel in vs2011 for metro style

    Question

  • unable to see wrap panel in vs. 11 for metro style app. also how wrap grid work can anyone explain ??

    Wednesday, July 04, 2012 2:02 PM

Answers

  • There is no wrap panel control for HTML5/JavaScript based metro style apps.  

    Read this document for more information on layout options -> http://msdn.microsoft.com/en-us/library/windows/apps/hh465327.aspx

    Read this document for a list of available controls -> http://msdn.microsoft.com/library/windows/apps/Hh465453


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Wednesday, July 04, 2012 7:21 PM
  • Hi,

    Similar layout can be achieved by CSS float. You can try the demo below and try to resize the browser, then notice how the layout changes.

    <html>
    <head>
    <style type="text/css">
    .thumbnail
    {
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    }
    </style>
    </head>

    <body>
    <h3>Image Gallery</h3>
    <p>Try resizing the window to see what happens when the images does not have enough room.</p>
    <img class="thumbnail" src="YourImage.jpg" width="107" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="80">
    <img class="thumbnail" src="YourImage.jpg" width="116" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="120" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="80">
    <img class="thumbnail" src="YourImage.jpg" width="116" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="120" height="90">
    </body>
    </html>

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Thursday, July 05, 2012 10:05 AM
    Moderator
  • The behavior of a WrapPanel can be accomplished in XAML using the StackPanel and setting the orientation to Horizontal:

    <StackPanel Orientation="Horizontal"/>


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Friday, July 06, 2012 3:34 PM

All replies

  • There is no wrap panel control for HTML5/JavaScript based metro style apps.  

    Read this document for more information on layout options -> http://msdn.microsoft.com/en-us/library/windows/apps/hh465327.aspx

    Read this document for a list of available controls -> http://msdn.microsoft.com/library/windows/apps/Hh465453


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Wednesday, July 04, 2012 7:21 PM
  • Hi,

    Similar layout can be achieved by CSS float. You can try the demo below and try to resize the browser, then notice how the layout changes.

    <html>
    <head>
    <style type="text/css">
    .thumbnail
    {
    float:left;
    width:110px;
    height:90px;
    margin:5px;
    }
    </style>
    </head>

    <body>
    <h3>Image Gallery</h3>
    <p>Try resizing the window to see what happens when the images does not have enough room.</p>
    <img class="thumbnail" src="YourImage.jpg" width="107" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="80">
    <img class="thumbnail" src="YourImage.jpg" width="116" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="120" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="107" height="80">
    <img class="thumbnail" src="YourImage.jpg" width="116" height="90">
    <img class="thumbnail" src="YourImage.jpg" width="120" height="90">
    </body>
    </html>

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Thursday, July 05, 2012 10:05 AM
    Moderator
  •  

    is there a wrap panel in for c# and xmal ??

    Friday, July 06, 2012 2:55 PM
  • The behavior of a WrapPanel can be accomplished in XAML using the StackPanel and setting the orientation to Horizontal:

    <StackPanel Orientation="Horizontal"/>


    Dave Paquette @Dave_Paquette www.davepaquette.com

    Friday, July 06, 2012 3:34 PM