C# WPF check if button image has updated before updating again - c#

I'm working on making a memory game in C# using borders with images and changing their source. Changing the first source works correctly, however after the second flip I call a function to check if they match before flipping them to a correct or hidden image. I've been having an issue with the second image because the events I've tried call before the function has exited so the second image only shows the hidden image. Is there an event I can call to check if the image has loaded before exiting?
//border mousedown event
private void Border_MouseDown(object sender, MouseButtonEventArgs e)
{
//flip the image over
Border picBorder = sender as Border;
picBorder.IsEnabled = false; //disable the border so they can't click it again
int index = Int32.Parse(Regex.Match(picBorder.Name, #"\d+").Value); //get border #
BitmapImage car = new BitmapImage(carImages[index]);
picBorder.Child = new Image { Source = car};
picBorder.IsEnabled = false;
//Storing border locations for checking later
borderLocations[currentCarsFlipped] = picBorder;
currentCarsFlipped++;
}
Once CurrentCarsFlipped == 2, I need to check if there is a match. Currently, I have checkWin() which looks like it will work, but is hard to debug when you can only see 1 image for every 2 clicks

use a Boolean variable ,
False if not updated and true after update, then you can check

Related

How do I get the Bitmap name when I click the image in datagridview?

I am trying to click on an image in a datagridview and then write its image/file name into a textbox so I can access this from elsewhere.
First I try just a small app to make sure I can make it all work. A Dialog contains the dataviewgrid and I put a bitmap into it as below:
public ChooseFormat()
{
InitializeComponent();
dataGridView1[0,0].Value = new Bitmap(#"C:\a\eggs\grid_app\grid_app\bin\Debug\graphics\1L5HQ60.bmp");
}
Now I click on the image but all the things I have tried I cannot get hold of the file name. The closest I get is below but this returns "System.Drawing.Bitmap" and not the file name. I am sure this must just be a tweak here to make it work but I have tried teh few things I know and nothing is working.
void DataGridView1CellContentClick(object sender, DataGridViewCellEventArgs e)
{
txtbx_choice.Text = dataGridView1[0,0].Value.ToString();
}
Drilling into the cells's data in the debugger doesn't bring up any info on the source of it. Maybe I have overlooked something..
One simple solution is to store the filename in the cell's Tag property:
string fileName = #"C:\a\eggs\grid_app\grid_app\bin\Debug\graphics\1L5HQ60.bmp";
dataGridView1[0,0].Value = new Bitmap(fileName );
dataGridView1[0,0].Tag = fileName ;
Now you can always access it:
string displayedFile = dataGridView1[0, someRow].Tag.ToString();
I have placed a Picture Box on the same form and this how I am displaying the ImageColumn's data (an Image ) in picture box
pictureBox1.Image = (Image)dataGridView1[0, 0].Value;

Kinect SDK 1.7 | Change KinectCursor image and size

I have downloaded Kinect SDK 1.7, toolkit and have played with following samples.
ControlBasics WPF
InteractionGallery WPF.
I figured out that Kinect Toolkit internally uses the interaction frame to detect the hand position/gesture and accordingly maps it with the Kinect Controls.
I have a requirement where I want to capture a grip event on a Kinect Tile Button. Since the default KinectTileButton does not provide a Grip event. I added a grip event handler on my button.
KinectRegion.AddHandPointerGripHandler(kinectButton, OnHandPointerCaptured);
private void OnHandPointerCaptured(object sender, HandPointerEventArgs handPointerEventArgs)
{
// Add code here
}
I placed a debug breakpoint inside the OnHandPointerCaptured method and was able to receive proper hits when I grip on the KinectTileButton. But for some reason I do not see the KinectCursor image change to a grip as it happens on the KinectScrollViewer control.
I tried setting up the isGripTarget property in the KinectButtonBase class but it doesn't help.
private void InitializeKinectButtonBase()
{
KinectRegion.AddHandPointerPressHandler(this, this.OnHandPointerPress);
KinectRegion.AddHandPointerGotCaptureHandler(this, this.OnHandPointerCaptured);
KinectRegion.AddHandPointerPressReleaseHandler(this, this.OnHandPointerPressRelease);
KinectRegion.AddHandPointerLostCaptureHandler(this, this.OnHandPointerLostCapture);
KinectRegion.AddHandPointerEnterHandler(this, this.OnHandPointerEnter);
KinectRegion.AddHandPointerLeaveHandler(this, this.OnHandPointerLeave);
// Use the same OnHandPointerPress handler for the grip event
KinectRegion.AddHandPointerGripHandler(this, this.OnHandPointerPress);
//Set Kinect button as Grip target
// KinectRegion.SetIsPressTarget(this, true);
KinectRegion.SetIsGripTarget(this, true);
}
How do I change the KinectCursor image from openhand icon to grip, and also the size.
Here's what i found-
1) Cursor Image and Size - Both these samples use Microsoft.Kinect.Toolkit.Controls project that defines the Custom Controls (KinectTileButton,KinectScrollViwer,KinectRegion etc.) used in these samples. The Kinect Cursor image and size is defined as a resource in
Microsoft.Kinect.Toolkit.Controls ->Themes->Generic.xaml. Search for following in the file -
<Style TargetType="{x:Type local:KinectCursor}">
You can modify this as per your need. Wasn't able to find any properties/hooks exposed to control this directly from the UI.
2) Grip event on Tile Button - Kinect Button Supports various events which can be subsribed to and acted upon on your desire. see this
Hand over button event in Kinect SDK 1.7
3) Change Cursor image to Grip on Tile Button -
Microsoft.Kinect.Toolkit.Controls project uses KinectCursorVisualizer.cs and KinectCursor.cs to render the virtual hand cursor on the UI. The Open Hand/Grip visual state is controlled via this Dependency Property defined in KinectCursor.cs.
public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
"IsOpen",
typeof(bool),
typeof(KinectCursor),
new UIPropertyMetadata(true, (o, args) => ((KinectCursor)o).EnsureVisualState()));
A quick find all references on the property IsOpen tells that the only place where this property is set is in KinectCursorVisualizer.cs-> OnHandPointersUpdated method. Line- 229
// Set open state
cursor.IsOpen = !pointer.IsInGripInteraction;
And this pointer.IsInGripInteraction property is set at KinectAdapter.cs Line 678
handPointer.IsInGripInteraction = newIsInGripInteraction;
If you look at the code just above this line you'll find that this property is only set to true if the target element has a QueryInteractionStatusHandler defined and it sets
args.Handled , args.IsInGripInteraction property to true.
Since KinectScrollViewer has this handler defined you see a grip image.
private void InitializeKinectScrollViewer()
{
KinectRegion.AddHandPointerGotCaptureHandler(this, this.OnHandPointerCaptured);
KinectRegion.AddHandPointerLostCaptureHandler(this, this.OnHandPointerLostCapture);
KinectRegion.AddHandPointerEnterHandler(this, this.OnHandPointerEnter);
KinectRegion.AddHandPointerMoveHandler(this, this.OnHandPointerMove);
KinectRegion.AddHandPointerPressHandler(this, this.OnHandPointerPress);
KinectRegion.AddHandPointerGripHandler(this, this.OnHandPointerGrip);
KinectRegion.AddHandPointerGripReleaseHandler(this, this.OnHandPointerGripRelease);
//This is the QueryInteractionStatusHandler
KinectRegion.AddQueryInteractionStatusHandler(this, this.OnQueryInteractionStatus);
KinectRegion.SetIsGripTarget(this, true);
this.scrollMoveTimer.Tick += this.OnScrollMoveTimerTick;
this.scrollViewerInertiaScroller.SlowEnoughForSelectionChanged += this.OnSlowEnoughForSelectionChanged;
// Create KinectRegion binding
this.kinectRegionBinder = new KinectRegionBinder(this);
this.kinectRegionBinder.OnKinectRegionChanged += this.OnKinectRegionChanged;
}
but KinectTileButton (extends KinectButtonBase) does not have this handler defined
private void InitializeKinectButtonBase()
{
KinectRegion.AddHandPointerPressHandler(this, this.OnHandPointerPress);
KinectRegion.AddHandPointerGotCaptureHandler(this, this.OnHandPointerCaptured);
KinectRegion.AddHandPointerPressReleaseHandler(this, this.OnHandPointerPressRelease);
KinectRegion.AddHandPointerLostCaptureHandler(this, this.OnHandPointerLostCapture);
KinectRegion.AddHandPointerEnterHandler(this, this.OnHandPointerEnter);
KinectRegion.AddHandPointerLeaveHandler(this, this.OnHandPointerLeave);
KinectRegion.SetIsPressTarget(this, true);
}
How to define this handler ? - Simple add following to your UI. Can be added to constructor
//Add the handler
KinectRegion.AddQueryInteractionStatusHandler(kinectButton, OnQuery);
Define the Handler
//Variable to track GripInterationStatus
bool isGripinInteraction = false;
private void OnQuery(object sender, QueryInteractionStatusEventArgs handPointerEventArgs)
{
//If a grip detected change the cursor image to grip
if (handPointerEventArgs.HandPointer.HandEventType == HandEventType.Grip)
{
isGripinInteraction = true;
handPointerEventArgs.IsInGripInteraction = true;
}
//If Grip Release detected change the cursor image to open
else if (handPointerEventArgs.HandPointer.HandEventType == HandEventType.GripRelease)
{
isGripinInteraction = false;
handPointerEventArgs.IsInGripInteraction = false;
}
//If no change in state do not change the cursor
else if (handPointerEventArgs.HandPointer.HandEventType == HandEventType.None)
{
handPointerEventArgs.IsInGripInteraction = isGripinInteraction;
}
handPointerEventArgs.Handled = true;
}
You may have to tweak this as per your requirement. Happy Kinecting :)

