I would like to create a drop down panel that when you collapse it, it will close only half and when you expand, it will expand and show the other items as shown in below image.
I already tried to use SplitConatainer and by hide the panel manage my work but my problem is when I collapse it the other items not rearrange. please refer to below image.
button code:
if (splitContainer1.Panel2Collapsed)
splitContainer1.Panel2Collapsed = false;
else
splitContainer1.Panel2Collapsed = true;
Also I tried to set size of panel but it is not rendering and effecting.
would you mind help me in introducing some previous work that have ability of customization. Or help me to start create such component please?
I solve my problem by add a parameter to project "ExpandCollapsePanel" in GitHub.
So Just by adding a value to MaximumCollapseHeight, you can control panel.
you can get the source code from here.
enter link description here
Related
I'm reading a Windows Forms book and I came to one example which is pretty confusing to me.
Here are two pictures, the first is the initial state, and the second is when the user click the Hide button.
This form contains two split containers, one horizontal, and one vertical, which is in the right panel of horizontal one.
The book says:
One of the best characteristics of docked designs is that they easily accommodate hidden
or modified controls. To implement
this design, two panels are placed in the left region of the
SplitContainer, one named pnlFileList and the other named pnlShow.
However, only one of these panels is shown at a time. The contents of
the rest of the window automatically resize themselves to accommodate
the additional view when it is displayed
private void cmdHide_Click(object sender, System.EventArgs e)
{
splitContainer1.Panel1Collapsed = true;
pnlShow.Visible = true;
}
private void cmdShow_Click(object sender, System.EventArgs e)
{
pnlShow.Visible = false;
splitContainer1.Panel1Collapsed = false;
}
And I made it, but the problem is with the button which appears when the left panel of the SplitContainer is collapsed.
I don't know where to put the panel "pnlShow"
If I put it on the right side of the horizontal SplitContainer control, it will disappear also.
Any suggestions?
The quote from the book doesn't seem accurate to me. You can't place pnlShow inside the "left region" of the SplitContainer because it will not be visible once you set the Panel1Collapsed property to true.
Instead, you can place the pnlShow on the left to the SplitContainer and set its Dock property to Left. Also, you don't seem to actually need a Panel in this case since it only contains one Button. You can simply use a Button only. Anyhow, your form would look something like this in design-time:
Then, your code should work fine.
Some remarks:
Of course, if you decided to use a button without a panel, you'd need to use YourButtonName.Visible instead of pnlShow.Visible.
If you found that the button (panel) on the left covers the SplitContainer, you just need to right-click on the SplitContainer and select "Bring to front".
It's preferred to use "btn" as a prefix for the Button name instead of "cmd". The latter was kind of widely used in the classic visual basic language, because it used to be called CommandButton. In the .NET world, the standard is to use "btn" instead.
Finally, based on what I mentioned in the last point above and the look of the screenshots in your question, this book seems to be quite outdated and was written based on the early versions of the .NET framework, so unless you have to study this book specifically, I would recommend you find a more recent book or tutorials.
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!
I have the following Code:
marathonPanel.Visible = false;
resultPanel.Visible = true;
but only the marathonPanel gets invisible and the resultPanel stays invisible.
When I check the value of resultPanel.Visible it is set to false.
I also tried
resultPanel.BringToFront();<br>
resultPanel.Visible = true;
Can anyone help me?
This happens when you design two overlapping panels in Visual Studio Form Designer. It is too easy to drag one panel inside the other and the dragged one becomes the child of the first.
I usually draw the panels in different locations. The first one in the expected place, the second one in a different place, then at Runtime move the second one on the same spot of the first one.
in Form_Load
resultPanel.Left = marathonPanel.Left;
resultPanel.Top = marathonPanel.Top;
This is a common designer accident, caused by Panel being a container control. Overlapping two panels is a problem. Your resultPanel will end up as a child of marathonPanel. So when you make marathonPanel invisible, the child will always be invisible as well.
Use View + (Other Windows) + Document Outline to fix the problem. Drag resultPanel and drop it on the form. Edit the Location property by hand, don't move the control with the mouse or the panel will suck it right back in.
Another way to do it is to intentionally mis-place it so it won't be sucked-up and fix the Location property in the form constructor. A more friendly hack that works better in the designer is to use a TabControl instead. Check the sample StackPanel in this answer.
There is another way to find out such issues .
if you look at *.resx file , it will tell which control is taking place as parent and which is child
Also you can view this thing in Document outline which is available in Visual Studio.
Let's just say that I have many controls on my Form, and when a User clicks on one of them, its height will expand. This means that, currently, when this clicked-control expands, other controls below it will become overlapped by the expanded control.
But what I want to happen, is for each Control below the expanded control to slide down, so that they are below the expanded control again.
I know how to handle sliding, but I just don't know how to make every control except for one move everytime a given control is moved.
Any help at all is greatly appreciated, thank you!
This is what I was thinking:
void newOrderReceived(object sender, EventArgs e)
{
foreach(Control OrderNotificationBox in OrdersPanel.Controls)
{
if(OrderNotificationBox is NotificationBox) // Checks to see if the control is a NotificationBox
{
// Add my code to slide controls down.
}
}
}
But... How do I know if the control is below the expanded control?
Is this how I should go about changing the location of all controls below the expanded control?
Edit: Just had a thought, to check to see if a NotificationBox is below the Expanded NotificationBox, see revised code below:
void newOrderReceived(object sender, EventArgs e)
{
foreach(Control OrderNotificationBox in OrdersPanel.Controls)
{
if(OrderNotificationBox is NotificationBox) // Checks to see if the control is a NotificationBox
{
if(OrderNotificationBox.Location.Y <= ExpandedNotificationBox.Location.Y + ExpandedNotificationBox.Size.Width)
{
// Add my code to slide controls down.
}
}
}
}
But would this be sufficient? Currently, this is working, so I guess I just answered my own question. But, isn't there a better way to do this? A more elegant/efficient way?
Here's a sample of how it should look:
FlowLayoutPanel provides you with dynamic layout where you can resize any control in it and all below controls will slide automatically. There are many strategies to using groups/columns of flow layout panels to be able to achieve the desired look for the whole form. Some googling will reveal some of these.
For instance in the form above, resizing the button1 control simply flows all the below controls to further down on the form. You can try that at the design time also. Drop the form a flow layout panel, drop 3-4 control in the container and start experimenting..
For each expandable content use Panel.
Dock your panels one under another (Use panel1.Dock = DockStyle.Top. For the very bottom panel use panel1.Dock = DockStyle.Fill).
Place your child controls inside of each expandable panel, set inner controls' Anchor properties accordingly.
When you expand one panel, the rest of the panels will adjust automatically. You don't need to code for this. You will only change Height of a panel that you currently expand.
What you need is some kind of 'ExplorerBar' functionality. There are several control libraries that offer that, and I found the article here on the CodeProject that has it for free.
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