Situation:
I have a vertically orientated stack panel inside a ScrollViewer. The stack panel is configured to horizontally center-align its children. The scroll bar always appears at the right edge of the stack panel, which is what I want.
Then I fill the stack panel with children (user controls) of fixed widths, but all children are less wide than the stack panel. This leaves "empty space" to the left and right of the children. Visually, this does not matter, because background color is the same (which is nice).
But: In order to vertically scroll the stack panel using the mouse wheel, the mouse cursor seemingly must be positioned on top of one of the children. If the mouse cursor is positioned too much to the left or to the right (=over "empty space" in the stack panel) scrolling does not work!
Question:
How can I ensure that scrolling always works, no matter where I position the mouse cursor over the stack panel?
Martin.
Set a background on your StackPanel, any background will do. This was a known bug and this seems to fix the issue.
<StackPanel Background="White"/>
If this doesn't work, it might help to post your XAML code as it could be due to the way you have things wrapped.
Related
I am trying to do something a little bit specific, and I can't seem to find if it is even possible. So I thought I would lay down the question here.
What I'm looking for is a way to change the anchor point of the scrollviewer from the top to the bottom (however you look at it). I'll explain what I mean.
By default when the control contained in your scrollviewer gets taller, so will your vertical scrollbar scollableheight.
But what happens is, the vertical scrollbar will stay at the same scrolloffset from the top, while what I want is that the vertical scrollbar keeps it's position relative to the bottom. The reason I want this behaviour is because I am creating a list that the user can expand more of by scrolling to the top. but then when I add the new items it looks like the scrollviewer scrolls up to the newly added items. (although it is actually the content the is pushed down) So if the scrollviewer would have the vertical scrollbar anchored to the bottom, the visible part of the content would stays at the same position to the user because the distance from that part to the bottom didn't change.
I hope you can understand what I'm trying to do.
I allready found one way of doing this, but it is not the desired option to me.
Option 1) Apply a Scaletransform of -1 in the Y-axis to the scrollviewer to flip it upside down. Then apply another ScaleTransform of -1 in the Y-axis to the content of the scrollviewer to make the content right side up.
But the problem with this technique is that for one, when you scroll using your mousewheel the scrollviewer scrolls inverted as normal. And second, I'm using 2 scaletransformations just to change the behaviour of the scrollviewer, and not even for eye candy. So that seems a bit excessive to me.
Option 2) anyone?
I'm a newbie. Designing a form that can be resized, and I want my textboxes, labels and buttons to resize with the form, can someone tell me how to do this?
It depends on the type of layout you need. The "basic tools" you have to do that are following properties: Anchor and Dock.
Anchor
With the Anchor property you "attach" a side of an element to a side of its container. For example if you place a button in the bottom-right corner of a window and you set "Bottom, Right" as Anchor then when you'll resize the form the button will keep its relative position to that corner.
Now imagine you place a multiline text-box in the form, resize as needed (for example 4 px from top, left and right border and 128 px height) and set the Anchor property to "Left, Top, Right". When you'll resize the form that control will keep its height but it'll resize to keep its margins (so if you'll make the form wider its width will be increased).
Dock
Dock is different. With docking you "say" to the Layout Manager to use all available space in one direction. For example if you set to Left then your control will keep its width but it'll use all the available height and its location will be most left as possible.
You may have more than one control docked in a container, imagine you have 5 textbox with Top docking inside a form. They'll be stacked to the top of the form using all the width (and resizing). Another example: a Top docked control (as a banner) and a "Fill" docked control (as main content). Remember that with docking the order of controls matters (if you first place the "Fill" control it'll use ALL the available space and the "Top" dock control will overlap).
Even more
Moreover you have some layout controls too (tables and stacks). They're really easy to use and a 30 minutes of "experiments" will clarify much better than a long text.
Research
Currently when working with WPF/XAML, the default scrolling behaviour for the scroll bar is that the VerticalScrollBarVisibility = Visible and the HorizontalScrollBarVisibility = Auto. This means the vertical scroll bar is always visible while the horizontal scroll bar is only visible is the content extends outside the width of the allocated area. Note that while the scrollbar is Visible, if the content do not extend beyong their allocated space, the scroll is deactivated and do not take any user input.
You may change this by changing the values to Visible, Auto, Hidden, or Disabled:
<ScrollViewer VerticalScrollBarVisibility="Visible"
HorizontalScrollBarVisibility = "Auto">
...
</ScrollViewer>
Problem
The problem is if you resize the window of the application and make it smaller, the scroll bars do not react as it should. It seems to just get cut off at the edges as I make the window smaller and smaller. The horizontal scrollbar is never activated. I then made the horizontal scrollbar visible just to see what happens. But it never changes to its active form when I make the windows smaller.
Can I assume that the scrollbar only activates when the content of the allocated space becomes to large for the space and not when the space is reduced when resizing the application window? If so does anyone know a way around this?
Edit
So I was working with my code and I realize that the scroll bar for the main window works as it should when the window is resized but that is not what I want. My main application window consists of three dock panels. Each of these panels needs to have its own scrollbars. It seems that when i resize the main window, the main window's scrollbars activate as appropriate but not the individual section's scrollbars. What I want to do is disable the main windows scroll bar altogether and have only the individual section's scrollbar work.
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.
I am new to WPF and the ScrollViewer is frustrating me. Either I just don't "get" it, or it is a limited control.
Here are my Frustrations:
Bad Horizontal Scrolling The horizontal scroll bar is only visible at the bottom of the list (I have to scroll to the bottom to see it)
Bad Borders I have a ListBox in my ScrollViewer. When I start the bottom of the list has no border and when I scroll down, the top border (line) of the list box disappears. I can kind of understand this, but attempts to set BorderThickness or BorderBrush for the ScrollViewer result in no change (I wanted to use the ScrollViewer's border to keep a constatant box around the list contents, like most list boxes out in cyber world).
Bad Handling of Short Lists When the items in the list don't reach the bottom the ScrollViewer keeps the scroll bar there and just dithers it out. Why not free up some space and remove it?
Some of these may seem petty (and they are). But users expect a certain look and feel from their apps and WPF is making it hard to get this out of the box.
If you know a way to fix any of these I would love a response. If there is a better way to deal with scrolling than using the ScrollViewer that would aslo be welcome.
Maybe you see some scroll bar from inside the list rather than the scroll bar from the ScrollViewer? Try setting <ScrollViewer ... HorizontalScrollBarVisibility="Auto"> (default is Hidden, which means that no horizontal scroll bar is shown ever; also try "Visible" for the sake of debugging)
Is putting a <Border> around the ScrollViewer an option?
VerticalScrollBarVisibility has a default value of Visible. If you want the scroll bar to disappear when it is not necessary, try <ScrollViewer ... VerticalScrollBarVisibility="Auto">.