I'm developing a touch application that uses a ScrollViewer and a StackPanel to make a carousel of images. The images are added to the stackpanel and the user slides them using fingers.
The problem is that I'm having a visual problem, what I want is to prevent the scrollviewer from stopping in the middle of two images. Just like this:
The idea is: when the inertia is stopping, automatically scroll to the nearest image.
Thats my XAML:
<ScrollViewer x:Name="crlGalleryPlayer1" Panel.ZIndex="303" HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" PanningMode="HorizontalOnly"
PanningDeceleration="0.01" PanningRatio="1"
ManipulationBoundaryFeedback="crlCarrusel_Viewer_ManipulationBoundaryFeedback"
IsManipulationEnabled="True" Width="1920" Height="1080" Margin="0,0,0,0" CanContentScroll="False" Visibility="Hidden">
<StackPanel Name="pnlCarrusel_ViewerPlayer1" Visibility="Visible"
ScrollViewer.IsDeferredScrollingEnabled="False" IsManipulationEnabled="True" Margin="0,0,0,0"
Orientation="Horizontal" Panel.ZIndex="303">
</StackPanel>
</ScrollViewer>
I've tried to start from the ManipulationCompleted event of the Scrollviewer but it's not getting fired, only ManipulationStarted
Thank you all.
Related
I'm stuck at a point where I have to change the height of scroll viewer content irrespective of the size the contents inside it need.
The reason is that I will have a very long Image and I don't want to slow my GUI while scrolling. So,I cut the long image and I render stitched images of it depending on current scrollviewer vertical offset.
I tried to achieve it by putting a Hidden Long image so that it won't render on scroll and there won't be any lag. But I don't feel good about it.
Can someone help me to dynamically increase the ScrollViewer content Height?
The code is here:
<Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="9" Grid.RowSpan="12" Margin="10,60,10,0" >
<Image x:Name="StitchedImage" SnapsToDevicePixels="True" HorizontalAlignment="Stretch" Stretch="Fill"/>
<ScrollViewer x:Name="ImageScrollViewer" Background="Transparent" ScrollChanged="ImageScrollViewer_ScrollChanged" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled">
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" >
<Image x:Name="longImageHidden" SnapsToDevicePixels="True" Visibility="Hidden"/>
</Grid>
</ScrollViewer>
</Grid >
I think It would be really cool if I can just give a blank image specifing just height and width without any source. Is that even possible?
Yes, it is:
<Image Height="1000" />
You could also set the Height of a ScrollViewer and any other FrameworkElement derived type.
To create a circle below each time the button is clicked. In canvas
position of Circle move to out of canvas.
But, Scroll viewer does not move up and down.
<ScrollViewer x:Name="scv" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Margin="135,0,0,0" Focusable="True">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="373" VerticalAlignment="Top" Width="685" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True"/>
</ScrollViewer>
Is there a way to move up and down the scroll Viewer?
edit
An attempt was made to try to use the code to the link to me the site, an error occurs
don't use code... Anything simple way?
Page scrolls without any issue when the mouse is over data grid. If the mouse outside datagrid page doesn't scroll.
<navigation:Page>
<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer x:Name="scrollMainQueue" VerticalScrollBarVisibility="Auto" >
<StackPanel>
<StackPanel>
</StackPanel>
.......
<StackPanel>
<data:DataGrid AutoGenerateColumns="False" Name="grdWorkingDocs" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="50" Margin="5,0,5,5" CanUserResizeColumns="False" CanUserReorderColumns="False" LoadingRow="grdWorkingDocs_LoadingRow" AlternatingRowBackground="White" RowBackground="White" HorizontalGridLinesBrush="White" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" />
</StackPanel>
</StackPanel>
......
</StackPanel>
</ScrollViewer>
</Grid>
scrollMainQueue.SetIsMouseWheelScrollingEnabled(true);
After some research Got the answer.
Basically we need to set the background color to the scrollviewer. It worked after that.
<ScrollViewer x:Name="scrollMainQueue" VerticalScrollBarVisibility="Auto" Background="White">
Answer is as mentione above. Applied background color to scrollviewer made is scrollable.
Background="Transparent" also works, if you can't use any color because of your design requirements.
I was using the Content Control to hold the inner view wrapped up with scroll viewer, the scroll viewer was only working on mouse wheel when the pointer is on any field and not on the empty area.
After seeing the above posts, I set the background color and it started working fine, though the solution looks unrelated [don't know how exactly related to the problem].
I'm trying to get a window similar to a chat window, where a list of text items is drawn. The window should be resizable and each text item should wrap if it does not fit on one line.
What I have so far:
MessageItem - A user control, multiline TextBlock in a Border
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Border BorderBrush="Silver" BorderThickness="1" Height="Auto" HorizontalAlignment="Left" Margin="0,10,0,10" Name="messageContainer" VerticalAlignment="Top" Width="Auto">
<TextBlock Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="messageContent" VerticalAlignment="Stretch" Width="Auto" Text="This is some longer text. Wow that wasn't as long as I thought." TextWrapping="Wrap" Padding="10" />
</Border>
</Grid>
MessageBox - A user control with a ListView that holds MessageItems
<Grid Name="messageGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<!--<StackPanel Height="Auto" HorizontalAlignment="Stretch" Margin="0" Name="messagePanel" VerticalAlignment="Stretch" Width="Auto">
</StackPanel> -->
<ListView HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
<local:MessageItem></local:MessageItem>
</ListView>
</ScrollViewer>
</Grid>
The Problem:
If I use the commented out StackPanel for holding MessageItems, It will shrink the MessageItem (and cause the text to wrap) correctly. If I use the ListView, it does not shrink.
I've more or less figured out why from research, but I haven't been able to figure out how to get around it. As far as I can tell I need to override MeasureOverride and/or ArrangeOverride, but I'm far too new to WPF to know WTF I'm doing. (rimshot)
I'm not sure why you're putting the ListView inside a ScrollViewer since the ListView has its own ScrollView internally.
In order to get your MessageItems to wrap you need to turn off any horizontal scrollbars, otherwise the container (ListView or ScrollViewer) will give the MessageItem as much space as it requires and show a scrollbar.
Try
<ScrollViewer ... ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
and
<ListView ... ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
although I'm not sure you even need the ScrollViewer.
You would probably be better off using a ListBox and an ItemTemplate instead of the ListView and user control
I am developing a simple WPF application without any auto layout. The goal is when a user clicks (mouse down) a element (say textBlock) will appear at the location of the mouse click. For this I am using canvas panel embedded in a Grid of 1 row, 1 column and scrollviewer (visible). The issues are:
1. when the application window is resized the scroll viewers do not become active.
2. I want the ability to auto grow the canvas with mouse drag. Something like in MS-Excel when user drags the mouse horizontally/vertically the canvas should grow.
I have searched net a lot to figure this out and am unable to get an answer. Any help in this regard would be great.
Thanks a bunch in advance.
-P
I after asking this question I figured it out how to have freeform layout and autosize. Here is a sample XAML if anyone needs it or has better suggestion to improve this:
<Ellipse Grid.Column="0" Fill="Red"/>
<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch"/>
<!-- Creating a grid with one row and one column"-->
<ScrollViewer x:Name="ServerLiistCanvasScrollViewer"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Height="Auto" Width="Auto"
Grid.Column="2" >
<Grid x:Name="drawingGrid" Grid.Column="2"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Background="Pink"
MouseDown="handleCanvasMouseDown">
</Grid>
</ScrollViewer>
</Grid>