I have a WP7 project that has been giving me the runaround for too many days now. Any help in sorting this out would be hugely appreciated.
Basically, I have a ScrollViewer. Inside I have an ItemsControl. The ItemTemplate for the ItemsControl contains an Expander (adapted from the Silverlight 3 Toolkit). The Expander ContentTemplate has an ItemsControl.
Basically, what is happening is that when I expand one of the Expander items and that ItemsControl contains a larger amount of items (> 25), the "rendering" of the list appears to be truncated. There is a large empty space where the items should go, so there appears to be space reserved for them, but try as I might, they simply get truncated.
I've tried with three different types of Expander controls including the ExpanderView. Same results no matter what I try.
Here is a screenshot: http://www.IntuitiveWebDesigns.com/Photos/truncation.png
Here is a snippet from the XAML I am using.
<ScrollViewer Grid.Row="1">
<ItemsControl ItemsSource="{Binding Publishers}" Margin="0,10,0,0" Height="Auto">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Black" Opacity="60" OpacityMask="#8A000000" CornerRadius="10">
<controlToolkit:Expander ExpandDirection="Down" Header="{Binding}" Content="{Binding}" Height="Auto">
<controlToolkit:Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding PublisherName}"
Foreground="{StaticResource PhoneAccentBrush}"
FontSize="{StaticResource PhoneFontSizeExtraLarge}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
</DataTemplate>
</controlToolkit:Expander.HeaderTemplate>
<controlToolkit:Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Issues}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding TitleAndIssue}"
Foreground="{StaticResource PhoneForegroundBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
<TextBlock Text="{Binding StrAmount}"
TextWrapping="Wrap"
Margin="0,0,0,0"
Foreground="{StaticResource PhoneAccentBrush}"
FontSize="{StaticResource PhoneFontSizeNormal}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</controlToolkit:Expander.ContentTemplate>
</controlToolkit:Expander>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
You're hitting a limitation of the platform. Specifically that a UIElement can't be larger than 2048px in either dimension. This limitation exists for memory and performance reasons.
Rather than building your own control, try using one of the standard ones, or one from the phone version of the toolkit.
If you really want to use an expander style control, then reserve a smaller fixed size for the scrollable area and virtualize the list that is displayed.
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've got a page design as follows:
The layout is as follows:
<ScrollViewer Margin="0" HorizontalAlignment="Left" Height="360" VerticalAlignment="Bottom">
<StackPanel x:Name="spQueuedWeapons" HorizontalAlignment="Left" VerticalAlignment="Bottom">
<ItemsControl ItemsSource="{Binding QueuedCombinations}" HorizontalAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageName}">
<i:Interaction.Behaviors>
<ex:MouseDragElementBehavior ConstrainToParentBounds="False" />
</i:Interaction.Behaviors>
</Image>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
The problem I'm seeing is that the MouseDragElementBehavior seems to be visually constrained to the bounds of the ScrollViewer.
I want to be able to drag the green boxes to the blue drop target.
The only options I've thought of so far have been to remove the containing ScrollViewer or to simulate the StackPanel layout programmatically.
I'd rather not add manual button based scrolling or programmatic layout if possible.
Does anyone have any ideas?
I have this code in my .xaml file
<ListBox Name="Tracks" Margin="0,0,-12,0" ItemsSource="{Binding AllTracks}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="432" Height="150">
<TextBlock Text="{Binding Name}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Artist}" TextWrapping="NoWrap" Margin="12,-3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Album}" TextWrapping="NoWrap" Margin="12,3,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
<TextBlock Text="{Binding Duration}" TextWrapping="NoWrap" Margin="12,6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I put data in my list like that(MediaLibrary library = new MediaLibrary();
Tracks.ItemsSource = library.Songs;).
I can see data on my list but when i select something, the selection doesn't highlighted,
how i can fix it? Thanks...
The phone applies the Accent colour as Foreground to the selected element's VisualTree. But since you're overriding the style for all the elements, it's likely that the colour won't be applied.
Try with a regular TextBlock without any Style, and you'll see.
Here: Windows Phone 7 - Setting style for specific control within selected ListBoxItem I've written a bit in response to a similar problem. Please read at least the original post/problem and my answer to it. It may look overwhelming at first as there's not a small amount of extra XAML, but in fact it is quite easy to follow and once you look at it as a several different aspects (template, styles, visualstates) - it turns out to be .. quite short, paradoxically. Once you read through it, you will probably notice that your problem is almost exactly the same, with the minor difference that the 'animated' property/target from foreground of textbox to a background of the panel..
I've spent a lot of time trying to understand and to implement something that looks easy.
In my WP7 application, I have a button that displays a context menu after a long tap. As this context menu is bound to a list, the number of items can be huge. Until now, I haven't been able to add a scroll viewer around my data template. But I have tested that if the data template was not there, it should work fine.
Here is my XAML:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu ItemsSource="{Binding}">
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate >
<toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
I tried to add a ScrollViewer almost everywhere (before the tag: <toolkit:ContextMenuService.ContextMenu>, before the tag <toolkit:ContextMenu ItemsSource="{Binding}">,...) but nothing works
I also tried to use an attached property in my tag:
<toolkit:ContextMenu ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Visible">
but it doesn't work either.
But if I don't use a data template like:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<ScrollViewer>
<stackPanel>
<toolkit:MenuItem Header="Item1"/>
<toolkit:MenuItem Header="Item2"/>
<toolkit:MenuItem Header="Item3"/>
<toolkit:MenuItem Header="Item4"/>
</stackPanel>
</ScrollViewer>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
it works fine.
Did I miss something?
You will want to put your ScrollViewer in the Template and a StackPanel in your ItemsPanelTemplate, so something like this:
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu ItemsSource="{Binding}">
<toolkit:ContextMenu.Template>
<ControlTemplate TargetType="toolkit:ContextMenu">
<Border>
<ScrollViewer>
<ItemsPresenter/>
</ScrollViewer>
</Border>
</ControlTemplate>
</toolkit:ContextMenu.Template>
<toolkit:ContextMenu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</toolkit:ContextMenu.ItemsPanel>
<toolkit:ContextMenu.ItemTemplate>
<DataTemplate >
<toolkit:MenuItem Header="{Binding Path=Name}" Click="MenuItem_Click"/>
</DataTemplate>
</toolkit:ContextMenu.ItemTemplate>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
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.