Right now I have a grid of six buttons, all with different images inside them. I have another set of six images, that are the original just with a gray tint to represent you selecting it. How do I change the image to the button to the new "selected image" when I select the button.
I am assuming you do it in the method:
private void button1_click(object sender, RoutedEventArgs e)
{
}
I'm having trouble figuring out what to put inside here. Normally I would think it would be something like:
button1.image = "image path";
However when making a WP7 application you cannot use the image keyword. Any advice on how to change the image of a button when clicked?
Write where you want to change the image
var brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri("/Images/YourImage.png",
UriKind.Relative));
btn.Background = brush;
In Silverlight (upon which the Windows Phone 7 framework is built) the Button control does not have an Image property. I presume that you have created your original buttons by placing an Image element as the child of the Button. On the assumption that you want the same behavior for a whole set of buttons, then it might make sense to use visual states instead. You coudl achieve a consistent look-and-feel by changing the opacity of the ContentPresenter, e.g. An Opacity of 0.75 for the "Normal" state and and Opacity of 1.0 for the "Selected" state.
Determing which button is the selected one would be the trickier part, but if you wrap your buttons in a ListBox then you can use the "Selected" visual state in the ItemContainerStyle.
If you want to continue with the approach that you've already taken, then given that you know that the content of the button is an Image, you could do something like the following:
private void button1_click(object sender, RoutedEventArgs e)
{
Button source = (Button)sender;
Image content = source.Content as Image;
if (null != content)
{
content.Source = new BitmapImage(new Uri("image path"));
}
}
In this approach you would, of course, also need to handle reverting the other buttons back to their "Normal" state, which the ListBox approach would handle for you.
What you're doing is a really good learning exercise - you'll learn lots about Silverlight by experimenting like this.
In addition to manually adjusting the image to match the button press state, I believe you can also achieve the effect you are looking for - that the button image becomes "gray" when pressed - you can do this using "Styles" and using "Behaviors". Take a look at posts like:
http://mstechno.wordpress.com/2009/08/28/silverlight-3-how-to-customize-a-button-with-expression-blend-3/
Windows Phone 7 (WP7) Change a button's background color on click
Some of the XAML in this might look daunting - and using Expression Blend takes some time to get used to - but you will get there. Good luck!
Related
How i can make this buttons with icons like these ??
Normally, in order to create stylized buttons in Winforms, you have to work with the Button.Image property:
this.myButton.FlatStyle = FlatStyle.Flat;
this.myButton.Image = // your image
// ...
The buttons in your image include a text, but since the enumeration System.Windows.Forms.TextImageRelation (used in the property Button.TextImageRelation) does not allow for a text below the image... obtaining the same style with this approach risks to become a hard task (using GDI, handling painting events, creating a derivative of the Button class, etc...), unless there is a trick that I don't know.
The fastest and simplest way to recreate the same style is to create a button with empty Text property and manually include the text in the image file. Actually, you set:
this.myButton.FlatStyle = FlatStyle.Flat;
this.myButton.ImageAlign = ContentAlignment.MiddleCenter;
this.myButton.Text = "";
and you put this image (just an example) straight into the control:
Friends,
I am assigning the Background of RootFrame to application resources, It works when you explicitly write the Resource name like below
App.RootFrame.Background = (System.Windows.Media.ImageBrush)App.Current.Resources["Theme_6"];
but If I use below it doesn't work:
string themeName = "Theme_6";
App.RootFrame.Background = (System.Windows.Media.ImageBrush)App.Current.Resources[themeName];
Is it possible to use the 2nd options in wp8?
Thanks!
Panorama control (and I think Pivot controls as well) has some problem supporting late binding for background images.
When you hard-code the image paths, there is no problem displaying a static background image.
To assign background images 'on the fly' you should follow these steps;
Create a Property (MainBackGroundImage) within your associated
ViewModel, that implements INotifyPropertyChanged interface (if you
are using MVVM pattern you already have this infrastructure).
Assign any image path (this can be a remote URL as well) to this
property whenever you want to change the background image.
In your View hook up to your ViewModel's property changed event and
update the layout of the control where background image is going to
appear:
void viewModel_PropertyChanged(object sender,PropertyChangedEventArgs e)
{
if (e.PropertyName == “MainBackGroundImage”)
{
this.MainPanorama.UpdateLayout();
}
}
You might perhaps take a look at my open-source WP8 application where I did achieve dynamic background images.
There is a similar question like mine here in Stackoverflow but it only explains how to change it in XAML. I want to know how can I change it in code.
Here is a image that shows how I do it in XAML using Blend:
Link for full size: https://snag.gy/4Skk4.jpg
Basically I want to change the background of a button's pressed state in C# but I can't seem to find any examples on the Internet. It must be in code because sometimes the image of the button will change therefore the button's pressed image must change as well.
The following code is just to change the image of the button and it's just the start.
image.ImageSource = new System.Windows.Media.Imaging.BitmapImage(new Uri(#"images/Button-warning-icon.png", UriKind.Relative));
image.Stretch = Stretch.Uniform;
buttonWarnings.Background = image;
If I understand you correctly, you are trying to change the appearance of the Button control in a "pressed" visual state.
I'm not near my dev computer to try it out, but to "unblock you" I'll give a direction.
First, as you noticed in your Blend screenshot, each visual state is represented with a Storyboard, which defines how various properties change. In your case, you're looking to change Background property.
The VisualStateGroups and their states are defined by the control. You can override them when you re-template the control. So, retemplate the button control using Blend with "Edit Template"->"Edit Copy".
Then, in code, you should be able to do the following:
1) Get visual states (this would not work unless you re-template the control, AFAIK)
var visualStateGroups = VisualStateManager.GetVisualStateGroups(buttonWarnings);
2) Get the VisualStateGroup of "CommonStates" from the visualStateGroups
collection
var commonStatesGroup = visualStateGroups.Find((g) => ((VisualStateGroup)g).Name == "CommonStates") as VisualStateGroup;
3) Get the "Pressed" VisualState:
var pressedVisualState = commonStatesGroup.Find((vs) => ((VisualState)vs).Name == "Pressed") as VisualState;
4) Change the storyboard of that state
pressedVisualState.Storyboard = newStoryboardWithCustomImageBackgroundProperty;
(Disclaimer: I'm not near in a computer to try it now - it's all in theory)
There are many examples to be found on the internet!
Take a look at some:
http://mobile.dzone.com/articles/windows-phone-buttonimage
http://loekvandenouweland.com/index.php/2011/01/windows-phone-image-button/
Actually its quite simple,
While in button pressed state....see part 3 in the image you uploaded above.
Above all the colors there is a row containing 5 icons.
Click on 4th icon.
it will show you option to choose image as background.
On the Windows Form application I have a Lamp image (a black and white one, and a bright one. For OFF and ON respectively).
Using the Button how can I achieve the scenario such that same button will turn the property of the image (pictureBox in my case) to show the Lamp as ON and pressing the same button again will turn the Lamp off.
I am accessing the 'Visible' property of picture box.
Put two images on top of each other and get the button to switch which one of them is enabled.
In the form designer you make one of them visible and the other non-visible. The code in the button handler can then be something like:
lightImage.Visible = !lightImage.Visible;
darkImage.Visible = != lightImage.Visible;
That will swap which one is visible and eliminate the need to keep state elsewhere.
A bit late to the party, but you can use a checkbox and set the appearance to button.
I think that would do what is expected by the original post.
I'm not sure about the way to put 2 images over each other, but if you want to reach the same effect:
place the 2 image files in your project resources
in the click event of the button, toggle the button image depending on a setting:
this would be in the click event:
Properties.Settings.Default.IsOptimizedForTracer !=Properties.Settings.Default.IsOptimizedForTracer;
if (!Properties.Settings.Default.IsOptimizedForTracer)
{
btnOptimizeForTracer.Image = Properties.Resources.TracerOFF;
return;
}
btnOptimizeForTracer.Image = Properties.Resources.TracerON;
I have in my app a ToolSrip with some ToolStripButtons.
I wish add not only the basic image, but an image for the hover state and another for the clicked state, and if possible, remove the orange background when the button is hovered by the mouse...
it's possible?
thanks in advance!
If you look at the events of the button you can see various events including. This isnt working code its just a sample from my head but look at the link.
private void Button1_OnMouseHover
{
BackGroundImage = "test.png";
}
http://msdn.microsoft.com/en-us/library/system.windows.forms.toolstripbutton.aspx