WP7/8 changing InputScope dynamically after an event using C#

I'm making an app for Windows Phone, I've been trying for ages to get the InputScope of the main text box to change when the orientation is changed to landscape (so that the keyboard takes up less space in landscape without the autocorrect bar), and back again.
I experimented with a second text box and hiding the others upon an orientation change, but this did not work neatly. :P
Try as I might I can't get this to work and can find no way to change the InputScope value after the OrientationChangedEvent argument, which has worked nicely in changing the position of the elements of the page around orientations.
I'm still fairly new to developing apps with C# and XAML, and I hope there's a nice easy way to set the InputScope of my text box that one of you awesome people could show me!
-EDIT : Here's the event handler, everything inside there works absolutely fine, but any way I try to add anything to do with InputScope does not work :(
private void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
{
//Portrait
PlaceholderText.FontSize = 29.333;
PlaceholderText.Padding = new Thickness (0,0,0,0);
MainTweet.FontSize = 29.333;
MainTweet.Padding = new Thickness (12,8,12,8);
Counter.Margin = new Thickness (0,212,28,0);
}
else
{
//Landscape
PlaceholderText.FontSize = 23;
PlaceholderText.Padding = new Thickness (8,0,0,0);
MainTweet.FontSize = 22;
MainTweet.Padding = new Thickness (16,8,180,0);
Counter.Margin = new Thickness (0,-18,28,0);
}
}
MainTweet.Text is the textbox that the keyboard is focusing on by default, when the page is changed to landscape I'd love to be able to change this from the "Search" InputScope to another, probably "URL". The stuff currently in there rearranges elements on the page nicely when the orientation is changed, I appreciate it might not look that neat...
There are multiple "orientation" states in the enumeration - not just Portrait and Landscape. The following worked for me to change the scope (on Windows Phone 7.5 emulator):
if (e.Orientation == PageOrientation.Landscape
|| e.Orientation == PageOrientation.LandscapeRight
|| e.Orientation == PageOrientation.LandscapeLeft)
{
InputScope inputScope = new InputScope();
InputScopeName inputScopeName = new InputScopeName();
inputScopeName.NameValue= InputScopeNameValue.Url;
inputScope.Names.Add(inputScopeName);
textBox1.InputScope = inputScope;
}
So you'd drop that into your MainPage_OrientationChanged event handler.

