Windows Phone ListBox: how to scroll it? - windows-phone-7

I've got a ListBox (dynamically populated via code):
(i can't insert the code, bah)
I need, with a button, to move this listbox vertically. The listbox have a fixed height, and also the items.
Can someone help me?

Per MSDN, it looks like this is a viable answer for you?
ListBox.ScrollIntoView Method
Edit - Comment Summary of Answer: The question here was targetting scrolling itself, not to a particular object. As such, the necessary action was to attain a reference to the ListBox's ScrollViewer. From there, a call needed to be placed to the ScrollViewer's ScrollToVerticalOffset method. As the OP wanted to scroll down a certain amount from the original position, the ScrollViewer's VerticalOffset property was incorporated into the call.

This works. Set the ListBox to not scroll, then add a ScrollViewer around it. Now in your code behind you can set the ScrollViewer to whatever you want.
XAML:
<!--Disable the ListBox scroll and add a ScrollViewer so we have control over the scroll position.-->
<ScrollViewer
Name="scrlvwrListBoxMessages"
VerticalScrollBarVisibility="Auto" >
<ListBox x:Name="lstbxMessages"
ScrollViewer.VerticalScrollBarVisibility="Disabled" >
</ListBox>
</ScrollViewer>
Code:
private void ScrollToBottom()
{
//Scroll to the bottom.
Dispatcher.BeginInvoke(() =>
{
this.scrlvwrListBoxMessages.ScrollToVerticalOffset(double.MaxValue);
});
}

Related

Adding UI elements to scrolviewer dynamically, win phone

I know how to add children to panels. It is like this
stackpanel.children.add(uielement);
But I have a scrollviewer inside stackpanel.
I wanted to add textblocks and other elements inside the scrollviewer but there is no function to add children to scrollviewer.
I tried to add another stackpanel inside the scrollview and add elements to it... but if I add elements dynamically to the stackpanel defined inside scrollviewer the elements show right but there is no scroll. If I do the same that is:
<ScrollViewer>
<StackPanel x:Name="StckPanel">
<TextBlock Text="etc" />
</StackPanel>
</ScrollViewer>
Doing this enabled the scroll. But If I add elements to the stack panel using
StckPanel.Children.Add(Textblock Object);
It does add the elements but the scroll is now disabled.
Here is what I did:
The XAML code is
<ScrollViewer>
<StackPanel x:Name="Hello"></StackPanel>
</ScrollViewer>
In my c# file I did this:
TextBlock x= new TextBlock();
x.Text="Here it goes";
StckPanel.Children.Add(x);
But when I do this the scroll is disabled. I am not able to scroll.
So I need to know why is the scroll not working here. And how am I supposed to add child elements inside ScrollViewer.
As in XAML we can add UIElements inside the tags of ScrollViewer. Why cant we do the same using c#.
Well I found the problem. I was not specifying the height width and margins properly. As a result this messed up the scroll somehow.

How to always show scroll bar in a listbox in wp7

How to always show scroll bar in a listbox. If I delete Notscrolling visualstate of Scrollviewer. It always shows scrollbar only after scroll down happend. I want to show scrollbar when page loaded it should be visible always.
Pls Help me
<ListBox
ItemsSource="{Binding}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
Hope it help
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
<List Box ..>
</List Box>
</ScrollViewer>
The Thing is the scroll bar moves up/down (or left/right) to the maximum of the child's(here listbox) width/height value. So ensure that the parent of the scrollviewer has greater height/width than the child's of the scroll viewer.
For your question : This is by design WP will not display scroll bar until you scroll it. It comes visible once you scroll the content of the scroll viewer and then disapperars automatically. If it is displaying ever (as you want to be) it must be an overhead.

Creating a Looping Listbox

Hi I want to create a looping listbox so that the last item's next item is the very first item and vice versa - creating a listbox that doesn't have a top or a bottom.
I know there is a LoopingSelector in the WP7 toolkit but it doesn't quite do what I want since it fades in/out peripheral items and you have a 'selected' item that is always in the middle.
I looked at the LinkedList collection but it doesn't seem to support looping: "The LinkedList(Of T) class does not support chaining, splitting, cycles, or other features that can leave the list in an inconsistent state."
Does anyone know a solution for what I'm looking for or would I need to develop a hybrid of the current Listbox and the toolkit's LoopingSelector?
Many thanx!
Take a look at Petzold's article on circular lists in MSDN Magazine.
I recently have a same problem as your! I use blend 4 to handle this, making my list reset to certain position at certain time, also adding a copy of a list in front and behind of the original list.
example: my list is: 1-2-3-4-5-6,
I would make it 1-2-3-4-5-6-1-2-3-4-5-6-1-2-3-4-5-6
and it reset to original position every 20sec. For example: if user was on item 4 it would reset the position to item 4 but at the middle list.
I currently have my question asking here you can check out if anything help:
horizontal listbox that could be infinite circle scrolling
Use Scrollviewer contains listbox, put manipulationCompleted event and use ScrolltoVerticalOffset(0) to have it looping scrolling. Maybe my code would help:
<ScrollViewer HorizontalScrollBarVisibility="Auto" Margin="-2,567,-1,0" x:Name="imagesScrollview"
Opacity="1" Grid.Row="1" RenderTransformOrigin="0.5,0.5"
ManipulationCompleted="imagesScrollview_ManipulationCompleted" Height="85" MouseLeftButtonDown="ScrollViewer_MouseLeftButtonDown">
<ScrollViewer.Background>
<ImageBrush ImageSource="/PhoneApp11;component/Images/top_friends_float.png" />
</ScrollViewer.Background>
<ListBox x:Name="listBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="Auto" Height="80" Background="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
and in Manipulation event:
private void imagesScrollview_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
ScrollViewer scrollviewer = sender as ScrollViewer;
if (scrollviewer.HorizontalOffset > (listBox.ActualWidth - 700))
scrollviewer.ScrollToHorizontalOffset(0);
else if (scrollviewer.HorizontalOffset < 100)
scrollviewer.ScrollToHorizontalOffset((listBox.ActualWidth - 487));
}
***Notice: I allow my scrollviewer to loop in both way.

