I am trying to find answer to my problem without success. didn't found anyone trying to do something similar.
I am simply trying to have a default scale factor on a DataGrid (object doesn't matter) and have it manually editable. Now let me explain in more detail.
I have a Slider with value range from 10 to 100 with Interval ticks of 10.
<Slider Name="sldZoom"
IsSnapToTickEnabled="True"
Height="180"
Orientation="Vertical"
TickPlacement="Both"
Minimum="10"
Maximum="100"
Ticks="10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
Value="10" HorizontalAlignment="Center" />
Then i have a ScrollViewer with fix Height and Width for format purpose
<ScrollViewer Name="scrZoomPanel"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
Height="500
Width="750"
Background="White">
And at last I have in the scrollviewer a DataGrid with random columns and row quantity
<DataGrid Name="grdArrangement"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalAlignment="Top"
ItemsSource="{Binding Path=ListData}"
IsHitTestVisible="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="False"
CanUserSortColumns="False"
HeadersVisibility="None"
AutoGenerateColumns="True"
GridLinesVisibility="None"
SelectionMode="Single"
AutoGeneratingColumn="grdArrangement_AutoGeneratingColumn"
AutoGeneratedColumns="grdArrangement_AutoGeneratedColumns"
Background="White" >
<DataGrid.RenderTransform>
<ScaleTransform
ScaleX="{Binding ElementName=sldZoom, Path=Value, Converter={StaticResource ZoomRatio}}"
ScaleY="{Binding ElementName=sldZoom, Path=Value, Converter={StaticResource ZoomRatio}}" />
</DataGrid.RenderTransform>
</DataGrid>
the 2 auto generate event is because the grid get different cell styles assigned to it eveytime datasource changes
So datagrid can get different amount of rows and columns and at Zoom Value 100 the scale is 1. At Zoom value of 10 scale is 0.1.
In some case the grid get's bigger than the scrollviewer and it shows scrollbar and that's fine but what i want is :
after the binding is complete and onpaint completed (everything generated), I want to zoom to the level that allow me to see everything. If not possible because the datagrid is too big i need to stop at Zoom 10 (10%). I need the zoom factor to stop ONLY on ticks that is inside the list.
I tried iterating over the slide ticks and set the zoom and check if the scrollviewer still display scrollbars but that doesn't work the scrollviewer always show value before everything change. By that i mean if the grid was 1x1 pixel the scroll viewer scroll ba visible was false even if it zommed in enought for the 1x1 grid to be 1000 % zoom so 1000x1000 pixel and scrollbar actually shows. onve code finish running i click a button that message box scrollbar visibility and i see them as true.
Seems like changing the slider value doesn't update the scale transform of the grid right away.
So in short i simply want a Scale To Fit and that happen only once every binding update of the datagrid. I also know exactly everytime the grid datasource changes.
thank you
Edited Datagrid. Code showed LayoutTransform and not RenderTransform. I copied while i was testing LayoutTransform instead just to see if that was it. Anyhow both work on Zoom but zoom to fit fails
I started looking at the problem form another angle and try getting
scrZoomPanel.ComputedHorizontalScrollBarVisibility
and
scrZoomPanel.ComputedHorizontalScrollBarVisibility
to be anything else than original value before altering the DataGrid.
So i was looking to a way to force refresh of the scrZoomPanel and found ou there is a function for that :
scrZoomPanel.UpdateLayout();
If i call that every time just before trying to read the scrZoomPanel.ComputedHorizontalScrollBarVisibility then it finally return me the real value.
But i find that a bit invasive needing to call that every single time. Wonder if there is a way to make a binding change force refresh in XAML instead of background code.
Related
I have a GridView that I use to display thousands of images/thumbnails (using data binding). I used ImplicitAnimations to add transitions, so that when the control is resized and the number of columns changes - every item smoothly goes into the new position after the resize.
Problem
This all works fine when the user is at the top of the GridView but becomes a problem the further the user scrolls. The further you scroll, the more items are moved around when the number of columns changes. More rows are added/removed, but the Scrollbar is kept on the same position/offset which causes previously visible items to go far away from the view - and the user gets lost.
What I tried so far...
I tried working around this issue by tracking the first visible item on every scroll change event and then scrolling to it on SizeChanged event. The problem of this solution, however, is that it's really rough. Animations are no longer noticable and the whole experience is laggy.
Is there any better solution to this problem?
Illustration of the problem
Video example
I have also made a video to better illustrate the issue.
(The images have been blurred because some were NSFW)
Video Link
What I am looking for is a way for the scrollbar to adjust it's position on resize and stay on the same items the User was looking at - without messing up the animations.
Edit
So apparently this can't be solved any other way but manually scrolling to the item I wish to have visible on resize, which I already tried doing and had problems with the animations being really rough again because the ScrollToItem was happening AFTER the animations were being triggered.
So my question now is - can I scroll to an item on reorder/resize - BEFORE the animations get triggered? That way I think I could keep the smoothness. Using the resize event, however, doesn't work for this.
Edit 2 - Code sample
<GridView x:Name="mylist" animations:ReorderGridAnimation.Duration="600" ItemsSource="{Binding Source={StaticResource viewSource}}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center" Loaded="ItemsWrapGrid_Loaded"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="300" Height="300" Background="Gainsboro">
<Image Source="{Binding ThumbnailImage}" />
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
GridView ItemSource is binded to the following CollectionView
<UserControl.Resources>
<controls:AdvancedCollectionView x:Key="viewSource" Source="{x:Bind Collection}" />
</UserControl.Resources>
I switched to the Community Toolkit for the animations and the AdvancedCollectionView. The custom panel is being used for 2 reasons - to get the Panel and apply implicit animations to it - and to keep the scrollbar on the rightmost side when HorizontalAlignment is Center.
The CollectionView is binded to an ObservableCollection.
To reproduce the issue - just add a lot of items into the ItemSource and try resizing the GridView at different scroll offsets (check video sample)
.
For your this issue, it may be caused by the ListView and GridView UI virtualization, you can try to use VariableSizedWrapGrid as the GridView's ItemsPanel,
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
But it will cost much device memory and performance without virtualization. So you should also take into consideration displaying many images in once.
As for displaying the Item that the User is looking at, since there are many items displayed in the screen, the GridView does not know to track witch one.So also as #Pratyay's suggestion, you need to keep track of the item then make the ScrollView witch is in the GridView to scroll to the item.
I wanted a single-row GridView that can be scrolled horizontally both with mouse and touch swipe. The GridView is to present images through binding so that a single image will be selected from an array of images.
Everything works fine (binding, image selection, etc.) except that the horizontal scroll doesn't work. The XAML code is shown below.
What am I missing?
<GridView x:Name="IconGridView"
Grid.Row="0"
Margin="8,12"
DataContext="{x:Bind IconManagerObj}"
DoubleTapped="{x:Bind IconGridView_DoubleTapped}"
IsItemClickEnabled="True"
IsSwipeEnabled="True"
ItemsSource="{Binding Path=IconImageInfo}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
SelectionMode="Single"
Tapped="{x:Bind IconGridView_Tapped}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="4,8"
HorizontalAlignment="Center"
BorderBrush="{ThemeResource SubtleBlueBrush}"
BorderThickness="1">
<Image Width="150" Source="{Binding IconImage}Stretch="Uniform"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
You have everything right but the Orientation for the ItemsWrapGrid must be Vertical in order to have an Horizontal ScrollViewer.
The documentation here https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx explains that:
When the value is Vertical, the grid adds items in columns from top to bottom, then wraps from left to right. Columns of items scroll or pan horizontally.
Juan Pablo Garcia Coello's answer put me on the right track but didn't work without an additional setting. The crucial thing I found out through trial was setting the Height for GridView.
Height must be set enough for a single row elements to display but not high enough to allow a second row. For image height of 100 I set this arbitrarily to 140 and works great.
ScrollViewer.VerticalScrollMode must be Disabled
ScrollViewer.HorizontalScrollMode must be Auto or Enabled
ScrollViewer.HorizontalScrollBarVisibility must be Auto or Enabled
The most crucial, as Juan indicated, the ItemsWrapGrid Orientation must be Vertical (sounds counterintuitive but works!)
I have marked Juan's as answered as it provides a complete answer with this one, due to the fact that I couldn't have quickly figured out a complete answer without the Orientation being set Vertical -- a rather counter-intuitive setting if you ask me but now I get it.
I have a ListView with custom-made cells (items).
This ListView represents a conversation between two persons exchanging messages with my application. Each time a message is added, the conversation auto-scrolls to the last item.
I am facing a few "strange" issues :
When a user writes a rather long message (say, 10 lines), it can then take up almost the whole screen (meaning the space allocated to the ListView) which is normal of course but then the scrolling is somewhat broken.
First, when the list auto-scrolls to this message, a big white space appears below the item all the way down to the bottom of my ListView. See picture :
And when messages are very short (single line) :
Second, and in all cases, the scroll speed is way to fast. A single mous-wheel "stroke" (the feeling in your finger as you scroll) will move the scroll bar too fast : up to 4 small messages are scrolled ! That's too much !
So question is : how to control the scroll speed ? How to slow it down ? Why is there this big white space ? Thanks for the help !
[UPDATE 1]
Requested by #CurtisHx my ListView XAML is as follow :
http://pastebin.com/FFZGhi6w
I hope it helps understanding my issue!
One way to be to set ScrollViewer.CanContentScroll="False" on the ListView. https://social.msdn.microsoft.com/Forums/vstudio/en-US/47bd6a75-7791-4c0f-93ae-931e9a6540e7/smooth-scrolling-on-listbox?forum=wpf
You will loose virtualization on the ListView, so keep the number of elements in the ListView to something reasonable. That should fix the fast scroll speed.
Text Alignment
The text is being aligned correctly. Currently, the parent container limits the width of the TextBlocks. TextBlocks will fill all of the horizontal space it can before wrapping the text. So for long messages, the TextBlock will expand horizontally until it hits the limits of the parent container.
In order to get the staggered text, the width of the message needs to be less than width of the ListView. If you widen the window, you'll see the text become staggered. Below is a snippit of code, pointing out the TextBlock that needs to be width limited.
<ListView x:Name="ConversationList" ScrollViewer.IsDeferredScrollingEnabled="False" ScrollViewer.CanContentScroll="False" ScrollViewer.VerticalScrollBarVisibility="Auto"
BorderBrush="Transparent" Grid.Row="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,10,10">
<!-- Big Snip /!-->
<ListView.ItemTemplate>
<DataTemplate>
<!-- Snip /!-->
<Border Padding="0, 15, 0, 15">
<Grid x:Name="ConversationBubble">
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
<Border Margin="70, 5, 70, 5" HorizontalAlignment="{Binding Alignment}" BorderBrush="#ECECEC" Visibility="Visible" Background="#F1F1F2" Padding="10">
<StackPanel>
I know this is too late, but:
VirtualizingPanel.ScrollUnit="Pixel"
When vertically scrolling into view, I can pull the last row into view, but on releasing the drag, the last row springs back (partially) out of view. I think inaccuracy of measure can be attributed to a grid that I'm using as the listbox's header but I'm currently unable to fix this to that they work together correctly.
<Border>
<StackPanel>
<ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Auto">
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Border>
**Update
This example removes the scroll and also suffers from the same truncated row problem as the example above. The header grid row also doesn't scroll horizontally with the listbox rows which is an even bigger problem for my solution.
<Border>
<StackPanel>
<Grid x:Name="_headers"/>
<ListBox x:Name="_dataGrid"/>
</StackPanel>
</Border>
It's because you put ScrollViewer inside StackPanel. StackPanel doesn't limit control's size so the ScrollViewer can grow forever and never scroll properly. Its size must be limited. Grid can do it perfectly (if only the height of the row is set to *, not Auto).
Also, in my opinion you shouldn't put ListBox inside ScrollViewer, because ListBox already has its own scroll feature.
Never ever use a ListBox inside a ScrollViewer, you will run into scrolling conflicts.
As far as I can see, you need to add a header to your list. LongListSeelctor might be the best option, since it has got a Header property (also Footer):
See: http://www.geekchamp.com/articles/the-new-longlistselector-control-in-windows-phone-8-sdk-in-depth
I have a data grid with a scroll and virtualization. Everything else is fine except that there's a possibility for extra 1-23 pixels to scroll to the bottom:
I have a data grid, a custom styled scrollbar on the right and then I have a splitter on the bottom and the problem is that there is empty space between the splitter and grid, which itself is fine (as you can resize the splitter and have more empty space), but the scrollbar is now larger than it needs to be, which causes problems elsewhere. How can I make sure that the scrollbar is exactly "as tall as the content".
I don't want it to scroll to empty places, because I have code elsewhere which reads the scroll position and multiplies by the row height to determine where we are at, and it bugs as soon as you exceed the scrollable area.
The data grid looks like:
<DataGrid CanUserSortColumns="False"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserResizeColumns="True"
CanUserReorderColumns="True"
SelectionUnit="FullRow"
ScrollViewer.CanContentScroll="True"
SelectionMode="Single"
HeadersVisibility="Column"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling"
AutoGenerateColumns="False" />
Update: I think I know the reason. Because I use virtualization, it scrolls by one row (not by pixels), thus it won't allow me to scroll so that rows are partially visible. It always scroll by the height of a row (in my case 24 units). Now, if I move grid splitter and make the last row to be only partially visible, it correctly shows the scrollbar, but the problem is that it will scroll 24 units and thus showing empty space in the bottom.
Coming to realize that, I'm not so sure this problem can be even fixed. I just need to edit the code elsewhere to figure out if there has been exceeding scrolling, and if so, I'll "crop and ignore" the last 1-23 units of scrolling.
Please use the property ScrollViewer.VerticalScrollBarVisibility="Auto" on your DataGrid
For more information on this property go to http://msdn.microsoft.com/en-us/library/system.windows.controls.scrollviewer.verticalscrollbarvisibility.aspx