My default background image is "lobby.jpg" and when I click the "Lights" button I want it to swap with "lobby1.jpg" and vice versa. These images are stored in "obj\Debug\Images\".
Also I'd like to implement relative(?) imagesource uris so that I can access the images on any machine (without using the whole uri, just the "obj\Debug\Images\").
Edit: So the main issue seems to be that I tried changing the window background without realising that it was getting "covered" by the grid background of the page. So what I did is I set the main window background to "lobby.jpg", I made the grid background invisible and used the code from the answer to swap between the 2 backgrounds.
You can use AppDomain basepath to exe (this is are simplest way)
var basePath= AppDomain.CurrentDomain.BaseDirectory;
var imageDirPath = $"{basePath}\\Images\\";
Example:
bool clicked = false;
private void button_Click(object sender, RoutedEventArgs e)
{
var basePath = AppDomain.CurrentDomain.BaseDirectory;
var imageDirPath = $"{basePath}\\Images\\";
if (clicked)
image.Source = new BitmapImage(new Uri(imageDirPath+ "lobby.jpg"));
else
image.Source = new BitmapImage(new Uri(imageDirPath + "lobby1.jpg"));
clicked = !clicked;
}
Related
I'm working on an UWP project and I want to load a WebView with opacity = 0.01f, and only set opacity to 1.0f when WebView_LoadCompleted is called. Until then it is presented by a preview image. But when I'm showing it, it flickers white in like 1 on 20 cases, and I'm testing the same WebView content.
My code looks like this:
Grid grid = new Grid();
//set previewImage as preview of grid content
Image backgroundImage = new Image();
backgroundImage.Source = new BitmapImage(new Uri(#"ms-appdata:///local/" + "some path"));
grid.Children.Add(backgroundImage);
grid.SetValue(Grid.RowProperty, slide.Pos.Y);
grid.SetValue(Grid.ColumnProperty, slide.Pos.X);
MainGrid.Children.Add(grid);
WebView webView = new WebView();
webView.NavigationStarting += WebView_NavigationStarting;
webView.LoadCompleted += WebView_LoadCompleted;
webView.ScriptNotify += WebView_ScriptNotify;
webView.Opacity = 0.01f;
Uri navigationUri = "some local file Uri");
webView.NavigateToLocalStreamUri(navigationUri, myResolver); // myResolver checks if source is allowed to load
webView.Width = 1024;
webView.Height = 768;
Viewbox viewBox = new Viewbox();
viewBox.Stretch = Stretch.Uniform;
viewBox.Child = webView;
grid.Children.Add(viewBox);
And my WebView_LoadCompleted looks like this:
private void WebView_LoadCompleted(object sender, NavigationEventArgs e)
{
WebView webView = (WebView)sender;
webView.Opacity = 1.0f;
}
I was expecting that the WebView will only render its laoded content right away because it is visible (with low opicity) in the ViewBox, and most of the times it is not flickering, but it still appears.
Trying to get a call after WebView_LoadCompleted didn't work yet, I tried some calls like x_LayoutUpdated, x_SizeChanged for the WebView and the ViewBox, but WebView_LoadCompleted is the last called function that runs into a breakpoint.
Setting the WebView.DefaultBackgroundColor to transparent didn't work, it still flickers white.
Placing the WebView below the Image and getting it to the front after a delay for layout time didn't work.
Thanks for your help! I appreciate it!
It looks like there is no proper way to validate that the webview is finished with all possible loading and rendering processes for the webview.
But you can use this answer of another question for other UIElements:
Answer
I have this idea of this world map image and when I click a country on it, it shows information of that country in a MessageBox for example does anyone have an idea how to do that?
I have a rectangle and a button and when i click the button it shows the image in the rectangle but i thought if i use polygons to shape the country's but I'm a little stuck.
I would like to have every country apart and maybe that the borders light up when clicked
You can do this pretty easily using WPF:
Find a nice World Map in SVG format. I used this one from Wikipedia:
Download and install Inkscape then open the SVG you've just downloaded. Inkscape has a nice feature that makes it possible to save an SVG as a XAML.
Import the ViewBox from the XAML file into your WPF window/etc:
For each Path in the XAML you can add a MouseEnter/MouseLeave event handler or you can use the same one for all the Paths
Sample code:
private void CountryMouseEnter(object sender, MouseEventArgs e)
{
var path = sender as Path;
if (path != null)
{
path.Fill = new SolidColorBrush(Colors.Aqua);
}
}
private void Country_MouseLeave(object sender, MouseEventArgs e)
{
var path = sender as Path;
if (path != null)
{
path.Fill = new SolidColorBrush(Colors.Black);
}
}
Now it's just a matter of changing colors/showing MessageBoxes etc.
GitHub
My first thought: You could bind a command to the view that will be triggered by a click on a position. If you're using WPF you can bind command parameters to the command to get the x and y of your click...
After that you have to handle the content of your messagebox and the highlighting of the borders depending on the position xy.
have fun :D
Option 1
There is a project on Code Project that someone created that defines hotspots that are clickable with events. You could use that to overlay your map and define the hotspots where you need them.
C# Windows Forms ImageMap Control
Option 2
You could bind to the MouseUp Event on the Image and use the following to see if it is in a Rectangle
private void mapMouseUp(object sender, MouseEventArgs e) {
Rectangle rect1 = new Rectangle(0, 0, 100, 100);
Rectangle rect2 = new Rectangle(0, 100, 100, 100);
if (rect1.Contains(e.Location)) {
// Do your stuff
} else if (rect2.Contains(e.Location)) {
// Do your stuff
}
}
I'm a novice programmer so don't be brutal.
I'm making a game for Windows Store, and I want to animate a run cycle. I made many GIF animations but all have BLACK background, and I need it transparent. So I've decided to make a run cycle using DispatcherTimer. Everything works fine, but the images don't change :/
void timer_Tick(object sender, object e)
{
numer++;
if (numer > 8) numer = 1;
hero.Source.Equals("Assets/Anim/" + nazwa + numer + ".png");
}
Also, When I TAP a different image, it should change the image and other images, but it doesn't... what is wrong?
bool sun = true;
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
sun = !sun;
if (sun == false)
{
Image1.Source.Equals("moon.png");
Image2.Source.Equals("ON.png");
}
else
{
Image1.Source.Equals("sun.png");
Image2.Source.Equals("OFF.png");
}
}
The xaml works fine, as the images are shown.
I have checked this question:
ImageTools on Windows Phone 8, changing ImageSource and DataContext
but I get loads of errors. I don't seem to understand how the property changed works.
it seems to be a small mistake. You are using the wrong method.
Image.Source.Equals()
is a boolean method that simply compares the current source with the "source" you give as arguement and will return true or false based on the comparison.
But what you want is to set the source of the image.
So you need to use:
Image1.Source = new BitmapImage(new Uri("moon.png", UriKind.RelativeOrAbsolute));
This will set the source of the Image to the new image you want.
Assuming that "moon.png" is in the main folder in your solution, the two solutions both work:
BitmapImage tn = new BitmapImage();
tn.SetSource(Application.GetResourceStream(new Uri(#"moon.png", UriKind.Relative)).Stream);
Image1.Source = tn;
Or
Image1.Source = new BitmapImage(new Uri("moon.png", UriKind.Relative));
How to add a parameter for an image to this variable?
var selectionDisplay = new SelectionDisplay(button.Label as string);
Thanks in advance!
EDIT:
I have this set of images and their respective code below (see pic1)
This is where the program gets the images to be displayed. The code for the buttons is this one:
var files = Directory.GetFiles(#".\GalleryImages");
foreach (var file in files)
{
FileInfo fileInfo = new FileInfo(file);
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(file, UriKind.Relative);
bi.EndInit();
var button = new KinectTileButton
{
Label = System.IO.Path.GetFileNameWithoutExtension(file),
Background = new ImageBrush(bi)
};
this.wrapPanel.Children.Add(button);
}
This is where the program gets the images to be displayed.
The code for the buttons is this one:
private void KinectTileButtonclick(object sender, RoutedEventArgs e)
{
var button = (KinectTileButton)e.fake_fake_fakeource;
var selectionDisplay = new SelectionDisplay(button.Label as string);
this.kinectRegionGrid.Children.Add(selectionDisplay);
e.Handled = true;
Right now, when i click on of the images, the SelectionDisplay window pops up, which look like this (see pic2). What i want is that when I click an image the SelectionDisplay window should open with the respective image... meaning that if I click on the image with a dog, the window should open with the dog's image, not with other image.
I hope I've made myself clear and that you can help me.
http://i58.tinypic.com/8zl6h3.jpg
http://i57.tinypic.com/208fosy.png
is this the constructor you are talking about? is this where i should make changes? should i add something after "string itemid"?
public SelectionDisplay(string itemId)
{
this.InitializeComponent();
this.messageTextBlock.Text = string.Format(CultureInfo.CurrentCulture,Properties.Resources.SelectedMessage,itemId);
}
I see two approaches:
Just pass the image brush in your constructor. Its view->view, so you aren't breaking MVVM (and it looks like you aren't using that pattern anyways).
new SelectionDisplay(button.Label, button.Background);
Set the path as the "tag" of the button. The tag property is an object you can put whatever you want into (the framework does not use it, and so it is included for this very purpose). Then just pass the string to SelectionDisplay, and instantiate the image just like you are doing for the button:
var button = new KinectTileButton
{
Label = System.IO.Path.GetFileNameWithoutExtension(file),
Background = new ImageBrush(bi),
Tag = file
};
var selectionDisplay = new SelectionDisplay(button.Label as string, button.Tag as string);
FrameworkElement.Tag on MSDN (Note that Button derives from FrameworkElement, as do all controls, so it automatically has it as well!)
UPDATE
I see that SelectionDisplay is a UserControl in your project, so you just need to change its constructor to look like:
Numbers match above:
SelectionDisplay(string labelText, ImageBrush sourceImage)
SelectionDisplay(string labelText, string imagePath)
That is the source of the error you are getting, you have to modify the constructor to take the new parameter.
Please let me know if I can clarify anything.
I want to iterate through all the files in a folder and dynamically create images controls for each JPEG file found. Once complete I want a form filled with dynamically created image controls (think of just about any photo viewing software such as Picasa that has a thumbnail view).
I want to be able to reorder these dynamically created images controls on the form by implementing some sort of drag drop event handler. I will not know how many images I will encounter and therefore cannot hardcode event handlers for each image control that might or might not exist. So I am looking for a way to dynamically add event handlers to dynamically created controls.
The method used in the code below is almost what I am looking for. The problem with the method below is that if I don't know the name of the control I could not hard code the event handler.
public partial class RoutedEventAddRemoveHandler {
void MakeButton(object sender, RoutedEventArgs e)
{
Button b2 = new Button();
b2.Content = "New Button";
// Associate event handler to the button. You can remove the event
// handler using "-=" syntax rather than "+=".
b2.Click += new RoutedEventHandler(Onb2Click);
root.Children.Insert(root.Children.Count, b2);
DockPanel.SetDock(b2, Dock.Top);
text1.Text = "Now click the second button...";
b1.IsEnabled = false;
}
void Onb2Click(object sender, RoutedEventArgs e)
{
text1.Text = "New Button (b2) Was Clicked!!";
}
}
Note I am looking for a solution in c# code not XAML. That is a solution using code like this to add controls:
// What I want
Fields.Add(new Field() { Name = "Username", Length = 100, Required = true });
not like this:
// What I do not want
<TextBox Width="100" Canvas.Left="50" Canvas.Top="20" />
Thanks
I would not do so much in codebehind. Only to get the files.
I would get an ObservableCollection where the string is the FullName of the file.
Then I would present it in a ListBox or ListView having the ItemSource bound to the collection and defining å good ItemTemplate for the control.
In the template, you can use a Converter to create å Source for the Image in the template.
Adding a small sample just to save you the pain of image loading in WPF code-behind.
void OnButtonClick(object sender, RoutedEventArgs routedEventArgs)
{
var files = Directory.GetFiles(#"C:\img");
foreach (var file in files)
{
var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(file);
bitmap.CacheOption = BitmapCacheOption.OnLoad;
bitmap.EndInit();
var img = new Image { Source = bitmap };
img.MouseDown += OnImageMouseDown;
//Add img to your container
}
}
void OnImageMouseDown(object sender, MouseButtonEventArgs e)
{
var img = sender as Image;
//Operate
}