Stop/Start button binding in WP7 - wpf

There's a button for playing music on the form and a media element. The button is used for play/stop the music.
Is it possible (and how) to draw an arrow or a square inside the button by clicking in XAML? It must depends on the state of the media element (if it's playing or not). If it's impossible how to do it in code behind?
P.S. In other words it the music is playing the button must displays a square, otherwise it's must be an arrow (like a triangle).

You can change the background image of the button through code.
if(mediaplays)
{
ImageSource img = new BitmapImage(new Uri("imageurl", UriKind.Relative));
ImageBrush imgb = new ImageBrush();
imgb.ImageSource = img;
btn.Background = imgb;//btn is the name of the button
}

Related

Black content pane instead of tiled background

I have a form with a tiled background which works well in the Simulator.
However on device the background of the content pane is drawn black after an instant (IOS or Android).
Apparently the form appears first correctly drawn because the initial image of the app was created by the build process.
Any ideas why the pattern icon is not painted on the device?
The code looks like:
Image imageIcon = null;
try {
imageIcon = Image.createImage("/patternicot2.png");
} catch (IOException e) {
Log.p(e.toString());
}
Style style = form.getContentPane().getAllStyles();
style.setBgImage(imageIcon);
style.setBackgroundType(Style.BACKGROUND_IMAGE_TILE_BOTH);
I'm assuming that the image is translucent in which can you must set the bgTransparency of the content pane to 0 so the form background is painted. Also make sure you didn't define the Form itself to be transparent.

Move (zoom and pan) around a large Canvas

I have a lot of images placed on a canvas (~150 pages converted PDF).
I would like to be able to move around from one region to another of this canvas by animating the movement (zoom and pan).
My animation keys are in a listbox. I have a "play" button to play all.
When I click an animation key, my "camera" automatically moves to the defined location.
It's a kind of "Prezi wall".
This is only half or three quarters of an answer really, but hopefully you can fill in the gaps. You could try using the VisualBrush Class. First you set up the visual that the VisualBrush will paint using your full Canvas:
VisualBrush visualBrush = new VisualBrush();
visualBrush.Visual = yourCanvasElement;
You then paint with the Brush onto, let's say, a Rectangle element:
Rectangle rectangle = new Rectangle();
...
rectangle.Fill = visualBrush;
You can then use the VisualBrush.Viewbox property to move the content about. Now I think that there is some way of zooming in and out, but I can't remember at the moment.
Alternatively, you could use the ViewBox class. You can get your zooming effect by changing the size of the content and the ViewBox and get your panning effect by using a ScrollViewer. There's a post on StackOverflow that demonstrates this, so please take a look at the Zooming To Mouse Point With ScrollView and ViewBox in Wpf post for more help with this method.

How to dynamically resize a label inside a WPF application?

I need to know how I could dynamically resize a label in a WPF application.
I've already found a sample in this article which has already achieved both dragging and resizing a label at the same time.
I dug into the code, and to make it short, I found out that inside OnMouseMove event of the label, it checks the mouse cursor shape and if it was Hand it will do the dragging and if it was either of the resizing arrows it will do the resizing correspondingly.
Check it out. you'll see.
In this certain example I couldn't manage to find out how the cursor shape changes to resizing arrows when the mouse is hovered on the label's border.
So
I either need to find out 'how I could change the mouse cursor shape to resizing arrows when hovered on a label's border', OR to find a new approach to resize a label, dynamically.
Changing the cursor is done via the this.Cursor property.
I opened the code in the article and saw how they do it...
In the OnMouseMove the cursor is changed if the left mouse button is NOT clicked:
Point currentLocation = e.MouseDevice.GetPosition(wnd);
......
......
const int dragHandleWidth = 3;
var bottomHandle = new Rect(0, height - dragHandleWidth, width, dragHandleWidth);
var rightHandle = new Rect(width - dragHandleWidth, 0, dragHandleWidth, height);
Point relativeLocation = wnd.TranslatePoint(currentLocation, this);
if (rightHandle.Contains(relativeLocation))
{
this.Cursor = Cursors.SizeWE;
}
else if (bottomHandle.Contains(relativeLocation))
{
this.Cursor = Cursors.SizeNS;
}
else
{
this.Cursor = Cursors.Hand;
}
In other words, they check if the current mouse location is within 3 px of the bottom or right border, if it is, they change the cursor accordingly...
You can easily change this logic to suite your needs....

Is it possible to change an ImageBrush color inside WPF?

I'm trying to do something quite simple, but I'm not sure if it's possible. I have this image:
Inside my board game project, I use this to indicate the mouse position in the board and stuff like that (being the board a 8x8 grid with a rectangle inside). I'm also setting the grid cell background brush as, say, a SolidColorBrush with Blue color and .25 opacity, while the rectangle that lies above it with the target, or vice-versa, because I couldn't achieve my desired effect, which is, the part that is black to turn full blue, as my brush, while the rest remains with the opacity and etc. The way I did, it was possible to make the black part become blueish, with a transluscent background, but the color in the border isn't quite right yet:
I don't know if I was able to make myself clear, but I guess the picture shows what is my goal.
The code:
ImageBrush targetBrush = new ImageBrush();
targetBrush.ImageSource = new BitmapImage(new Uri("Resources/GameScreen/selectedTile.png", UriKind.Relative));
targetBrush.Opacity = 1;
SolidColorBrush backBrush = new SolidColorBrush(Colors.Blue);
backBrush.Opacity = .25;
tile.Children.Add(new Rectangle());
foreach (object target in tile.Children)
{
if (target.GetType() == typeof(Rectangle))
{
((Rectangle)target).Fill = backBrush;
}
}
tile.Background = targetBrush;
Thanks in advance.
As the image is just a mask you could use a Rectangle with a blue Fill and an OpacityMask set to your image.

How to hide the border around child window

I have a child Window , and I am displaying it from the code behind as below:
ChildPhotoViewer PhotoViewer = new ChildPhotoViewer();
PhotoViewer.DataContext = selectedPhoto;
PhotoViewer.Title = selectedPhoto.strTitle.ToString();
PhotoViewer.Show();
But While Displaying the child window I am getting the Close Button and a Border thickness arround the Window.
I am able to hide the Close Button but is there a way to hide the thickness(Border) across the child window.
Edit:
![alt text][1]
In the Image , there is border arround image after Collpasing the Close button and making
PhotoViewer.Title = null;
PhotoViewer.HasCloseButton = false;
I want to get rid of that Rectangular Border.
Have you tried:-
PhotoViewer.BorderThickness = new Thickness(0);
Edit
Perhaps you are refering to the title block across the top of the window?
PhotoViewer.Title = null;
PhotoViewer.HasCloseButton = false;
Edit
Third attempt.
The template for ChildWindow place the content in border with a 7 pixel margin. This also has an outer border which has a White background. That is what you are seeing in the image. The only way to eliminate it is to copy the ChildWindow template and edit it.
Depends on what you mean by the Border.
If you have a look at the Documentation you can see there is a border (with a thickness of 1) around the edge of the entire window that can be altered like Anthony mentions.
However there is also the window Chrome which in the default template has a number of borders. To change the thickness of these borders you will need to create a style without the borders being present.

Resources