Scrollviewer bounced back up after scrolled down. - Windows Phone - wpf

I am trying to view my data from the windows phone. The data amount will depend on how many data there is on that specific date. For example 1/March/1010 has 10 informations, I should be able to scroll down to view the others. When I have scrolled, i bounced backed up after i released my finger from the screen. What have I done wrong here. Below is my XAML code:
<!--Pivot Control-->
<phone:Pivot Title="MY APPLICATION">
<!--Pivot item one-->
<phone:PivotItem Header="today">
<StackPanel>
<toolkit:DatePicker x:Name="NowDate"
HorizontalAlignment="Left"
Width="456"
Background="DarkBlue"
ValueStringFormat="{}{0:D}"
Foreground="White"
BorderBrush="DarkBlue"
/>
<TextBlock Name="NoData"
HorizontalAlignment="Left"
Text="No Information Available"
Margin="18,0,0,0"
Visibility="Collapsed"
/>
<!--Double line list with text wrapping-->
<ScrollViewer VerticalScrollBarVisibility="Visible">
<phone:LongListSelector x:Name="MLongListSelector"
Margin="0,0,-12,0"
SelectionChanged="MainLongListSelector_SelectionChanged">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17">
<TextBlock Text="{Binding Title}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Description}"
Name="Description"
TextTrimming="WordEllipsis"
MaxHeight="84"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextSmallStyle}"/>
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</ScrollViewer>
</StackPanel>
</phone:PivotItem>

You have to set the height of the ScrollViewer to be less than that of the Parent Control(In your case StackPanel). If the ScrollViewer is larger than it's child, the child will always bounce back to it's original position.

Related

Buttons in ListBox

I'm doing a list in my project, that needs a button for each item.
How can I get those buttons in ListBox, like in the page "Last calls" of my windows phone?
Thanks.
FunksMaName answer is very much correct except a Small change.....
<ListBox Height="360"
HorizontalAlignment="Left"
Margin="22,23,0,0"
Name="UserDetailsListBox"
VerticalAlignment="Top"
Width="413"> <ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button.Template>
<ControlTemplate>
<Image Source="/Assets/Images/MyImage.png" />
</ControlTemplate>
</Button.Template>
<TextBlock x:Name="txtOverViewHeader1"
Text="OverView"
Foreground="Yellow"
Width="600"
FontSize="28"
Margin="10,0,0,0"
Height="65">
</TextBlock>
</StackPanel>
</DataTemplate></ListBox.ItemTemplate></ListBox>
i just moved image inside button's template instead of content ... That is more accurate..
We may add button for each item of the Listbox like this.
<ListBox Height="360"
HorizontalAlignment="Left"
Margin="22,23,0,0"
Name="UserDetailsListBox"
VerticalAlignment="Top"
Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical"
>
<StackPanel Orientation="Horizontal">
<Button Width="150" Height="50" x:Name="Btn1" Content="Button1" Margin="0,-20,0,0"/>
<TextBlock x:Name="txtOverViewHeader1"
Text="OverView"
Foreground="Yellow"
Width="600"
FontSize="28"
Margin="10,0,0,0"
Height="65">
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Width="150" Height="50" x:Name="Btn2" Content="Button2" Margin="0,-20,0,0"/>
<TextBlock x:Name="txtOverViewHeader2"
Text="OverView"
Foreground="Yellow"
Width="600"
FontSize="28"
Margin="10,0,0,0"
Height="65">
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope it will give you the desired answer
The easiest way to get round buttons is to user Coding4Fun. It is free to use and very simple to install.
You can follow these instructions to use it in your application.
As for the icons, you can either search around for some free packs or you can see if Metro Studio 2 has the icon you need. That tool is also free to use.
Use a circular image, and set the Tap event, or wrap your image around a Button template if you need a buttons specific behavior
<ListBox Height="360"
HorizontalAlignment="Left"
Margin="22,23,0,0"
Name="UserDetailsListBox"
VerticalAlignment="Top"
Width="413">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Template="x:Null" Tap="">
<Image Source="/Assets/Images/MyImage.png" />
</Button>
<TextBlock x:Name="txtOverViewHeader1"
Text="OverView"
Foreground="Yellow"
Width="600"
FontSize="28"
Margin="10,0,0,0"
Height="65">
</TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Listbox showing second item first

