I'm trying to create a gallery-style layout with a ScrollViewer and a WrapPanel in WPF, but the WrapPanel is extending beyond the boundaries of the ScrollViewer. I've tried setting the HorizontalAlignment and VerticalAlignment properties of the WrapPanel to "Left" and "Top" respectively, but it still doesn't stay within the boundaries of the ScrollViewer.
I've also tried setting the height of the WrapPanel to specific values and set the MaxHeight properties of the WrapPanel to limit the size, but it still doesn't stay within the boundaries of the ScrollViewer, and is no longer scrollable. I've also tried wrapping the WrapPanel inside a Grid and set the height of the Grid to the size I want and set the ClipToBounds property of the Grid as "True", but it still doesn't work.
I'm not sure what else I can do to keep the WrapPanel within the boundaries of the ScrollViewer. Can anyone help me figure out how to contain the WrapPanel within the ScrollViewer?
This is my xaml code:
<ScrollViewer Grid.Row="0">
<WrapPanel x:Name="Preview_WrapPanel"></WrapPanel>
</ScrollViewer>
and this is my result in my app, in the beginning, the distance from top is correct but the bottom not. I scrolled a little up to show that the height is not respected in the top region as well:
the width is respected, but i think only because this is the application width.
The thick red border is the area, which the scrollviewer occupies. The wrappanel should be contained inside, kind of like a window, where you can only see whats behind the window and not the trees behind the wall.
the wrappanel gets filled with WebView2 Media, each image around 200x200px:
WebView2 media = new WebView2();
media.Source = new Uri(nftFile.FullName);
media.Width = 200;
media.Height = 200;
this.Preview_WrapPanel.Children.Add(media);
I use Webview2 because the content could pretty much be anything, image, video, pdf, whatever. Also it supports webp
For now though, im only adding images.
There was a known bug with webview2 and it seems it has not been fixed.
Basically, renders on top so cannot be clipped.
https://github.com/MicrosoftEdge/WebView2Feedback/issues/2579
https://github.com/MicrosoftEdge/WebView2Feedback/issues/286
You need a different plan.
Maybe ensure it doesn't matter when they don't clip.
Maybe use images.
Or hope it gets fixed soon.
Andy was correct, this is a known issue. Microsoft knows about it since .net framework Times (>10 years) but refuses to fix the issue so far.
I solved the issue by Installing the Nuget Package CefSharp which uses the chromium engine as well.
What a pitty.
Related
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.
In the Windows Forms world you can take a panel and set it's dock property to fill and so on with nested panels, when the user resizes the window the panels and nested panels automatically resize too. I want to achive something similar with Silverlight, here is my current structure.
Main
ScrollViewer // for body
UserControl
Grid
control
Scrollviewer // this is where my problem is
Control
The problem is I can set a size for the nested scroll viewer that looks good for 1024 resolution, but I also want to account for users that have larger resolution. If I leave it auto the content just stretches below the visible bottom line and defers to the top level ScrollViewer.
If I could achieve something analogous to how Windows Forms handles this with docking I think my problem would be solved. I must have a ScrollViewer for the nested panel and I want it to fill all visible space left. How Can I achieve this with SL4 or WPF?
[Edit]
Here is an illustration of what i'm after.
The top-level ScrollViewer allows its content to be as large as it needs to be, and adds scrollbars if that means they don't fit in the window. Its children no longer know or care how tall the window is; they just know that they've got as much space as they want.
So what is it that you want from your nested ScrollViewer? It's got all the space it needs, so it will grow to show all of its content -- there's nothing to restrict it to the height of the window. In fact, you added a top-level ScrollViewer, which specifically told it "don't restrict it to the height of the window".
If you want your inner ScrollViewer to be restricted to the window height, then take out the top-level ScrollViewer.
Hey folks, I'm hoping I have a fairly simple problem that can be fixed easily as it seems like I'm just missing something basic from the WPF world. I have a scrollviewer wrapping a stackpanel which contains several images, these images have animations to increasing in size when the mouse passes over them. All works fine without the scrollviewer, now I've added the scrollviewer, the animation works but only inside the scrollviewer; the increasing size isn't being allowed to overlap the scrollviewer.
Is there a way to fix this?
Thanks,
Becky
It's the way ScrollViewer works. Basically it always clips to bounds even if you set ClipToBounds="False" on it.
To make it work and continue using ScrollViewer you'll have to animate images on top of it, not inside.
I have been working on an app with a datagrid from the wpf toolkit and the width was not specified in the xaml (default to auto), and it was working fine. It would extend the window width as I resized the window. However, all the sudden the "auto" width is massive and I don't know why. When I pull the xaml file up in blend it shows auto width is 50002 pixels. I barely touched anything else in my xaml since it happened. Anyone know why it is doing this and where that number came from? Thanks
The most common cause for this that I've seen is when the control is inside a StackPanel with Orientation=Horizontal. StackPanels don't constrain their controls in the stacking direction so if nothing else constrains the control it grows to some maximum size.
If this is the issue try replacing your StackPanel with an equivalent DockPanel or Grid.
If you were doing any manual resizing using the Visual Studio IDE then perhaps this could have happened or you could have accidently typed in the wrong size of 50002. Removing the widths and setting to auto should fix the issue.
Been checking the web and this site, but couldn't come up with any descent results.
Is there a way to make a canvas in WPF show scrollbars on overflow ? Been trying the scrollviewer, but can't get it to work :(
Thanks in advance..
The problem you're running into is that Canvas, unlike many WPF panels and containers, does not size to contents. That means if you add an element which goes outside the canvas boundaries it will not update it's size. Hence embedding a Canvas in a ScrollViewer will do no good unless you manually update the size of the Canvas.
It sounds like what you want is a Canvas which supports size to contents. This blog entry has exactly that control.
http://themechanicalbride.blogspot.com/2008/11/auto-sizing-canvas-for-silverlight-and.html
I took a different approach and abandoned the Canvas for Grid. The Canvas is more performant but for my purposes at least I haven't noticed a difference. The grid can mimic the behavior of canvas by doing the following.
Create a single row,single column grid.
Set the HorizontalAlignment to Left
Set the VerticalAlignment to Top
Use Margin "x,y,0,0" to set the position.
Bam..works just like canvas and it works great in a Scrollviewer.