I am trying to do a simple example of the typical slider.value binded to a textblock. I have tried to maintain it so simple that I cannot find what would be the problem here.
I have this simple XAML code and NO code behind:
<phone:PhoneApplicationPage
.......
.......
.......
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" />
</Grid>
</phone:PhoneApplicationPage>
With this code, the slider movement is locked. If I remove the TextBlock binding then all works fine (but no value on TextBlock, of course) :-)
It seems so simple that I know something very, very stupid is locking my brain.
I have tried the 'Binding' in anyway you can imagine, but no luck at the moment.
Any help and any explanation, please ?
Try setting maximum and minimum properties on your slider.
OK, try a stackpanel for your layout:
<StackPanel x:Name="LayoutRoot" Background="White">
<Slider x:Name="mySlider" />
<TextBlock Text="{Binding ElementName=mySlider, Path=Value, Mode=OneWay}" Height="30" />
</StackPanel>
I think the issue is that your controls are sitting on top of each other.
Related
I have a listbox with the following structure. Data displays well and no issues there. I want to get some animation affect for the StackPanel, but since it is inside the DataTemplate, I am not able to use Blend to get my desired animation affect.
I guess I can write an event handler and code for that, but is that the best approach of achieving animation for ListBox items?
<ListBox Height="600" ItemsSource="{StaticResource learn}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="100" Orientation="Horizontal">
<TextBlock Width="0" Text="{Binding ID}" />
<Image Height="100" Width="100"/>
<StackPanel Orientation="Vertical" Width="319" VerticalAlignment="Center">
<TextBlock TextWrapping="Wrap" Text="{Binding Text}" Margin="6,0,0,0" FontSize="29.333" />
<TextBlock TextWrapping="Wrap" Text="{Binding Description}" Margin="6,0,0,0" FontSize="16"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Okay, all you need to do is to create a new user control and add all your animations to that user control and start animation where you want. In the list box data template, create an instance of that data template.
Steps to reproduce:
Create a new User Control in the project.
Give in the animations to the animations to that user control in blend.
Add the user control in data template.
Start the animations where ever you want.
Alternative: Without creating a new user control you can specify animations by creating storyboard and applying required transformations. this gives a common animation to all the list box items.
How I can get behavior of form in windows Phone like Settings >> Mobile Network >> EditAPN. In this page it have many textboxes in scrollviewer. When user taps on any textbox and its get focus then the page scrolls up and header remains constant and SIP keyboard shown. And when user lost the focus from this text box then page comes to its normal state and SIP keyboard hides and header remains unchanged. I want to achieve this behavior. I searched a lot but did not get any solution.
Strange to see scrollviewer behavior in WP7.
Any help will be great and appreciable.
Thanks in advance.
Note: If there is any tricky solution, please provide sample code.
Here is my sample code.
<Grid x:Name="ContentPanel" Grid.Row="1" >
<ScrollViewer x:Name="Scroller">
<StackPanel Orientation="Vertical">
<TextBlock Text="Name"/>
<TextBox x:Name="txtName" />
<TextBlock Text="Email"/>
<TextBox x:Name="txtEmail"/>
<TextBlock Text="Phone"/>
<TextBox x:Name="txtPhone" />
<TextBlock Text="Adress"/>
<TextBox x:Name="txtAddress" />
</StackPanel>
</ScrollViewer>
</Grid>
When I try to scroll down, it does not move down fully and seems to be worked as elastic.
Edit:
This example, I have already seen and not useful in my case. I have 4 textboxes and my focus is on first textbox and keypad comes and hide last textbox. If user wants to go to last textbox and wants to enter input, it does not scroll fully and works as elastic. For this user has to press on some other part of screen, then he enter in last box. I saw in WP7 app in Settings -> Mobile Network -> EditAPN. There are 4-5 text boxes and these scroll perfectly. Don't know Which control or workaround MSFT used.
Maybe I am wrong, but why not using a simple grid and a listpicker control. You will need the Windows Phone Toolkit for this (Nuget Here).
The first Row of the grid contains the Header and will not change.
The second Row contains what you want (scrollview, listpicker, ...)
Here is a very basic example :
<phone:PhoneApplicationPage
x:Class="PhoneApp3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="PageTitle" Text="MY HEADER" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<toolkit:ListPicker>
<toolkit:ListPickerItem Content="aaa" />
<toolkit:ListPickerItem Content="bbb" />
<toolkit:ListPickerItem Content="ccc" />
</toolkit:ListPicker>
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Edit :
When SIP keyboard is rendered, PhoneApplicationFrame.TranslateTransform.Y is set to specific values (-259 in landscape orientation, -339 in portrait orientation). To update layout, we’ll just set top margin to the specified value(-s) and after that Silverlight layout system will fix the issue.
This example may help you.
I using the toolkit which provide the MultiSelectionList control in wp7, I am trying to bind the names to the multiselectItem using the property ItemsSource in C#.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="Please select the satellites from the list:-" />
<toolkit:MultiselectList Name="multiSelectionList">
<toolkit:MultiselectItem Content="{Binding Name}" />
</toolkit:MultiselectList>
</StackPanel>
</Grid>
But I got this error.
Items collection must be empty before using ItemsSource.
I tested the service in other parts of the app and it is working with no issues.
Please advise me.Thanks,
You're adding an item to the MultiSelectList when you do:
<toolkit:MultiselectItem Content="{Binding Name}" />
By the time you assign the ItemsSource, which I assume you're doing in the code-behind somewhere, there is already an item in the list (the one above). This is why the error is getting thrown. You could manually clear the list before setting the source, but that's not necessarily considered good practice. What you could do instead is create a DataTemplate, not an actual instance of a MultiSelectItem. I'm not familiar with this control, but try:
<toolkit:MultiselectList Name="multiSelectionList">
<toolkit:MultiSelectList.ItemTemplate>
<DataTemplate>
<toolkit:MultiselectItem Content="{Binding Name}" />
</DataTemplate>
</toolkit:MultiSelectList.ItemTemplate>
</toolkit:MultiselectList>
I have a design issue with my listbox on my view.
Currently it has following DataTemplate as ItemTemplate:
<DataTemplate x:Key="MovieItemTemplate">
<StackPanel>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="5" Margin="3" Height="215" Width="140">
<Image x:Name="MovieCover"
toolkit:TiltEffect.IsTiltEnabled="True"
Margin="0"
HorizontalAlignment="Center"
Width="140"
Height="210">
<Image.Source>
<BitmapImage UriSource="{Binding Cover}" CreateOptions="BackgroundCreation"/>
</Image.Source>
<interactivity:Interaction.Triggers>
<interactivity:EventTrigger EventName="Tap">
<gsextra:EventToCommand Command="{Binding MainViewModel.MovieItemSelectedCommand, Source={StaticResource Locator}}"
PassEventArgsToCommand="True"
CommandParameter="{Binding MovieID}"
></gsextra:EventToCommand>
</interactivity:EventTrigger>
</interactivity:Interaction.Triggers>
</Image>
</Border>
</StackPanel>
</DataTemplate>
So as you can see, I have an image inside it that will download his content from the internet through an URI. Thanks to the new mango option BackgroundCreation ( cfr. http://blogs.msdn.com/b/slmperf/archive/2011/06/13/off-thread-decoding-of-images-on-mango-how-it-impacts-you-application.aspx ) it load in background.
But I have a very large collection and even though I do 'paged' binding of the Listbox Source, I notice my memory keeps on going up, until it has consumed everything and the app crashes.
Then, I noticed this http://blog.wpfwonderland.com/2011/01/17/images-and-memory-leaks-in-windows-phone-7/ so it would seem I need to cleanup the image itself, because of the image caching feature in wp7.
When I do this, everything works great in reference to memory, BUT now each time the user 'pages' through the listbox the images need to be redownloaded, resulting in an app that is almost not usable... because the user keeps on waiting for those images.
Any tips/tricks on how to go about this?
I also tried the DefferedLoadListBox
When implementing a ListPicker, it will crash when there are enough items to make it full screen. It does not crash if there are only 2-3 items and it just expands. I get an ArgumentException, 'The parameter is incorrect'
<toolkit:ListPicker Grid.Row="1"
ItemTemplate="{Binding lpkItemTemplate}"
FullModeItemTemplate="{Binding lpkFullItemTemplate}">
<toolkit:ListPicker.Items>
<toolkit:ListPickerItem>1</toolkit:ListPickerItem>
<toolkit:ListPickerItem>5</toolkit:ListPickerItem>
<toolkit:ListPickerItem>10</toolkit:ListPickerItem>
<toolkit:ListPickerItem>15</toolkit:ListPickerItem>
<toolkit:ListPickerItem>20</toolkit:ListPickerItem>
<toolkit:ListPickerItem>30</toolkit:ListPickerItem>
</toolkit:ListPicker.Items>
</toolkit:ListPicker>
Templates are
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="lpkItemTemplate">
<TextBlock Text="{Binding Content}" />
</DataTemplate>
<DataTemplate x:Name="lpkFullItemTemplate">
<TextBlock Text="{Binding Content}" />
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
I've looked at examples and I havent seen anything different than what I have here and it works. The only difference is the examplesa re doing data binding. I've tried steping through the control's code but I don't see anything that pops. It throws the exception in the base class 'ItemsControl' after the 'OnManipulationCompleted' event handler has completed in the ListPicker.
Any ideas what i'm doing wrong?
FullMode only works with DataBinding, and not with static ListPickerItems.