I'm trying to use in my application an input-selected index to scroll a ListBox (horizontally scrollable). I've found on MSDN and on this own site the method ScrollIntoView but it doesn't work and on the ListBox Class page it has been written to be compatible with WP 7.0, 7.1. So, this is a snapshot of my code...
scrolling.ScrollIntoView(scrolling.Items[20]);
where scrolling is my ListBox and the 20th item is the one I want to be selected and visualized.
PS: I've already tried to use the selectedIndex way but it is still not working!
This is a xaml of my ListBox (put in the Layout Grid) which have referencies to templates written in the App.xaml document.
<ListBox x:Name="scrolling" Grid.Column="0" ScrollViewer.ManipulationMode ="Control" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
edit: I found that calling the function by a button makes the all whole stuff work, but how to initialize everything at the start?
I used in my solution first updated UI and then called ScrollIntoView it works fine:
scrolling.UpdateLayout();
scrolling.ScrollIntoView(scrolling.Items[20]);
Related
Task
My task was to be able to change the order of the service cards in the ListBox by dragging and dropping. I found a good solution on StackOverflow that has a lot of useful features (gong-wpf-drag drop, https://stackoverflow.com/a/33367826/19631476).
Problem
However, I had to face an unpleasant visual bug: when I drag the service card, there is some label that indicates where the dragged object will be moved. So, for some reason, this label is clipped if a number of objects are also clipped and not visible in the ListBox. However, when scrolling, the cropping does not disappear. Moreover, then the label will always point to the line above, wherever it is.
Problem demo
below I will present some screenshots demonstrating the problem
the normal state of the separator
the separator is cut off due to the fact that the card does not fit into the container
the separator continues to be cut off after scrolling
the separator is shifted up a line, and is still clipped, despite the fact that I move the elements already in another line
My code
This is how my ListBox element looks like:
<ListBox
Margin="10 0 10 10"
Background="Cornsilk"
MinWidth="300"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.SelectDroppedItems="True"
ItemsSource="{Binding ServicesListCollectionView.View}"
SelectedIndex="{Binding SelectedServiceIndex}"
SelectedItem="{Binding SelectedService}"
d:ItemsSource="{d:SampleData ItemCount=5}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border AllowDrop="True" Style="{StaticResource BorderStyle}">
<DockPanel Background="GhostWhite">
<!-- Service Card Template-->
</DockPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
it contains a custom container so that the service cards can be arranged as a grid from top to bottom
What have I tried to do?
The idea came to my mind to prohibit the use of ScrollBar for the ListBox element. It worked, and the visual bug sort of disappeared. But you can't leave it like that. I wrapped the ListBox in ScrollViewer and allowed it to scroll vertically. This visual bug is no longer there:
code:
<ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="ServiceScroll">
<!-- Here is ListBox -->
</ScrollViewer>
However, this solution is not suitable:
I lose control of scrolling in the ListBox and can only use scrolling on the ScrollViewer itself
Scrolling also becomes unavailable when dragging items.
the second problem can be solved by specifying the dd:DragDrop.DropTargetScrollViewer ScrollViewer with binding to the ScrollViewer element:
<ScrollViewer VerticalScrollBarVisibility="Auto" x:Name="ServiceScroll">
<ListBox
...
dd:DragDrop.IsDragSource="True"
dd:DragDrop.IsDropTarget="True"
dd:DragDrop.SelectDroppedItems="True"
dd:DragDrop.DropTargetScrollViewer="{Binding ElementName=ServiceScroll}"
...
></ListBox>
</ScrollViewer>
but in this case, the visual bug described above appears again, and also, this solution still does not allow you to scroll through the elements inside the ListBox using the mouse wheel.
Any ideas?
To be honest, I do not know what to do. Has anyone encountered anything described above?
Maybe I'm doing something wrong, which is why I get such strange behavior? What's wrong with scrolling?
Maybe you have good solutions to solve the problem? How else would it be possible to solve the issue of dragging items to the ListBox in the most flexible way?
I have a ScrollViewer, which contains a set of items in a WrapPanel. The xaml tree is as follows:
<Grid>
<ScrollViewer>
<ItemsControl ItemsSource="{Binding xyz}" Tag="{Binding .}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Button.... styling etc.>
When scrolled to the very top or very bottom position, a white line appears across the control- image is here: https://imgur.com/3DNpWRE
This is happening in a view which uses VisualStates. There are other visual states which use a ScrollViewer, and this problem does NOT happen. The only thing unique about this particular visual state is the use of the ItemsPanel/WrapPanel. I've tried removing this just to isolate the cause of the problem, and even when I take it our the issue persists.
Seems almost like the scroller fails to fully refresh/paint when it gets to the first/last index.
Has anyone seen something like this before?
Interestingly enough, if I run my application in debug, the scroller displays perfectly fine. Only when launching a release build does the problem present itself.
on Windows 8.1 below code indicates the selected item of GridView. But on Windows Phone Xaml same code doesn't work like that. There isn't any visual indicator for selected item at all.(or i couldn't get it to work) How can i make it work like this on Windows Phone App too?
<GridView
x:Name="productColorChoices"
SelectionMode="Single"
ItemTemplate="{StaticResource productColorChoice_ItemTemplate}">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid
Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
If you go look at the GridViewItem default style template you'll see towards the bottom you have these objects in there;
SelectedBorder
SelectedCheckMarkOuter
SelectedCheckMark
SelectedEarmark
Which is what makes up the visuals for that selected outline/checkmark thingy on the GridView items. They all get shown according to the VisualState for Selected
Now, if you go and look at the phone's default style template for the GridViewItem's (which I couldn't find the default one for with a quick google search and I don't have a phone project open to go dig through) then you can compare. If these types of elements don't exist in the phone templates then you can go add them the same way using pretty much the same objects and the same storyboards in the same VisualState.
Hope this helps, cheers.
In WPF, is there any way to disable the scroll behavior of the ComboBox that auto-scrolls to the top of the list whenever a user reaches the end of the list? I'd rather that the list stayed at the end and the user have to manually scroll back to the top.
Heres the XAML for the ComboBox:
<ComboBox x:Name="CellProviderCombo" HorizontalAlignment="Left" Height="65" Margin="14,405,0,0" VerticalAlignment="Top" Width=" 327" Header="Cell Provider" PlaceholderText="Choose Cell Provider" DataContext="{StaticResource GlobalVars}" ItemsSource="{Binding GlobalShopInfo.CellProviders}" DisplayMemberPath="Name" SelectedValuePath="Name" IsDoubleTapEnabled="False"/>
As I said, if you scroll past the last element in the combobox it simply starts over at the bottom and the scroll bar shoots back up to the top automatically.
Turns out that the ComboBox in WPF is not the same ComboBox used in Windows Apps Windows.UI.Xaml.
The ComboBox used in Windows Apps uses a Carousel instead of a StackPanel to display its items. One of the effects this has is making it so when you reach the end of the list, it simply loops back to the top. The solution is to manually change the ItemsPanelTemplate to a StackPanel as follows:
<ComboBox x:Name="MyComboBox"> //Add other properties in this line as well if needed
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
Hope this helps anyone who has a similar issue.
I'm using the ListBoxDragDropTarget from the Silverlight Toolkit (April 2010) with SL 4.
I want to drag items from the list box onto a Label and handle the drop event there.
However it seems a bit complicated. The regular Drop event of the Label never gets fired. I suppose that is because the Silverlight Toolkit has its own way of handling Drag & Drop which is only partially compatible.
Looking arround I found the Microsoft.Windows.DragDrop.DropEvent and attached a handler to this event. And it worked!! I got the Drop event. However I'm not sure how to get to the real object that was dragged (a string).
I tried e.Data.GetData(typeof(string)) but I got nothing. Looking at the available formats there is a System.Windows.Controls.ItemDragEventArgs object. Inside this I found an array of System.Collections.ObjectModel.Selection which then has an Item property. I suppose in this Item property I find my object, but the whole method seems a bit fragile and I'm not convinced that is the official way to do this.
Is there any better way?
U can also use another ListBox
For ex: include namespace
xmlns:toolKit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
Let us add the “ListBoxDragDropTarget inside the Grid. Set the attribute “AllowDrop” to True. Once it is set to true, it will be able to catch the drop event inside the control.
Now we will add a ListBox inside the ListBoxDragDropTarget and set properties whichever u like. suppose
<toolKit:ListBoxDragDropTarget AllowDrop="True">
<ListBox x:Name="customerListBoxMain" Height="200" Width="200"
DisplayMemberPath="Name">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</toolKit:ListBoxDragDropTarget>
And add another ListBox
<toolKit:ListBoxDragDropTarget AllowDrop="True">
<ListBox Height="200" Width="200" DisplayMemberPath="Name">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</toolKit:ListBoxDragDropTarget>
Now to fetch some data and set it to the Source of the first ListBox from code behind. Here is the sample code:
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
customerListBoxMain.ItemsSource = PersonDataProvider.GetData();
}
}
It's Done..