WP7 AutoCompleteBox Popup position

The toolkit:AutoCompleteBox in WP7 "opens" the Popup with results above the textfield. I need this Popup to be below the TextBox.
Wasted hours on this. finally, i've written my own autoCompleteBox with a ListBox opening below.
Just out of curiosity, pleas tell me how it shold be with the "original" one
I faced the same issue and this is how I solved it, using Perspective Transforms and RenderTransform in the borders of Popup in the default template.
<Popup>
<Grid>
<Border>
<Border.Projection>
<PlaneProjection GlobalOffsetX="-10" GlobalOffsetY="37" CenterOfRotationY="1" CenterOfRotationX="0" RotationX="180"/>
</Border.Projection>
<Border>
<Border.Projection>
<PlaneProjection RotationX="-180"/>
</Border.Projection>
<ListBox/>
</Border>
</Border>
</Grid>
</Popup>
Change GolbalOffsetX and GlobalOffsetY according to your textbox height and width.
There is no default property that will define the location for the popup in the AutoCompleteBox control.

WP7 PanoramaItem with Icon/Button next to Header

Windows Phone 7's People hub has an "all" panorama item with "search" and a "new" buttons right next to the header/title.
I can't seem to accomplish this with PanoramaItem in Visual Studio using the standard Panorama control. I don't know enough Silverlight/WPF either to be able to position something manually and control transitions/movement correctly.
How can I set a button (or any object, for that matter) to go alongside the header of a wp7 PanoramaItem?
Thanks!
A PanoramaItem Header doesn't have to be a string. It could be another StackPanel that has a CheckBox in it if you wanted, something like this:
<controls:PanoramaItem>
<controls:PanoramaItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock>Item</TextBlock>
<CheckBox>CheckBox</CheckBox>
</StackPanel>
</controls:PanoramaItem.Header>
<Grid>
<TextBlock>Your Content</TextBlock>
</Grid>
</controls:PanoramaItem>
So you can basically put anything in there that you want. Images, buttons, checkboxes, etc.

Resources