locked
Need tips no best way of creating a toolbar RRS feed

  • Question

  • Hi! I've gotten pretty close with Blend by now and I'm trying to create a nice user interface. I've gotten as far as the toolbar now and I just want to create something sort of a mix between the standard Word 2003 toolbars and Blends left side buttons.
    That would actually make it just like Blends toolbar, only horizontal.
    Now, you can probably imagine what this would look like and everything. But the thing is, I can't seem to wrap my head around how exactly I would do this in the best way.

    Just provided a simple image of the idea I want ( I know it's from Blend and it's Photoshopped just to make it clear what I want)

    http://img181.imageshack.us/img181/4880/66286278hs8.jpg

    How would I do this? I know I could create a grid inside a row for example. And then throw in a stack panel or something in there. But what about the icons for each button etc? Do I need to create one custom button resource for each button? Or could I create say, left button, middle button and right button and then just throw on an Icon or something? But that would really work either would it? Since I can't add an icon to a button in Blend. Hope someone understands my problem. Expression Blend was created in Blend wasn't it? How did you create those toolbars?

    Thursday, August 28, 2008 12:11 PM

Answers

  • Hi Kenny Bones,

    I believe that consistency is key in designing GUIs, this is what I would do if I were to design buttons with icons similar to the toolbar of Expression Blend:
    1. Create a button style resource, with all the animations (MouseEnter, MouseLeave, MouseLeftButtonDown, etc effects) and stuff, and make sure I have a content presenter within the button to present my content.
    2. Add a Stackpanel with Orientation set to Horizontal, and add a few buttons into the Stackpanel, maybe add some margins to increase the distance between each button (Left or Right margin since its a horizontally orientated Stackpanel).
    3. Apply the button style resource that you created to all of the buttons (Right Click, Edit Control Parts (Template) -> Apply Resource -> ResourceKeyName)
    4. Use Expression Design, Photoshop, or Illustrator to come up with the design for each of the icons.
    5. Add the Images into your project and add them to your application form, or Copy Paste the created vector assets if you're using Expression Design.
    6. Drag the Images or XAML elements (Path, Rectangles etc) onto any one of the button and until it says something like "Press ALT-drag to place into [button]", then hold down Alt and let go and the image is placed within the Button as its content.
    7. Repeat till you have a nice looking Toolbar.
    I doubt Expression Blend was created with Expression Blend, its almost like a chicken and egg question LOL, maybe someone from the Blend team could answer that question :P

    Anyway, please do not hesitate to ask if you have any further questions, hope this "crash course" helped you get a better idea of how to create your GUI :)

    -
    Friday, August 29, 2008 8:09 AM

All replies

  • Hi Kenny Bones,

    I believe that consistency is key in designing GUIs, this is what I would do if I were to design buttons with icons similar to the toolbar of Expression Blend:
    1. Create a button style resource, with all the animations (MouseEnter, MouseLeave, MouseLeftButtonDown, etc effects) and stuff, and make sure I have a content presenter within the button to present my content.
    2. Add a Stackpanel with Orientation set to Horizontal, and add a few buttons into the Stackpanel, maybe add some margins to increase the distance between each button (Left or Right margin since its a horizontally orientated Stackpanel).
    3. Apply the button style resource that you created to all of the buttons (Right Click, Edit Control Parts (Template) -> Apply Resource -> ResourceKeyName)
    4. Use Expression Design, Photoshop, or Illustrator to come up with the design for each of the icons.
    5. Add the Images into your project and add them to your application form, or Copy Paste the created vector assets if you're using Expression Design.
    6. Drag the Images or XAML elements (Path, Rectangles etc) onto any one of the button and until it says something like "Press ALT-drag to place into [button]", then hold down Alt and let go and the image is placed within the Button as its content.
    7. Repeat till you have a nice looking Toolbar.
    I doubt Expression Blend was created with Expression Blend, its almost like a chicken and egg question LOL, maybe someone from the Blend team could answer that question :P

    Anyway, please do not hesitate to ask if you have any further questions, hope this "crash course" helped you get a better idea of how to create your GUI :)

    -
    Friday, August 29, 2008 8:09 AM
  • Oh, I see. Didn't think about dragging images by pressing Alt and placing it into the content. So this means that I don't need to create one button for each of the toolbar buttons?
    I can just create one template-button and then just drag the images (icons) I want into each button? Will I be able to control the animations of each Icon this way also?
    Monday, September 1, 2008 8:00 AM
  • Hi again, sorry to burst your bubble, but it's not possible to drag anything INTO a button. The way I've done it now is that I've got buttons originally created by rectangles right?
    And in these buttons (the template that is) I've added graphics in vectors etc. So, I tried to mark all these vectors and Ctrl + X it to cut it out. Then I tried going to the main window view, paste it into the view and then moving it towards the button again. This fails no matter if I press Alt or what. Doesn't seem to be possible to drag anything INTO a button.
    All the buttons are placed in a stackpanel right now, including the now blank button I've cut the graphics from. When I try to move the graphics INTO the button like you propose, all I achieve is that the graphics are layed out in the stackpanel NEXT to the button i originalle cut it from. Hope you understand this :)

    Now, It IS possible to move the graphics OVER the button and have it layed out ontop of the button layer. But by doing this, I can't control the animations of the graphics ontop of it.
    Tuesday, September 2, 2008 6:36 AM
  • Hi Kenny Bones,

    Seems when you drag the image you accidently dragged it into the StackPanel but not into the button. And when you attempted dragging the image into the control, and hold down ALT and let go when the image is within the boundaries of the dotted line, the image dissapears right? If so, this could be a solution to your problem.

    In WPF and Silverlight, it is now possible for buttons to have text, images, video, and any element as its content, which could be presented via the ContentPresenter. Go to Edit Control Parts (Template) for your button, then check and see within your object tree do you have the [ContentPresenter] object or not,
    • if yes, please make sure it is ordered as the top element.
    • if no, go to your Asset Library (the ">>" Icon in your toolbox) and search for ContentPresenter, then double click and add it to your button's Control template, to ensure that the ContentPresenter is always in the center, you have to make sure that its width and height is set to auto, HorizontalAlignment and VerticalAlignment set to center, and all margins set to 0.
    Now when you drag any element to your button, it will have dotted borders, saying "Press ALT-drag to place into [button]", and u hold down ALT and you can place the element into the control template. Cut and pasting into the button wouldn't work.

    This way, all buttons could have consistent colors, animations, and styles, with just different contents. Refer to my previous post for more information.

    Please let me know if this works :)



    -
    • Proposed as answer by Kok Chiann Tuesday, September 2, 2008 8:59 AM
    Tuesday, September 2, 2008 8:59 AM