none
Button with an embedded image RRS feed

  • Question

  • I have a Button control, and this has a child Image. How can I make the Button completely invisible so I only see the Image?
    I can always see an outline of a button, even more so when the mouse is over the button.

    Setting BorderThickness has no effect.

    Thanks
    Monday, October 8, 2007 12:25 PM

Answers

  • Hi,

    You need to make a new ControlTemplate for your button.

    For example:


    Code Block

    <Window.Resources>

      <ControlTemplate x:Key="IconButton"

                       TargetType="{x:Type Button}">

        <Border>

          <ContentPresenter/>

        </Border>

      </ControlTemplate>

    </Window.Resources>

    <Grid>

      <Button Template="{StaticResource IconButton}">

        <Image Source="myIcon.jpg"/>

      </Button>

    </Grid>

     

     

    This code takes the Image (the Content) of the button and places it in an empty Border. So in effect, you will see only the Image. If you want to make a different style when the mouse is over the button, or when the button is pressed, you must create the corresponding styles. Check Google for ControlTemplates, or you can see the tutorial I posted today:

    http://www.galasoft.ch/mydotnet/articles/article-2007100601.html

     

    Also very good to learn to make Templates:

    http://wpf.netfx3.com/files/folders/labs/entry9074.aspx

     

    HTH,

    Laurent

    Monday, October 8, 2007 1:55 PM
  • Just make your life easier. Launch the Microsoft Expression Blend. Draw a new rectangle, place an image, click on tools, and then click "Make Button". You can also have mouse over animation if you want.

     

    Watch this Video Tutorial about how to make an animated button inside Expression Blend

     

    http://windowsclient.net/learn/video.aspx?v=3934 

     

    Monday, October 8, 2007 4:40 PM
  • if it is in the resources, you should be able to do

    newButton.template = this.FindResource("Mytemplate") as ControlTemplate

     

    Wednesday, February 27, 2008 6:35 PM
    Moderator

All replies

  • Hi,

    You need to make a new ControlTemplate for your button.

    For example:


    Code Block

    <Window.Resources>

      <ControlTemplate x:Key="IconButton"

                       TargetType="{x:Type Button}">

        <Border>

          <ContentPresenter/>

        </Border>

      </ControlTemplate>

    </Window.Resources>

    <Grid>

      <Button Template="{StaticResource IconButton}">

        <Image Source="myIcon.jpg"/>

      </Button>

    </Grid>

     

     

    This code takes the Image (the Content) of the button and places it in an empty Border. So in effect, you will see only the Image. If you want to make a different style when the mouse is over the button, or when the button is pressed, you must create the corresponding styles. Check Google for ControlTemplates, or you can see the tutorial I posted today:

    http://www.galasoft.ch/mydotnet/articles/article-2007100601.html

     

    Also very good to learn to make Templates:

    http://wpf.netfx3.com/files/folders/labs/entry9074.aspx

     

    HTH,

    Laurent

    Monday, October 8, 2007 1:55 PM
  • Just make your life easier. Launch the Microsoft Expression Blend. Draw a new rectangle, place an image, click on tools, and then click "Make Button". You can also have mouse over animation if you want.

     

    Watch this Video Tutorial about how to make an animated button inside Expression Blend

     

    http://windowsclient.net/learn/video.aspx?v=3934 

     

    Monday, October 8, 2007 4:40 PM
  • Thanks for that: The video resource was really useful: and I found a load of useful other videos on that site too.But how do I place an image (bitmap or icon) in a rectangle?
    When I tried to do so in the Xaml I got a message that <Rectangle> cannot have content. And none of the attributes looked like I could associate an image file with a rectangle either.
    Tuesday, October 9, 2007 10:04 AM
  • Open the Expression Blend, Draw a rectangle, Right Click the Project Name in the "Project" Box and click

    "Add Existing Item" now add the image u want to use on a button. Move the image on a desired location over a rectangle. Select Both the image and rectangle (by holding down the CTRL Key) . Right click the rictangle and select "Group Into" and then click "Grid". Both the rectangle and the image will now be grouped in to a single Grid. Now select the Grid (one with the rectangle and the image ) and Make it a Button as usual.

     

    And yes, if you don't want a border around your button, set the Stroke of a rectangle to none. Select the rectangle, click the Stroke in a properties pane and then click "No Brush" button.

     

    Just watch which Xaml code is generated for you if you want to do it in Xaml manually.

     

    Hope this helps.

    Thanks.

    Tuesday, October 9, 2007 10:25 AM
  • This bit works for me: a quick question: how can I get hold of the ControlTemplate which is defined in the xaml, programmatically?

    I am adding buttons dynamically and would like to set their Templates to this ControlTemplate.

     

    I have managed to do this by creating a hidden button with this template then doing:

     

    newButton.Template = hiddenButton.Template;

     

    But that is a bit kludgy. Would be much neater if i could just grab the control template directly from the xaml.

     

    Wednesday, February 27, 2008 6:28 PM
  • if it is in the resources, you should be able to do

    newButton.template = this.FindResource("Mytemplate") as ControlTemplate

     

    Wednesday, February 27, 2008 6:35 PM
    Moderator
  • Thanks for that. I now define the ControlTemplate in the xaml and I call FindResource, passing the x:key name as the parameter. I can now programmatically add buttons using this ControlTemplate.
    Thursday, February 28, 2008 10:13 AM