How to stop WP7 ListBox auto scrolling clicked item into view?

I have an application that has a nice flyout animation when the users selects an item in the listbox. When the user clicks the back button, a flyin animation is used. You can see the example here:
I am using the same animation code as this sample. everything works fine until the clicked item is partially off the bottom or top of the screen. The flyout animation will happen properly but when the user returns to the list, the listbox auto scrolls the selected item up (or down) to be fully in view. The flyin animation however returns the text to the original (before auto scroll happened) location. You may need to download the working sample to fully see what I am on about.
The question I have is - is there a way to disable this auto-scroll action. The built in apps like messaging and email don't scroll a partially visible item into view when selected.
Thanks
I don't know how to disable auto-scroll action, but I have a quick fix for that code:
In class ItemFlyInAndOutAnimations
add a field
private FrameworkElement _element; //let's consider the line is 266
in public void ItemFlyIn() make changes:
public void ItemFlyIn()
{
if (_popupCanvas.Children.Count != 2)
return;
_popup.IsOpen = true;
_backgroundMask.Opacity = 0.0;
Image animatedImage = _popupCanvas.Children[1] as Image;
var sb = new Storyboard();
var rootFame = Application.Current.RootVisual as FrameworkElement; //new line
var targetElementPosition = _element.GetRelativePosition(rootFame); //new line
// animate the X position
var db = CreateDoubleAnimation(targetElementPosition.X - 100, targetElementPosition.X,
new SineEase(),
_targetElementClone, Canvas.LeftProperty, _flyInSpeed); //reference changed!
sb.Children.Add(db);
// animate the Y position
db = CreateDoubleAnimation(targetElementPosition.Y - 50, targetElementPosition.Y,
new SineEase(),
_targetElementClone, Canvas.TopProperty, _flyInSpeed); //reference changed!
sb.Children.Add(db);
//other code is the same
in public void ItemFlyOut(FrameworkElement element, Action action)
after this line
_targetElementPosition = element.GetRelativePosition(rootElement);
add this one:
_element = element;
What have I done:
In this code I save the reference to animated UI element and update it's position on back animation.
You'd better to test this code, but it seems to be ok.

Clickable image grid in windows form?

If this is a dumb question, forgive me. I have a small amount of experience with C#, but not to this degree yet.
I have a series of images that I want to put into a grid with space around each image, also text beneath them and I want them to be clickable, so when they're clicked they hilite, and double click runs an event. The best example I have for this is the user interface of the program ACDSee. I've googled this for hours, and haven't come up with anything applicable. Is this difficult or simple? Can anyone give me an example, or point me in the right direction?
Cheers.
It doesn't seem to be very difficult. I would suggest the following steps:
Add a new "User Control" to your project for image thumbnails. It can contain a docked PictureBox and a Label or LinkLabel at its bottom.
For the space around each thumbnail simply play with the Padding property of the user control.
For the so called grid that is going to hold the thumbnails, use a FlowLayoutPanel, and simply add instances of the above mentioned user-control to this panel.
For visual representation of being selected, change the background color of the user-control instance to blue (for example), and back to control-face when deselected. It is recommended to implement an IsSelected property for the user-control as well.
To emulate thumbnail selection, handle the Click event of the user-control and assign the events for all thumbnail instances to a single event-handler method. Store a global reference to the already selected thumbnail, name it e.g., SelectedThumbnail initialized with null. In the event-handler body compare the sender with the global SelectedThumbnail, and update it if required. If the user-control associated with the sender is not selected (i.e., its background is not blue, or IsSelected is false) make it selected, or change its background. Otherwise change the background to its default color (e.g., control-face).
The Click event handler body looks something like this:
MyThumbnailControl ctrl = sender as MyThumbnailControl;
if(ctrl == null) return;
if(ctrl == SelectedThumbnail) return; // selected again
if(ctrl != SelectedThumbnail)
{
ctrl.IsSelected = true;
ctrl.BackColor = Color.Blue;
// it's better to set the back-color in the IsSelected property setter, not here
SelectedThumbnail.IsSelected = false;
SelectedThumbnail.BackColor = Color.Control;
SelectedThumbnail = ctrl; // important part
}
It's also recommended that all thumbnail instances that are going to be added to the so-called grid, be referenced in a separate array too. Therefore changing selection with arrow-keys would be possible with simple index calculations.
Further Notes: I assumed that the user-control that is to be created is named MyThumbnailControl, just a random name to refer to that control. When you create a new user-control, the wizard generates a class for you with your desired name (e.g., MyThumbnailControl), you can define a property inside it named IsSelected and implement its getter and setter. See this for a tutorial. After defining the user-control you can instantiate instances from its corresponding class. Also by global reference, I meant a variable at the form (or any parent control) level. To keep it simple we can add a reference of the selected thumbnail in the form that is going to hold the grid and thumbnails: MyThumbnailControl selectedThumb = null; or something like this in the body of the form.
Here is something, I just fixed you.
Create a C# project name CreateImageList and in the Form1 add the following 5 controls with their default name i.e. Panel1, PictureBox1, Label1, Button1, Button2:
How it works:
When the page load it create an imageList objects and load all .jpg images from a folder you provide
ImageList Images are set into the PictureBox control and when user clicks "Button1" the picturebox shows next image in ImageList and when user clicks "Button2" the PictureBox shows previous image from ImageList.
The Label1 shows the currentImage counter from the ImageList Arrage. If you want to write something specific, you can create an array of text and sync with your image counter.
When user click on PictureBox the a border is create to show Picture highlighted
When user Double Click on PictureBox a MessageBox appears shows DoubleClick event.
Now, you can use the following code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.IO;
namespace CreateImageList
{
public partial class Form1 : Form
{
private int currentImage = 0;
protected Graphics myGraphics;
ImageList iPicList = new ImageList();
public Form1()
{
InitializeComponent();
DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
iPicList.ImageSize = new Size(255, 255);
iPicList.TransparentColor = Color.White;
myGraphics = Graphics.FromHwnd(panel1.Handle);
foreach (FileInfo file in dirImages.GetFiles())
{
if (file.Extension == ".jpg")
{
Image myImage = Image.FromFile(file.FullName);
iPicList.Images.Add(myImage);
}
}
if (iPicList.Images.Empty != true)
{
panel1.Refresh();
currentImage = 0;
// Draw the image in the panel.
iPicList.Draw(myGraphics, 1, 1, currentImage);
// Show the image in the PictureBox.
pictureBox1.Image = iPicList.Images[currentImage];
label1.Text = "Image #" + currentImage;
}
}
private void showImage(int imgIndex)
{
// Draw the image in the panel.
iPicList.Draw(myGraphics, 1, 1, currentImage);
// Show the image in the PictureBox.
pictureBox1.Image = iPicList.Images[currentImage];
label1.Text = "image #" + currentImage;
panel1.Refresh();
}
private void button1_Click(object sender, EventArgs e)
{
if (iPicList.Images.Count - 1 > currentImage)
{
currentImage++;
}
else
{
currentImage = 0;
}
showImage(currentImage);
}
private void button2_Click(object sender, EventArgs e)
{
if (iPicList.Images.Count - 1 >= currentImage)
{
if (currentImage == 0)
currentImage = iPicList.Images.Count-1;
else
currentImage--;
}
else
{
currentImage = iPicList.Images.Count;
}
showImage(currentImage);
}
private void pictureBox1_DoubleClick(object sender, EventArgs e)
{
MessageBox.Show("Picture Box Double clicked");
}
private void pictureBox1_Click(object sender, EventArgs e)
{
panel1.Refresh();
myGraphics.DrawRectangle(Pens.Black, 0, 0, iPicList.Images[currentImage].Width + 1, iPicList.Images[currentImage].Height + 1);
pictureBox1.Image = iPicList.Images[currentImage];
}
}
}
The changes you need are:
Change the Following folder to a place where you have lots of jpg:
DirectoryInfo dirImages = new DirectoryInfo("C:\\2012");
Also if you are dealing with other kind of images, make change here:
if (file.Extension == ".jpg") // Change it to your image type.
If you don't want to use the the buttons to go up and down, you have several other options to host PictureBox control in scrollable Panel or list or something else.

Categories