I have a simple scrollviewer setup in my wpf application. Everything works fine, Now I want my scrollviewer's content should use the space of my the scollbar as well, As my scrollbar is transparent it could easily display the content.
Just like the scrollbars in facebook. Attached is the image of the output. Green Section is the content and red section is scollviewer's area.
I am using WrapPanel in my scrollviewer, this is the code snippet
<ScrollViewer x:Name="ScrollViewer1"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden">
<WrapPanel x:Name="WrapPanel1" SizeChanged="WrapPanel1_SizeChanged" />
</ScrollViewer>
You have to edit the ScrollViewer's ControlTemplate which should look like the one in this page : http://msdn.microsoft.com/en-us/library/aa970847(v=vs.110).aspx
In the ScrollViewer Control Template Example, you can see that the ScrollContentPresenter is inside a Border which is inside the first row of a 2-rows Grid.
Setting the RowSpan to 2 for this Border would achieve the effect you want.
Related
I am using a border object in xaml with a large border thickness. However need a way to prevent the contents of the border from shrinking when i increase the border thickness, I just want them to draw over it if they are near enough to the edge. Any ideas?
Don't place your content inside the border, place it "above" it instead:
<Grid>
<Border BorderThickness="20"/>
<OtherContent/>
</Grid>
I have a Windows Store app with a ScrollViewer and an Image in it. When i double tap on the ScrollViewer I want it to zoom the Image to its width. This part is not a problem but I also want the Image to be centered after it has beed zoomed in.
I tried calling the ScrollToHorizontalOffset method on the ScrollViewer but It does not seem to work with any number I give it. What is the problem?
Perhaps the offset only works for the non-zoomed view where your image fills the ScrollViewer completely and thus can't be scrolled. You could try setting the image dimensions so that it is larger than the ScrollViewer, but set original ZoomFactor, so that it fills the ScrollViewer at first. Then zooming and scrolling might work.
Assign a SizeChangedEvent in the scrollviewer.
<ScrollViewer SizeChanged="OnSizeChange"></ScrollViewer>
like this. Then it is better to place your image inside a canvas. So your code will be probably like this.
<ScrollViewer SizeChanged="OnSizeChange" x:Name="scrl">
<Canvas RenderTransformOrigin="0.5,0.5" x:Name="main">
<Image source="" Canvas.Top="insert desire double value here", Canvas.Left="Same goes here"/>
</Canvas>
</ScrollViewer>
then in the code behind you can change the height and width of your canvass depending on the scroll viewer
Main.Width = scrl.ViewPortWidth;
Main.Height = scrl.ViewPortHeight;
You can experiment on the size of the canvass while adding a double tap event to it. Changing the size of the canvas can zoom in or out the image because the image is inside the canvass
Try with 'ChangeView' instead of 'ZoomToFactor'
I am currently looking at the C# Metro default controltemplate for scrollbar. And in it the scrollbar template, there is this portion that called verticalpanningroot. Do you have any idea which part of the scrollbar UI is it responsible to render?
<Grid x:Name="VerticalPanningRoot" VerticalAlignment="Top" MinHeight="66">
<Border x:Name="VerticalPanningThumb"
Background="{StaticResource ScrollBarPanningBackgroundThemeBrush}"
BorderBrush="{StaticResource ScrollBarPanningBorderThemeBrush}"
BorderThickness="{StaticResource ScrollBarPanningBorderThemeThickness}"
Width="4" MinHeight="17"/>
</Grid>
Thanks.
If you mean x:Name="VerticalPanningRoot", it just means that you can access your Grid by it's name in your code behind (C#) which is VerticalPanningRoot.
Example:
VerticalPanningRoot.HorizontalAlignement = // something
Edit:
Your Grid is actually holding the "thumb" (the Border element) of the ScrollBar (the thumb is the part you can drag and drop to go down and up more faster).
You can see here all the ScrollBar parts, this image is taken from this tuto.
I don't want to display content that is outside the border in my wpf application. Here is an image to illustrate better my point:
in that picture the blue box is the border and note that its child is a listview. I don't want to display the entire listview. I just want to display whatever is inside the blue border.
What control do I have to use in order to achive that? I am looking for some sort of a mask... Is creating a custom user control my only option?
<Border ClipToBounds="True">
<ListView .../>
</Border>
Just set ClipToBounds to true on the border and it should be cut off.
I have read that I can't have my dockpanel scroll so im looking for alternatives
I want to have a lot of slider controls(unknown number) left to right in a panel of some sort that can scroll so I can view all the sliders. I tried with dock panel but of course that didn't work. What can I do to make the dockpanel work or what do I replace dockpanel with(the replacement would need to support children)?
Thanks!
EDIT:
http://i.stack.imgur.com/J5a4u.png
here is the idea but it needs to scroll horizontally
David Brunelle Does work but its not quite what I want. Id like the scroll bar to be on the top of the control and not attached to the bottom of the window.
I'm not sure I understand, but you can use a panel within a ScrollViewer
Something like this :
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Margin="2,2,2,2">
...
</StackPanel>
</ScrollViewer>
This will allow for vertical scrolling. You could do the same for horizontal scrolling. I do not know if this would work with a docking panel, but I know it does with a stack panel.
Hope that helps.
I would use a ListBox as it will handle the scrolling part for you, then you can set the ItemTemplate (if you want) and you can use data binding (using an ObservableCollection or a DataView