Did anyone ever try to create a jQuery "LightBox"-Like "Popup" (WPF UserControl) for displaying Images?
See this page for an example: http://www.huddletogether.com/projects/lightbox2/
Thanks!
Here is a site that appears to have done it, but it is only version 0.5 and might change dramatically before 1.0:
http://leandrovieira.com/projects/jquery/lightbox/#
This should be what you're looking for, and here is a sample of their code to implement:
$(function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
I hope this helps,
Thanks!
EDIT:
Sorry that I didn't fully understand what you ment in version one of your question. Here is an updated answer (with code / source) to your question.
First I created a control that will act as a modal dialog box that grays everything out in the background. Then I added the ability to put a picture in there, with added ability to have a comment with each picture. Here are images of the final product:
First Image Loaded:
First Image Loaded http://img682.imageshack.us/img682/8941/firstpictureopen.jpg
Second Image Fading In:
Second Image Fading In http://img5.imageshack.us/img5/3172/secondpicturefading.jpg
Second Image Loaded:
Second Image Loaded http://img682.imageshack.us/img682/5404/secondpictureopen.jpg
I also added animations to resize the images like the Lightbox project does. I added the ability to have a forward and back buttons, accelerator keys, forward and back arrow control, and escape to exit. I think I've captured what you're looking for in this control.
As usual, I've uploaded the full source code to Google Code for your download.
The direct link to the zip file is here:
http://stackoverflow-answers-by-scott.googlecode.com/files/1755872.zip
I hope this helps,
Thanks!
Duplicating the functionality you linked to is absolutely trivial in WPF. Just:
Create a UserControl with a single ItemList property of type IEnumerable<ImageSource>
Add a Popup to the UserControl
Add a Grid to the Popup that lays out the LightBox the way you want, including panels for the Image, TextBlock, and Button
Add a StoryBoard that is triggered by the Loaded event that animates the changes.
Use an EventTrigger to set the Popup's IsOpen property to false when the button is clicked
Bind the Image.Source to {Binding ItemList/} to show the current item in the ItemList
Add a Background="Transparent" rectangle to each side of the Grid that runs code-behind to change the current item in ItemList
Optionally also repeat the BeginStoryboard when changing the current item
Related
I want to create simple wizard with 3 pages
Page 1 have just next button
Page 2 have next and previous
Page 3 have previous and finish
I have created the pages and add to them needed buttons and in the events I have call to the next pages, for instance in page one in the button click I added the following code
private void Button_Click(object sender, RoutedEventArgs e)
{
p2 = new Page2();
NavigationService.Navigate(p2);
}
In the main window cs I have changed the inheritance to NavigationWindow instead of Window and in the xaml also. Currently its working but I have 3 questions.
The pages which displayed is part of the main window, how can i avoid it, since when I run it the buttons place is not like I put in the designer? It was changed.
The button currently in the Grid, should I put them in different control (the button place should be like any wizard in the left buttom of the page) ?
How can I avoid the navigation arrows in the page right upper screen?
Thanks!
To answer your questsions in reverse,
3. How can I avoid the navigation arrows in the page upper right screen?
I have an opensource library http://winchrome.codeplex.com/ that re-styles navigation windows in several ways. For example these are all NavigationWindow s
In short you just style the NavigationWindow to only show the parts you want.
2.The button currently in the Grid, should I put them in different control (the button place should be like any wizard in the left buttom of the page) ?
If you look at the styles from WinChrome then you will see that it is just a case of rebuiliding the UI as you want and providing a ContentPresenter to hold your pages. e.g. the VS2012 style applies lots of styles on the window but avoids adding back and forward buttons., whereas the Win7 style rebuilds the back and forwards in a Win7 Style.
If you do this however you will need a means of passing your enabled or visible states to the buttons outside the pages. Take a look at http://www.codeproject.com/Articles/8197/Designer-centric-Wizard-control for how to do this in Winforms. In WPF you could either derive from your Pages to create WizardPage classes with CanBack, CanNext or IsFinish properties, or alteratively define attached properties to do the same (There are examples of how to do this in VS2012.cs where we define the glow color)
And finally
1. The pages which displayed is part of the main window, how can i avoid it, since when I run it the buttons place is not like I put in the designer? It was changed.
I'd need to see some code to comment on how you've done it, but if you look at any of the demo programs in WinChrome then you can see how I've done it without problems.
Good luck!
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.
I need to show and hide various buttons that are all on the ribbonbar in designer.
Depending on what the user has selected on the form at the time depends on what i want to show/hide.
I cannot figure out how to get the ribbon to refresh properly, showing both the new button (without scrolling mouse over the new button) and resizing (width ways) to allow the new button to fit properly.
i have looked all over the web for other questions that answer this, and asked devcomponents forums, (still waiting on response from that)
I have figured out what works for this.
ribbon.Refresh()
'refresh size of ribbonPanel1, barlayout for the show/hide of miRoom
RibbonPanel1.PerformLayout()
ribbon.PerformLayout()
my button was within RibbonPanel1, and this was shown by a tabItem on the ribbon, the RibbonPanel1 was also on the ribbon (as otherwise it wont show)
Here is the KB article which covers working from code and other details: http://www.devcomponents.com/kb2/?p=472
I want to preface this by saying I'm a noob with WPF/.net programming.
Here is my question that requires a bit of guidance. I have a window and I load pages in and out as my navigation. On one particular page, when the user clicks on one of the items (button for example), I need to display a small form to gather more information. I'm not sure what the best approach is... what I would love (but do not know where to begin even searching for this solution) would be to open a popup balloon style window with a few textboxes and a submit button.
Other options I've explored would be to use a separate page. Save off the current page and load a new page with these textboxes and a submit button. Or to use a custom messagebox instead (least favorite option).
I would like this new extra info page to blend in with rest of the app so that the main page is still visible in the background. Any suggestions??
You can use WPF's Popup control
<Popup>
<!-- Your Content Here -->
</Popup>
Personally I have issues with WPF's Popup, so have my own custom UserControl that works like a Popup.
I ended up using modal window (ShowDialog) method for this.
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;