This question already has answers here:
Custom listbox with move fwd/bwd buttons
(3 answers)
Closed 3 years ago.
I have a horizontal stack panel that contains buttons.
I need to be able to scroll this either right or left to make the buttons rotate through the stack panel because there are more buttons than there is room on the screen.
Using a horizontal scroll bar is not an option because it ruins the look of the application and does not rotate all the way around in a circular fashion.
How can I either change the scroll bar to just have a right arrow on the right hand side and a left arrow on the left hand side to handle the scrolling and not completely rotate all the buttons. ie, works like a normal scroll bar but looks way better.
eg. << [Btn][Btn][Btn] >>
Or have a way or rotating the buttons in a circular fashion so the is no real start or end the the horizontal collection of buttons and some way for a user to move the position of the buttons they can see.
The container control does not to have to be a stack panel, that was just the best container for the buttons initially.
Xmal and styling would be my first choice, but there is no issue using code behind either.
Making your own custom scroll buttons is a issue?
If not, you can create a ItemsControl, in the style set the ItemsPanel to
<ItemsPanelTemplate x:Key="ItemsPanelStyle">
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
and in the ControlTemplate of the ItemsControl
<ScrollViewer
x:Name="PART_ScrollViewer"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
CanContentScroll="True"
>
<ItemsPresenter/>
</ScrollViewer>
your toolbar buttons will be the actual ItemsSource of this ItemsControl. If you create now a button in the template (scroll right, the scroll button you need), and on it's command you execute
ScrollViewer myViewer = GetTemplatedPart("PART_ScrollViewer");
if(myViewer != null)
{
myViewer.LineRight();
}
this should scroll each element to the right untill the end of your list of buttons (notice advantage: no matter what the width of the element is).
The same thing you can do to the left.
HTH, daniell
Related
This question already has answers here:
WPF: Canvas mouse events not firing on empty space
(2 answers)
WPF Grid not working properly for drag and drop
(1 answer)
Closed 11 months ago.
Summary
If a StackPanel does not have its Background property set in XAML, its hit detection fails (as tested by drag+drop). If the Background property is set to a color (such as Orange), then the hit detection succeeds (drag drop is detected). Why does the Background color determine whether hit detection succeeds?
Details
I have a StackPanel defined as shown in the following XAML:
<StackPanel Grid.RowSpan="2"
Drop="ToolsSidePanel_Drop"
DragEnter="ToolsSidePanel_DragEnter"
AllowDrop="True"
VerticalAlignment="Stretch"
>
...
In my project I have additional controls, but I have reduced the XAML to what I believe is necessary to reproduce the problem. The StackPanel appears as shown in the following image.
I have added the red rectangle around the StackPanel to help identify it in the image.
If I run my application, the StackPanel only receives the Drop event when the cursor is over elements in the StackPanel (the two buttons which are part of the StackPanel in the image). If I attempt to drag+drop onto the body of the StackPanel, the Drop is not raised, and the 🚫 icon is shown.
I thought that perhaps my StackPanel was not correctly sized, so I set the color to orange by modifying my XAML as shown in the following snippet:
<StackPanel Grid.RowSpan="2"
Drop="ToolsSidePanel_Drop"
DragEnter="ToolsSidePanel_DragEnter"
AllowDrop="True"
VerticalAlignment="Stretch"
Background="Orange"
>
...
The orange background confirms that the StackPanel is correctly sized (fills the entire area vertically), but strangely enough it also enables correct hit detection - dropping is now working correctly.
How can I make the StackPanel receive Drop events without changing its Background?
In my xaml, I have some object made by me. I put them in row and, if the window is too little for all, I go in a new line.
The problem is when the window is so little that, also in a new line, the elements can't be all shown. The solution is simple: scroll bar!! But, if I set the Vertical/HorizontalScrollBarVisibility to auto, it doesn't go to a newline anymore.
This is my xaml:
<ScrollViewer CanContentScroll="True" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Disabled" >
<ItemsControl Name="ItemGroups" ItemsSource="{Binding NotifyItemUI}" />
</ScrollViewer>
and this is a screenshot what I need as my goal:
For example, if I resize my area vertically, and I have 3 rows of objects, in this way I can't see the third row if the window becames too little. In this case, I'd like to see a vertical scrollbar to scroll it.
Same thing horizontally: if I have too many elements for one single row, I have to scroll it horizontally.
What you describe looks like a WrapPanel, but the way you write about it suggests it is a custom control, so we cannot see what your ItemsControl is doing for layout.
However, ScrollViewer can have tricky interaction with a Panel. If the Panel measures to infinity, it will always consider itself big enough, and never tell the ScrollViewer it is out of room. The result is that the ScrollViewerdoes no know the scrollbar is needed. If this is your problem, then setting the Width and Height properties, or maxima as #Sheridan said, ought to fix it.
How can i make a control to be sticky? I have a scrollviewer and inside that a grid. Inside grid i have a button. The button is set to horizontal alignment - center and vertical alignment - bottom. Now, when the size of the grid increases the button is no more visible on the screen. I have to scroll to really see the button. Can i make the button to be sticky so that it is always there at the bottom of the screen?
Thanks in advance :)
Anything you put inside the scollviewer will be part of the scrollable content. You can either remove that control and put it outside the scrollviewer, or put inside a floating popup control.
Remove the button from inside the ScrollViewer:
<Grid>
<ScrollViewer>
//Content
</ScrollViewer>
<Button HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Grid>
I'm running into a dilemma. When I make the ScrollViewer the main content object of my window, scrolling behaves exactly like I want it to. You resize to make it smaller than the content and the window and scroll bars appear. The problem comes in when I want the to menu to be static and the rest of content to be scrollable. I want the scroll bars to behave the same way as a browser window does, meaning when you resize it, the scroll bars appear based on the size of the content. When you expand the window, the content takes up the entire real estate of the window. Is that possible in WPF?
Help would be GREATLY appreciated.
Make a DockPanel the main content object of your window. Insert your top menu as the first child (with DockPanel.Dock="Top") and the ScrollViewer (containing the rest of the window's content) as the second child. In a DockPanel, the last child takes up all the remaining space, which should be what you want.
<Window ...>
<DockPanel>
<MyMenu DockPanel.Dock="Top" ... />
<ScrollViewer>
....
</ScrollViewer>
</DockPanel>
</Window>
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">.