Unwanted clipping in WrapPanel - wpf

I need to create a ListBox with the WrapPanel ItemsTemplate.
My item is displayed as a card with small top "toolbar" that is displaying dynamically on mouse over.
[ dyn. toolbar ]
[ card ]
Everything is running well except the first line.
I need to have cards very close each other. Hence the Height of the item is set to height of the card without toolbar height. Toolbar is created with Margin.Top < 0.
The problem is that toolbar is clipped by the listbox.
Do you know any techniques on how to solve this situation?
Thanks to all!

I'm not sure I fully understand your question, but if you're displaying the toolbar above the card using a negative top margin, couldn't you compensate for this by dynamically setting a positive margin on the card whenever the toolbar is shown?

Xaml would be helpful. One rule of thumb I've found is to never set the actual height or width properties of a control. Try taking out the height property and that should get rid of the clipping. You should be able to get any spacing you need figured out with Margin, Padding, or MinHeight.

Related

silverlight scrollviewer height and width setup

I am having problem understanding the scrollviewer in silverlight webpage. There are the usercontrol and grid "layoutRoot". My scrollviewer is set before the "Layoutroot" grid. It never worked properly. Even though I have other items at the bottom of the page, I could not scroll to them and could not see them. I have been playing with UserControl MinHeight, DesignHeight and minHeight of both LayoutRoot and Scrollviwer. Just have a hard time figuring out what is the best way to set it up.....
You need to remove min height and max heigh from all of the control because Silverlight takes care of all those things. What you need is to set VerticalScrollBarVisiblity to auto. By default it is disabled and you will be able to achieve what you want.
Cheers!
Vinod
If the MinHeight properties are set too large then it will not be viewable on the screen and will be cut off. If you remove the MinHeight properties on both the UserControl and ScrollViewer then it should work fine.
Or if that doesn't work post your code so we can have a look.

Layers issue using Z-Index

I've 2 controls one on top of another: border over slider. on border user can mark a segment to appear in different color on slider.
Because the border is written after slider in xaml, it appear on top of the slider. and that's ok.
My problem is, the Thumb of slider also appears under the border.
How can I set the Thumb element (belong to slider control and inside it) to appear on top of all, and also the border will appear on top of the slider?
I tried use zIndex but without success. Any idea?
In CSS:
Make sure your elements are positioned absolutely or relatively. z-index doesn't really have a play in layering unless the elements are positioned absolutely or relatively. You should then be able to set one with:
z-index: 1;
and the other with:
z-index: 2;
and get the desired result.
In WPF:
Use the syntax specified here
Here's an example:
Make sure both of your elements are in the same parent, otherwise they will be displayed in the order in which they were loaded.

.NET Tab Contol. Not scroling when chield control have a min size and anchor right

I have a simple dialog with tab control whit property Dock = Fill. On the tab page I add another control and set its properties Anchor as 'Left, Top, Right' and min size as '600,300' for example. I set the property of tab page AutoScrolling to true.
But when I resize the dialog the horizontal scrolling of the tab page doesn't work when the dialog width is smaller than min width of the chield control.
Why horizontal scrolling doesn't work in this case? Is it bug or maybe feature?
Thanks a lot!
I can't even get the scrollbar to show up. Right/bottom anchors don't work well when auto-sizing layout. Set the AutoScrollMinSize property to an appropriate value, that also ensures you've got enough margin to the right of the button.
It's because of the Anchor. You anchored it on the left and right which means that it will have no minimum width, its width is determined by its container's size.
What is the effect you're trying to achive?

How to calculate a bounding box for an Expander?

I have an Expander control and i need to calculate its bounds without invisible elements and margins. It commonly can be done by VisualTreeHelper.GetDescendantsBounds. But it seems that the rect is calculated by VisualTreeHelper doesn't depend on the expander state. For example:
http://i.piccy.info/i5/58/39/273958/collapsed.jpg
(i can't post images. sorry)
The same result as for expanded state (light green rectangle on the image). Does anybody know how to solve this problem?
The Expander control will set its content's visibility to Collapsed, which means it won't be considered during layout and won't be included in GetDescendantBounds. However, the Expander can be forced to have a larger size by the layout engine, and the Expander's own size is included in GetDescendantBounds.
Try setting VerticalAlignment="Top" on the Expander. The default is Stretch, which will allow it to increase in size if the parent has more space available. Also make sure you aren't explicitly setting the Height property.
This is the sample application. The style is applied here to the TreeView control and its items. But the problem doesn't depend on the style.

Panel with percentage coordinates

I would like use a panel whose children have coordinates specified as percentage of total panel's width/height. Moreover, I should be able to animate the coordinate property, for example to make a button move from 10% to 50% panel's width.
I've made 2 attempts:
Use a Grid and specify size as stars - this was not enough, because AFAIK by default WPF cannot animate distance properties specified by stars. I've found somewhere a custom class that enabled me to do so, it even worked, hovewer I consider that solution overly complicated an I am looking for something simpler.
Use a Canvas with fixed width and height and put it inside a Viewbox - this is a simple solution, but when resizing the Viewbox the whole content of Canvas is resized too. I want the content to have fixed size.
Is there a simple solution or should I implement my own panel (or maybe extend one of the existing ones, i.e. Canvas)?
Cheers!
I would:
subclass Canvas, perhaps calling it RelativeCanvas or RatioCanvas
add two attached properties: XRatio and YRatio
override ArrangeOverride and loop over all children. For each child, use their XRatio and YRatio along with the ActualWidth and ActualHeight of the RelativeCanvas to calculate and apply values for their Canvas.Left and Canvas.Top attached properties
You would use it as follows:
<local:RelativeCanvas>
<!-- the top-left of this button will be center of panel -->
<Button local:RelativeCanvas.XRatio="50" local:RelativeCanvas.YRatio="50"/>
</local:RelativeCanvas>
One thing you might like to add after you get that working is control over alignment. For example, I might to align the center of a control to the specified ratio, not its top-left corner.
There's one here: WPF Proportional Panel

Resources