I've inherited a silverlight app that now needs extending. The app sits on a map and originally had 1 text block item and a single accordion control of options. This has been extended so that the text block becomes an accordion item and further accordion item has been added with 2 sets of controls.
So my plan started along the lines of
<accordionMain>
<accordionMainItem1>
<accordion1>
<accordion1Item>
<controls>
</accordion1Item>
<accordion1Item2>
<controls>
</accordion1Item2>
</accordion1>
<accordionMainItem1>
<accordionMainItem2>
<accordion2>
<accordion2Item>
<controls>
</accordion2Item>
<accordion2Item2>
<controls>
</accordion2Item2>
</accordion2>
<accordionMainItem2>
</accordionMain>
This would hopefully give me the structure that I needed to add controls to.
Being new to Silverlight but having done a bit of XAML I made some progress but have hit a problem.
The StackPanel and Canvas that the whole thing sits on does not resize automatically as I would like. I'm unsure how to go about this but have tried Height="Auto" with no luck. What I would like would be when the 2nd accordion is expanded the panel and border underneath auto size as needed.
I have attached the full XAML here
Personally, I avoid the StackPanel for non-trivial layout of controls. I find a Grid is much more flexible when it comes to filling available space and resizing, which is normally what I want when designing an interface that will grow and shrink.
So my first step with your example would be to define a couple of rows for your grid, and place your expanding elements into a row each. Looking back at your example I see there is actually only one expanding thing: the AccordianMain, so make sure that is in a Row where Height="Auto".
What are you using the Canvas for incidentally? And why is the Grid that contains the accordians on the Canvas, and the only item in the StackPanel the Canvas?
Try and simplify your layout, I don't see why your inner Grid can't be directly placed into your Border and so can't see what the StackPanel or Canvas are bringing to the party. But maybe I'm missing something.
Related
With a grid, i can say that i want one element to take up 3/4 of the page and one to take up 1/3 of the page by using width = "3*" and width = "1*"
Is it possible to do the same with Stackpanels? Or is the only way to do it by placing the stackpanels inside a grid?
In the .NET Framework, there are a number of different Panel classes. Some of them like the Grid and DockPanel provide resizing capabilities that resize the Panel children, while others don't. Generally, the ones that provide this functionality have a cost in terms of CPU and/or RAM.
Therefore, when requiring a Panel for simple layout purposes, these Panel types should be avoided and a simple StackPanel should be used instead. Other times, we require this extra functionality and so we should use one of these more expensive Panels.
Please see the Panels Overview page on MSDN for a much fuller description of the .NET Panels.
So, to actually answer your question(s), no, a StackPanel cannot use similar sizing capabilities as the Grid and you can't do what you want even if you place StackPanels inside a Grid because although the Grid's cells may change size when the parent is resized, the StackPanels contained within will not.
I am trying to write a XAML UI in WPF where the main window container (a panel) would host children.
The tricky part is I want the children to resize when the window resizes (e.g. when it's being maximized on a screen) and I want them to occupy the maximum of the available space without stretching.
But at the same time I would like them to be allowed to wrap like a wrap panel when possible.
I have designed a quick mockup for easier understanding.
Image mockup on Imgur (25.2KB)
The top one shows a panel hosting 3 elements which all share the same width and the same height. Two are on the first line, the third one takes advantage of the 2nd line to display.
If all were displayed on the first line, they would be of a smaller width.
The bottom one shows a panel hosting 8 elements which all share the same width and the same height (smaller than in the first mockup so they can fit in one screen). The first two lines have 3 elements each while the last line has only 2.
My initial idea was to use a Stackpanel but they strech your child elements and, as far as I know, they don't allow dynamic sizing of their children depending on the number of elements.
Then I had a look at the wrappanel which does the wrapping very nicely but requires you to set the children size in order to do its magic (I might have missed something but I couldn't find a way around it).
Do you have any idea how I could implement this behaviour while keeping my pannel flexible?
The application which is going to use it will have a different number of children to put in the panel depending on the user's settings.
Ah, I forgot to mention that there should obviously be no vertical scrolling, everything should fit on one screen like a dashboard. That's the point of this panel, make sure that everything fits but displays as big as possible, with no distortion.
If you have any question, just ask.
Thank you for your help.
I understand that the Semantic Zoom control is basically implemented in XAML this way:
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
</SemanticZoom>
What I'm confused about is, assuming I have a "start" or "main" page with six Gridviews on it, each of which will display individually when "zoomed in" to see their details, do I need a single Semantic Zoom to handle the entire collection of GridViews, or do I need a Semantic Zoom control for each GridView?
And if I only need one Semantic Zoom control to handle all of these (the Zoomed Out View will, indeed, be the same for all of them, by definition), how do I make the Zoomed In/detail view specific to the GridView selected?
IOW, if I have six GridViews with information for:
Green Bay Packers
Milwaukee Bucks
Baltimore Orioles
Rory Gallagher
Mark Twain
Abraham Lincoln
...how do I see to it that when the Zoomed In/detail view is activated, and the user "pinched out" on the "Mark Twain" grid, that the Mark Twain-specific page is displayed?
I believe you just need one Semantic Zoom control. But instead of having six different gridviews, can't you just have one bound to a grouped collection? And then your GridView can use an ItemTemplateSelector to display your different data types.
See here for itemtemplateselector: http://blogs.u2u.be/diederik/post/2012/05/22/Using-Dynamic-XAML-in-Windows-8-Metro.aspx
I can provide some code if needed.
And regarding making sure the correct GridView is selected, the semantic zoom control handles that for you.
Semantic zoom works best with a GridView bound to a grouped collection source. The zoomed in and zoomed out views only support a GridView or ListView as their child element, so if you have 6 groups, you can achieve that with a single grid view.
In terms of the zoomed out view, the same type of control can be used to represent the groups. This view can be customised to show the information that you need - e.g. The number of books in a section or maybe an overview of the section.
Handling the transition from the zoomed out view to zoomed in is easy enough, if a little convoluted in terms of setting up the binding (IIRC you need to specify the zoomed out binding in code) but moving in the other direction is not guaranteed to behave as you want it to. If the zoomed out view is only one screen wide, for example, then it doesn't make sense to try to scroll to the previously selected group.
I am not in front of my dev machine right now so I'm afraid I can't put a sample together for you, but there are lots of examples online.
I'm a bit new to the C#-form app developing and I want know, what's the best way around at making a control that holds a list of horizontal items. In which each of these items are horizontally ruled to it's parent control, contain a thumbnail to the left and a large text block to the right of image and a smaller text block underneath that. So basically this isn't a predefined control I can find in the toolbox. Any ideas?
You could lay this out with Panels in form controls, or with WrapPanel and StackPanel in WPF.
In WindowsForms, I would create a user control that held the correct layout for a single item, then make a list of them at run time.
In WPF I would use a List control, but set the layout template to use WrapPanels and StackPanels.
WPf is the better solution long term if you don't have to coexist with winforms
I am fairy new to Silverlight and I have a problem.
I have a grid on a page that is resizable when the user resizes their browser window.
In one of the grids columns I want to display dynamically added content that is scrollable, as there is more data than space available. I currently have a scrollViewer with a stack panel inside it, that i programmatically add a user control to and then several user controls to that control depending on the amount of content.
My problem is this. The scrollViewer does not respect the available space and as such displays its content outside of the viewable area when there is more data than space. i.e. it does not uses it is not scrollable nature.
Hopefully this is something simple that I have missed, but i am banging my head against the wall at the moment. Any help gratefully received.
With seeing the xaml, my guess is that the problem may be with the StackPanel. StackPanels don't display scrollbars when their content is too large. I would suggest adding your UserControl directly inside of your ScrollViewer. If your ScrollViewer needs to have multiple children, I would suggest using a different type of container such as a Grid or a ListBox.