Buttons in Design RRS feed

  • Question

  • Hi All,

    I'm a bit confused at the moment. I've been making some designs for icon buttons in a Blend/VS2008 project for my employer.

    Basically I created graphics in documents at 1200 x 1600 as I wanted to work at a high resolution and then use blend to size them down for the buttons and for another section in the interface where they will be displayed larger.

    Once I had ported them into Blend (inside a grid layour parent) they were practically unuseable. Performing any sizing on them was just ignored.

    Anyway, to save more waffle. Am I right in assuming that your need to work in Design using a document of the dimensions that the assets are going to be used at? In this case 64x64 ...

    Seems a bit odd or am I really missing something fundamental? I exported them into XAML files on a Canvas. Should I have been exporting them into resource Dictionaries instead?

    Tuesday, March 4, 2008 4:31 PM

All replies

  • You should need to create the object in Design in the same size that you want them to be in Blend. One question would be, are you using Live Effects in Design?

    Also are you creating a WPF application or a Silverlight application?

    So, when you paste the XAML into Blend, are you saying that you can't resize the objects in the Layout section of the Properties tab?
    Tuesday, March 4, 2008 4:46 PM
  • Hi Annie,

    I see, this is what was confusing me. I was thinking in a Photoshop Vector Graphic manner. IE, make it big and then downsize to what you want.

    I'm not using any live effects in Design. I'm still in the early stages of feeling my way around the process at the moment and working to an incredibly tight deadline.

    We are making a WPF windows application.

    On your last point, basically yeah. I think that a ViewBox may be the answer in that situation??? Is that a correct assumption?? If I wrapped these 1200x1600 objects into a <ViewBox> in the XAML then I would be able to scale them?

    Also I was working with strokes in Design and whilst I was resizing these assets the strokes remained at their set values meaning that all my paths ended up being pure black (the colour of the stroke).

    I must say that this Design/Blend combo is very cool, but man does it have a learning curve? I'm also learning XAML/.NET3.0/.NET3.5 ZAM3D ... its all a bit much at the moment!

    Thanks for your prompt reply!

    Tuesday, March 4, 2008 5:18 PM
  • Ok, we're getting closer. I am going to assume that you are copying the XAML in Design and pasting it into Blend. With that assumption, you need to go to Edit > Options > Clipboard (XAML) and set the Output Type to WPF Canvas.

    Next, you are right about the Viewbox. The Viewbox allows you to scale all object within the Viewbox at the same time. See http://blogs.msdn.com/wpfsdk/archive/2006/06/12/Composing-a-XAML-Clip-Art-Scene.aspx. To create a Viewbox in Design you need to group objects. Each group will export to XAML as a Viewbox. When you have your objects the way you want in Design, choose Edit > Copy XAML. (Because you set your clipboard to WPF Canvas, the XAML will be appropriate for that in Blend and will insure that you grouped objects are Viewboxes.)

    As for the stroke scaling, you must be using the basic stroke. Other stroke scale automatically but for basic strokes you need to take this step: Go to Edit > Options > Stroke and check the box labeled Scale stroke width.

    Learning curve indeed! I still don't have a good grasp of Blend. :-)

    Tuesday, March 4, 2008 5:40 PM
  • Oops, I posted the wrong link to the scalable viewbox article. Here's the correct one: http://blogs.msdn.com/mgrayson/archive/2006/05/22/scalable-ui-in-one-line-of-xaml.aspx
    Tuesday, March 4, 2008 5:41 PM
  • You've been an angel!!!! Thanks so much for this info!

    Blend is a bit odd frankly. Its a good app don't get me wrong but its a little rough around the edges. It seems to work with some kind of cacheing going on IE changes in VS dont always filter through needing a [close solution] reopen. Also the lack of Visual Source Safe integration makes working with Blend in a development environment very tricky. I'm having to flit between Design/Blend/VS2008 a huge amount.

    Anyway, i'm on a bout of 12-14 hour days working on this and currently can't see the pixles for the screen! ;)

    Thanks again Annie, much appreciated.
    Tuesday, March 4, 2008 5:48 PM
  • You are very welcome.

    The Blend and Design teams are always working to improve the programs and the interaction between the programs. You'll see some great improvements in the near future.

    Best of luck to you on your project!
    Tuesday, March 4, 2008 5:58 PM
  • Looking forward to getting Blend 2 ... I'm worried about using the Beta on a Live project so have held off so far.


    Tuesday, March 4, 2008 6:23 PM
  • There are a number of variables that you need to take into account when moving objects from Design into Blend.

    Such as: How the object is laid out - this means is it part of a group for example. If so then the group will create a viewbox with a canvas child followed by the shapes. Is it split accross layers and so on. All these things affect the xaml that will be created.

    Following on from that you need to think about which method of transferring the object you will use:

    copy xaml/export xaml
    as an image and so on.

    it will all affect what will be transferred into Blend

    Also you need to make sure that you work with a resolution of 96 ppi as Blend works with 96 so anything else and you will not get the sizes you see in Design as there will be some conversions made - especially watch out on strokes.

    The list actually goes on but you get the idea.

    So if you want to post your method step-by-step then I would be happy to look at it.

    Tuesday, March 4, 2008 10:18 PM
  • If you are exchanging xaml formats between Design and Blend, your artwork will mostly in vector graphics. It will remain sharp at any zoom level (even non-integer zoom). Therefore, you should not worry about "creating bigger and scaling it down".
    If you are about to use bitmap formats in Blend (such as PNG icons), the new slicing tool in Design 2 will help you. Since the artwork you created in Design are vector graphics, they rendered as sharp as it possible on any slice size. You can setup slice bitmap dimension in slice panel just before you export them. So, you should not worry about "creating bigger and scaling it down" either.

    Annie brought an important point: "do you use live effects". Some features in Design is not supported in Blend nor in WPF yet, and they have to be rasterized into bitmaps, such as some live effects and some custom strokes. If you are using them as XAML icon and want to keep the best fedelity, you'd better use the same artwork resolution as your target blend project (96DPI). Still, you don't need to "create bigger and scaling it down".
    Wednesday, March 12, 2008 8:52 PM