skip to Main Content

New here but really need some help.

I have designed a GUI in Photoshop and saved this as a PSD file.
All the buttons in it are seperate PNG files and text.

The GUI has to be made in Expression Blend so that a friend of mine (C programmer) can connect the GUI to the software.

The Problem:
I just don’t understand how to make the functionality of these buttons from the PNG files.
for a WPF expert its very simple but for me its pretty horrible.

Is there someone who can help me with this. I have now searched 3 days on the net for a solution but haven’t got any success with it so far.

2

Answers


  1. I think you’re just asking about how to do a simple ‘image in a button’ – you don’t need blend for that just yet:

    <Button x:Name="myButton" Width="90"  Height="32" Click="MyButtonClick" >
      <Image Height="32" Width="32" 
        Source="pack://application:,,,/MREEResources;component/Images/MyImage.png"/>
    </Button>
    

    Right-click on MyButtonClick and choose Navigate to Event Handler and it will create the code-behind for your developer to use.

    Get the Adam Nathan book for WPF and you’ll be up to tasks like this in no time.

    Login or Signup to reply.
  2. Here is how to create a button from an image in WPF using Expression Blend:

    1. Add the image you want to use for the button to your project
    2. Drag the image from your “Projects” panel to your stage (in Design view). (Resize & position image if needed)
    3. Right-click the image (either on stage or in “Objects and Timeline panel) and select “Make into control”
    4. Name the button and “Define in” either Application or This document, Hit OK
    5. Blend auto-generates a ContentPresenter to add text, you can select and delete this in the “Objects and Timeline” panel

    There you go – a quick and easy image button. For multiple buttons, you will need individual user control names. If you want to spend more time setting up a button you can templatize, watch my Silverlight tutorial: http://mattwilsonmd.blogspot.com/2009/06/silverligth-tutorial-image-button-w.html (You can skip to the end for the simple summary).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search