Changing Button behavior

Question

I am trying to change the image of a button on when the pointer is hovering over it.  I have a handler for both the PointerEnteredEvent and PointerExitedEvent

m_bnLevelSelect[x][y]->AddHandler( UIElement::PointerEnteredEvent, ref new PointerEventHandler(this, &DirectXPage::bnLevelSelect_PointerEntered), true );
m_bnLevelSelect[x][y]->AddHandler( UIElement::PointerExitedEvent, ref new PointerEventHandler(this, &DirectXPage::bnLevelSelect_PointerExited), true );

The handlers are getting called when the pointer enters and exists the area of the button.  Within the handler I am changing the background of the button to an image and setting e->handled = True;  however the default gray square seems to override the image I set.  I have verified the button background is getting set to the correct image but the default button hover behavior (a gray box) appears to display over my image.  I know I am correctly setting the Image since if I do not change the image back during the PointerExitedEvent the button is shows as changed to the image for the PointerEnteredEvent as expected.

How do I get my image to display for the button during the PointerEnteredEvent instead of the default gray rectangle?

Answer 1

Instead of trying to override the event handlers edit the template to show the image you want in the PointerPressed state. See Quickstart: Styling controls, Quickstart: Control templates, and Button styles and templates .

Answer 2

Thank you very much for the links!  They gave me just what I needed.  What I left out of my original message is that I am creating the buttons programmatically because the number of buttons is dynamic. 

So the next question is how do I use the style for the button from C++

m_bnLevelSelect[x][y] = ref new Button();
m_bnLevelSelect[x][y]->Name = (x+1).ToString() + (y+1).ToString();
m_bnLevelSelect[x][y]->Content = (y + 1).ToString();
m_bnLevelSelect[x][y]->Foreground = ib[x];
m_bnLevelSelect[x][y]->SetValue(gdLevelSelector->ColumnProperty, x*2);
m_bnLevelSelect[x][y]->SetValue(gdLevelSelector->RowProperty, y+2);
//m_bnLevelSelect[x][y]->Style = "{StaticResource BlockButton}";
m_bnLevelSelect[x][y]->Click += ref new RoutedEventHandler(this, &DirectXPage::bnLevelSelect_Click);
gdLevelSelector->Children->Append(m_bnLevelSelect[x][y]);

I have been trying to set the style of the button to the template style using something like m_bnLevelSelect[x][y]->Style = "{StaticResource BlockButton}"; where BlockButton is the style but I have not been able to determine how to set the value of a Button Style or if that is even the correct way to use the custom template from C+?

---

Randy

Answer 3

You need to use a Style object rather than passing in Xaml. If you have it as a resource you can look it up from your element's Resources property or from App::Current::Resources.

--Rob

Answer 4

Rob thanks again for pointing me in the right direction. I was able to find the solution I was looking for:

autost=App::Current->Resources->Lookup("BlockButton");

m_bnLevelSelect[x][y]->Style=safe_cast<Windows::UI::Xaml::Style^>(st);

---

Randy