I am currently sitting on a Silverlight-Listbox and have some
trouble getting my listBox right.
Its (visually) starts from the second item.
I have to scroll up to see the first one.
Why is this happening and how could I fix this?
<ListBox x:Name="ServingsList"
Foreground="White"
Background="#FFB88A8A"
SelectionChanged="servingSelected"
Margin="0,0,0,297">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="70" Width="432">
<Rectangle x:Name="Linie"
Fill="#FF8D8D8D"
HorizontalAlignment="Right"
Height="2"
StrokeThickness="0"
VerticalAlignment="Top"
Width="380"
Margin="0,-30,0,0" />
<TextBlock x:Name="ServingTitel"
TextWrapping="Wrap"
Text="{Binding name}"
FontSize="21.333"
Margin="50,-60,0,0" />
<Image x:Name="Ribbon"
HorizontalAlignment="Right"
Height="30"
VerticalAlignment="Top"
Width="151"
Source="/TEX/GrayRibbon.png"
Stretch="UniformToFill"
Margin="0,-60,0,0" />
<TextBlock x:Name="Kcal"
TextWrapping="Wrap"
Text="{Binding kalorien]}"
FontSize="18.667"
Height="23"
Margin="0,-92,8,0"
TextAlignment="Right" />
<Button Content="1"
Width="55" Height="55"
BorderThickness="3"
FontSize="18.667"
Padding="-1,-2,0,0"
Margin="-400,-87,0,0"
FontWeight="Bold"
Click="servingButtonClicked" />
</StackPanel>
</DataTemplate>
</ListBox>
You need to check your Margin values - in the main list you're putting 297 pixels of whitespace below your list box. Other elements have weird values too. Expression Blend sometimes messes with the Margins if you change from a StackPanel to a Grid.
e.g:
Margin="0,0,0,297">

Preloader/Progress Bar in ListBox WP7

I would like to add a preloader to a ListBox, I already added a preloader to the whole pivot control, but I only show it for one listbox (I have a listbox for each pivot page) I wish to create separate preloaders for each listbox, has any one done this?
I currently have a preloader control, showing the loading text and progress bar
Is there any way I can attach a progress bar to the listbox, and show it until the data is loaded from the webservice (For each different listbox)?
This is my current preloader:
code preview of my list in xaml
<telerikPrimitives:RadDataBoundListBox HorizontalAlignment="Left" Margin="4,0,0,0" Name="listNearbyBusinesses" IsAsyncBalanceEnabled="True" AsyncBalanceMode="FillViewportFirst" SelectionChanged="listNearbyBusinesses_SelectionChanged" Height="535" VerticalAlignment="Top" Grid.RowSpan="2" Grid.ColumnSpan="2">
<telerikPrimitives:RadDataBoundListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Width="100" Height="100" x:Name="m_Image" Source="{Binding Image}"/>
<StackPanel>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
<TextBlock Text="{Binding Type}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
<telerikInput:RadRating IsReadOnly="True" Value="{Binding Rating}" Margin="12" ItemShapeHeight="20" ItemShapeWidth="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</telerikPrimitives:RadDataBoundListBox.ItemTemplate>
</telerikPrimitives:RadDataBoundListBox>

How can I make a ListBox expand to fit the entire available width?

I need to make the ListBox expand to fit the width it has available. Here's the XAML:
<ListBox Grid.Row="2" Height="400" ItemsSource="{StaticResource Notes}" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Height="90" Margin="5">
<TextBlock Text="{Binding Title}" FontSize="30" />
<TextBlock Text="{Binding Text}" FontSize="15" />
<Rectangle Fill="#1192D4" Height="2" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Please take a look at this post
A ListBoxItem that fills its parent

Listbox on one page calling SelectionChanged event handler of ListBox on AnotherPage?

I have a two pages say Main.xaml and Details.xaml.Each page has a ListBox and I am setting each of it to a collection in ViewModel(Same collection).The strange thing is that when i select an item in Details page it calls the SelectionChanged event handler on Main page and Details page.Is this a bug?
I have solved the problem by unhooking SelectionChanged eventhandler in OnNavigatedFrom() method.
EDIT
In Main.Xaml I have something like below:
<ListBox Name="MainDataListBox" Margin="8,113,8,8" ItemsSource="{Binding DataList}" SelectionChanged="MainDataListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In Details.xaml also I have same kind of ListBox:
<ListBox Name="DetailDataListBox" Margin="8,113,8,8" ItemsSource="{Binding DataList}" SelectionChanged="DetailDataListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Border BorderThickness="3" BorderBrush="#A5FFFFFF" Width="80" Margin="0,20,0,20" Height="60">
<Image Source="{Binding ImageUrl, Mode=OneWay}" VerticalAlignment="Stretch" Margin="0,0,0,0" Width="80" Height="60" Stretch="Fill" />
</Border>
<TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="40" FontWeight="Normal" VerticalAlignment="Center" Margin="30,0,0,0" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Both of the Pages Main and Details have seperate EvenHandlers MainDataListBox_SelectionChanged and DetailDataListBox_SelectionChanged.
The problem is when i select an Item in Details Page MainDataListBox_SelectionChanged is called first and then DetailDataListBox_SelectionChanged.
Also my viewmodel is a static one in App.cs and I am setting the data context of both these pages to same viewmodel.
Thanks and Regards
vaysage
As both listsboxes were bound to the same dataset a change in the selected time in one list would have affected the other.
Obviosuly you're found a work around but I'd recommend having a unique view model for each page. If the page is just a different way of displaying the same data use a single page and alter the display as appropriate. (Creating your own visual states may be a good way to do this.)

Resources