So, I'm tryging to use a progress bar in my WP7 Panorama aplication.
There is one page, that is downloadidng data from the web, so I want to indicate that my App is doing something with ProgressBar
<controls:PanoramaItem Header="news">
<Popup Name="myWeatherPopup" IsOpen="False" Width="404" Height="Auto" Margin="0,136,4,293">
<StackPanel>
<ProgressBar Height="Auto" IsIndeterminate="True" Width="400" />
<TextBlock Text="Loading" HorizontalAlignment="Center" Foreground="Gray" />
</StackPanel>
</Popup>
</controls:PanoramaItem>
It basically works as it should. However, there is one tiny (and anoying bug).
The first... run (?) of the dots appears on every panorama item, just under header. After that, it returns on its normal position under news item.
The same thing happens on emulator and Lumia 800.
Image
Have you tried without the Popup, by just setting the Visibility property on the StackPanel?
Related
I have a UserControl that needs to contain a bunch of controls on top and a LongListSelector below them. Total height of the whole UserControl may (and almost always will) exceed the screen height and in that case a whole UserControl must be scrollable.
My current setup is as follows:
<staff:UserContentControl
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:MyApp.Controls"
xmlns:staff="clr-namespace:MyApp.Helpers"
x:Class="MyApp.Controls.RemoteHomePage"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}">
<ScrollViewer>
<ScrollViewer.Content>
<StackPanel>
<TextBlock Txt="Text1" Sign="#" />
<TextBlock Txt="Text2" Sign="#" />
<controls:Divider />
<TextBlock Txt="Text3" Sign="~" />
<TextBlock Txt="Text4" Sign="~" />
<controls:TextDivider Text="Divider text" />
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</StackPanel>
</ScrollViewer.Content>
</ScrollViewer>
</staff:UserContentControl>
This solution satisfies my needs but also there's a big problem: currently LongListSelector takes really a lot of time to load when amount of items it contains is reasonably large. It takes 8 seconds to process 300 items and during that time the whole UI is blocked. If I remove everything but LongListSelector, like so:
<staff:UserContentControl
...>
<phone:LongListSelector ItemsSource="{Binding Items}">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" />
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</staff:UserContentControl>
then LongListSelector loads almost immediately even with significantly larger amount of items. But obviously I need those other controls above it so the question is what can I do solve this issue?
(Also related question: I was worried that LongListSelector inside ScrollViewer could cause double scrolling or something like that but eventually everything turned out just fine in this regard. I'm not sure if LongListSelector somehow knows that it is inside other scrollable control or if something else happens that I'm not aware of. Some explainantion why it works fine, although very slow, would be much appreciated.)
Don't use scroll viewer since it will make the longlistselector think it has an infinitely tall screen available and render all its items.
Instead to solve your usecase use the Header and Footer properties to add data above or below your list items.
You can't force ScrollViewer to virtualize LongListSelector items.
So you need to mimic it behaviour by LongListSelector only.
Make the first item contains all you required elements form StackPanel (1'st itemtemplate). And other elements will be basic LongListSelector elements (2'nd itemtemplate).
Here is explanation how to set different templates to the items: Styling a selected ListViewItem in Windows 8 CP
I am working on an application which includes a registration form. The form contains multiple text entry boxes, and so a ScrollViewer is used to allow them all to be displayed on one page.
The following is a stripped down example of the XAML code I am using:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="SCROLLVIEWER TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="registration" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<ScrollViewer Grid.Row="1">
<StackPanel>
<TextBlock Text="Hello" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello1" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello2" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello3" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello4" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello5" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello6" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello7" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="Hello8" Margin="12,0,0,0"/>
<TextBox />
<TextBlock Text="END" Margin="12,0,0,0"/>
<TextBox />
</StackPanel>
</ScrollViewer>
</Grid>
(Note that the ScrollViewer is inside a grid cell, which means that the title panel should stay OnScreen at all times)
The scrolling works perfectly fine, so that is not an issue. However, when the user selects a TextBox to enter data (i.e. the soft keyboard opens), the system pushes the content of the entire page around (including the registration title panel), which is not expected behaviour.
[See the People app on Windows Phone and try adding a new contact. This contains a similar structure, but the ScrollViewer behaves correctly by only pushing content in the scrollviewer up]
Test Cases
Select a TextBox that is visible near the top of the screen, to open the keyboard.
Attempt to scroll to the bottom of the page with keyboard open.
Items at the bottom of the page are unreachable.
or
Select a TextBox that is visible near the bottom of the screen.
Content of entire page is pushed up.
Attempt to scroll to the top of the page with keyboard open.
Items at the top of the page are unreachable, and title panel never comes back into view until keyboard is closed.
Any help on resolving this issue would be appreciated. Thanks.
The problem is that the ScrollViwer height is not modified after the keyboard appears so it becomes clipped. One solution would be to modify the height of the scrollviwer (according to the keyboard height) and then reposition it (this might give you some headaches).
Another problem is knowing when the keyboard appears - you could register for the GotFocus/LostFocus events on all your TextBoxes but it's not a great solution. This might help you: http://blogs.msdn.com/b/jaimer/archive/2010/11/05/guessing-if-the-sip-is-visible-in-a-windows-phone-application.aspx
Hope this helps a little :)
I think you can solve this by coming at the problem from another angle. The phone will scroll up the page so that the SIP (software keyboard) never covers up the TextBox which has focus.
However you can force the SIP to hide by detecting touch events on the top element contained in your ScrollViewer, e.g.:
<ScrollViewer Grid.Row="1">
<StackPanel ManipulationDelta="OnScrollViewerGridManipulationDelta">`
Then, by giving the focus to a hidden button (0x0 pixels in size) this will force the SIP to close. Then it will be possible for your users to scroll up and down the scrollviewer as expected...
private void OnScrollViewerGridManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
// This will hide the SIP if it is currently showing.
// We can't do this directly, but we can force this by taking focus away from any of the TextBoxes that may have it.
this.hiddenButton.Focus();
}
I've had the same issue with an app I've developed and the way I dealt with it was to find out the auto height of the panel containing the input textboxs and then manually set the height and add approximately 400 - 500 px to the bottom to make it scroll nicely. The effect is quite smooth and will not make your UI look "hackish" IMHO.
In your case you will have to find out the automatic height of the LayoutRoot Grid and then on RowDefinitionof Row 1 set the height manually - remembering to add an extra 400px (or whatever looks appropriate in your situation).
For ease of input I then handled each OnKeyDown event of each TextBox to change the focus to the next TextBox upon hitting Enter. On the last TextBox I set the focus to this.focus() which sets focus to the Page and hides the SIP.
Have a look at my small library please - https://siphelper.codeplex.com/
It modifies height of scrollviewer and content can be scrolled to the topmost/bottommost point.
If you have any suggestions - feel free to contact me.
Just started with developing for WP7 and came across the following. I have a pivot application with a few pivotitems. On the first pivotitem (see code below) I want to be able to adjust a lot of settings. For this question all items to be set are called 'TextBox' and the choice in the ListPicker is either A,B or C.
Now if I do NOT use the ScrollViewer and I tap any of the listpickers I get to see all three options BUT I can not scroll through all listpickers.
If I DO use the ScrollViewer, I CAN see all listpickers but only the top one (that's visible) will expand and give me the options A,B and C, they others stay collapsed.
How can I get every listpicker to expand and show me the avaiable options AND be able to scroll to every listpicker on the page?
PS In code below copy the stackpanel between start and end about 15 times.
Thanks in advance for any help!
<controls:PivotItem Header="blabla">
<ScrollViewer>
<StackPanel Margin="0,0,36,0" VerticalAlignment="Top" d:LayoutOverrides="Width">
// start
<StackPanel Orientation="Horizontal">
<TextBlock TextWrapping="Wrap" Text="TextBox" Width="80" TextAlignment="Right" Margin="10,22,20,0" HorizontalAlignment="Right" VerticalAlignment="Top" />
<toolkit:ListPicker Margin="0" Width="275">
<toolkit:ListPickerItem Content="A"/>
<toolkit:ListPickerItem Content="B"/>
<toolkit:ListPickerItem Content="C"/>
</toolkit:ListPicker>
</StackPanel>
// end - copy/paste code code between start and end about 15 times right here
</StackPanel>
</ScrollViewer>
</controls:PivotItem>
This is, apparently, a common issue with Listpicker and ScrollViewer. You can find a workaround here
Should anybody stumble upon this, this has been fixed since the november 2011 release of the wP7 silverlight toolkit.
In Windows Phone 7, I'm looking for simple code to set the background and foreground for a TextBox with inputfocus.
I'm doing this in order to comply with the different themes, and my application visually uses background canvases and other controls which need a standard colorset for controls.
NOTE: Regular foreground, background and borderbrush are fine, and set easily:
<TextBox Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="Black"
Canvas.Left="297" Canvas.Top="392" FontSize="20" Height="63" Name="textBox8"
Text="10" Width="126" />
If you want to change the appearance of a control in different states, then you should modify the Style for that control and change the values by using the VisualStateManager as illustrated in the answer to this question: Windows Phone 7 (WP7) Change a button's background color on click
In a similar but slightly different question here on SO, I found a solution, using a Border:
<Border Background="{StaticResource KeyToDesiredBackgroundBrush}">
<TextBlock Text="Forget Password" Height="19" Width="156" />
</Border>
My specific solution ended up being the following:
<TextBlock Canvas.Left="73" Canvas.Top="405" FontWeight="Bold" Foreground="White" Height="30" Name="textInflationLabel" Text="Gasoline Inflation (%):" TextAlignment="Right" Width="224" />
<Border Name="BorderInflation" Background="#BFFFFFFF" Height="45" Width="104" Canvas.Left="308" Canvas.Top="395">
<TextBox Background="#BFFFFFFF" BorderBrush="#BFFFFFFF" Foreground="Black" FontSize="20" Margin="-10,-10,0,0" Height="64" Width="125" Name="tbInflation" Text="12" />
</Border>
Frankly, this seems a little hokey. Hopefully in the future, there are simpler ways to perform such standard tasks.
I want to resize the page when the keyboard appears on the screen.
I was looking for any clue all day but I can't find anything.
In my case. I want to have full page TextBox and some buttons under it.
<Grid x:Name="RootLayout" >
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<ScrollViewer Margin="0" >
<TextBox TextWrapping="Wrap" Text="TextBox" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" Height="698" Width="480"/>
</ScrollViewer>
<Canvas x:Name="RootMenu" Margin="0,1,0,0" Grid.Row="1" />
</Grid>
</Grid>
I use to thing that the first row will change its size automatically, but it doesn't happening.
Please help me.
///// -----------------------------------------------------------------------------
I'm going to dislike this OS! Proposed solution is not good at all. When the keyboard is visible then I can not scroll it down.
Lets say I want just simple TextBox to let users write something. But it is impossible !!
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True">
<shell:ApplicationBarIconButton IconUri="/icons/appbar.check.rest.png" Text="aplay"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<Grid x:Name="RootLayout" >
<ScrollViewer>
<TextBox Text="TextBox" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" />
</ScrollViewer>
</Grid>
There isn't a way to know for sure if the SIP is displayed. Jaime Rodriguez has a post showing how to make a fairly reliable guess of this.
If you want to have "buttons" that are always displayed then the best, and only reliable, way to do this is to use the ApplicationBar.