WP7 ScrollViewer Bug When Content Height > 2000px - windows-phone-7

In my project, I use ScrollViewer to show some long height infomation.
I use like this:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
But, unfortunately, the rectangle does not show completely when scrollView bar's vertical height > 2000.
I have tested without Grid as ScrollViewer's content, only with Rectangle and the result is the same.
And the bug is also happens with Width.
Any you have any idea what's the workaround? How to deal with it?
This post is the same issue without any fixes.
The test full xaml is :
<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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Rectangle Height="3000" Fill="LightBlue" Width="440"/>
</Grid>
</ScrollViewer>
</Grid>
</Grid>

If it just a text, you could use this custom control: scrollable textblock. Otherwise, divide your content into blocks with size < 2048.
UPD:
2048px is a limit for GPU cached graphics. You can use a lot of controls (< 2048) inside a scrollviewer (total > 2048). In some cases all is fine, but in some it doesn't
For example:
<ScrollViewer Background="#4FFF6060">
<Grid Background="#FFFF8A8A" Width="240" HorizontalAlignment="Left" d:LayoutOverrides="Height">
<Rectangle Fill="Blue" Height="4000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Left"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right"/>
<Rectangle Fill="Red" Height="2000" VerticalAlignment="Top" Width="120" HorizontalAlignment="Right" Margin="0,2000,0,0"/>
</Grid>
</ScrollViewer>
In this case blue rectangle cropped at 2048px, but two rectangles with 2000px height placed one above the other looks fine.
The second example uses StackPanel to show 4000px area and it works too
<StackPanel Background="#FFFF8A8A" HorizontalAlignment="Right" Width="240" d:LayoutOverrides="Height">
<Rectangle Fill="#FF88FF00" Height="2000" Width="240" HorizontalAlignment="Right"/>
<Rectangle Fill="#FF88FF00" Height="2000" VerticalAlignment="Top" Width="240" HorizontalAlignment="Right"/>
</StackPanel>

Max. texture size on WP7 is 2048x2048. The rectangle height exceeds this limit. Once you decrease it below this limit, it starts working.
This code is better suited to experiments as you can identify bottom border:
<Grid Grid.Row="1" Height="630">
<ScrollViewer Background="Red" Grid.Row="1">
<Grid>
<Border Height="2048" BorderBrush="Blue" BorderThickness="5">
<Rectangle Height="2000" Fill="LightBlue" Width="440"/>
</Border>
</Grid>
</ScrollViewer>
</Grid>
Once you increase the Border height, the bottom part will disappear.
On the other hand, I have to say that this behavior surprises me, too. I would expect that system decomposes large objects into smaller textures, but apparently WP7 designers decided not to do so, but rather manifest UI bug.

Related

xaml - allign one control to left, another to right, but take all width of the screen

I have something like this:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="2">
<Image Width="64" Height="64" Source="{Binding someIcon}"></Image>
<StackPanel Orientation="Vertical" Margin="15,1,0,1">
<TextBlock Text="{Binding someText}" FontSize="30" />
<StackPanel Orientation="Horizontal">
<TextBlock Text="Some Text"/>
<TextBlock Text="{Binding someText2}"/>
</StackPanel>
</StackPanel>
</StackPanel>
<CheckBox
Content=""
Tag="{Binding someName}"
IsChecked="{Binding checked}"
Checked="someChecked"
Unchecked="someUnchecked"/>
</DataTemplate>
</ListBox.ItemTemplate>
in the ListBox.
I need to allign StackPanel to the left and CheckBox to the right. I need to take all possible screen width and place the CheckBox just at the right edge of the screen. The screen width can change, because it's an Universal Windows App.
How can I do it?
I've tried using RelativePanel and Grid, but without success. When I use Grid with 3 columns like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
I get the CheckBox just after the StackPanel, not at the end of the screen.
When I however use RelativePanel I get CheckBox in place of StackPanel, even though I use RelativePanel.AlignRightWithPanel="True" in CheckBox, RelativePanel.AlignLeftWithPanel="True" in StackPanel and HorizontalAlignment="Stretch" in RelativePanel.
Do you have any ideas?
Try this
When you do HorizontalContentAlignment to stretch items will take whole ListBox width
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>
....
</ListBox>

Windows Phone 8 Panaroma Application Tile Title

I am trying to write on panaroma application in tile image title.
And I can not see like a below code in .xaml page;
<image Title="blabla" ...>
This is my code;
<phone:PanoramaItem Header="Kişisel Bilgiler" Orientation="Horizontal">
<!--Double wide Panorama with large image placeholders-->
<Grid>
<StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
<toolkit:WrapPanel>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
</toolkit:WrapPanel>
</StackPanel>
</StackPanel>
</Grid>
</phone:PanoramaItem>
But I want to
Thank is advance.
(Sorry my language)
Image control doesn't have any property to display text similar to Tile's title. You need to add other control to display the title, for example using TextBlock :
<toolkit:WrapPanel>
<Grid>
<Border BorderBrush="AliceBlue" BorderThickness="1" Margin="12,0,0,0">
<Image Width="173" Height="173" Source=".\Assets\cinsiyet.png" Tag="img_deneme" Margin="0,0,0,0" x:Name="img_cins" MouseEnter="Image_MouseEnter" />
</Border>
<TextBlock Margin="0,150,0,0" Text="Tile Title" Foreground="White"/>
</Grid>
</toolkit:WrapPanel>
You may also want to try HubTile control as an alternative.

XAML alignment in Windows 8 Store App

Not being at all familiar with XAML, I'm trying to get a very simple layout designed where the main page consists of two parts:
On the left, I want an image that will scale to fit the available height but maintain its aspect ratio.
On the right, I want a panel that will eventually contain text and controls - at the moment I just have text.
I can get the image to behave ok by using a ViewBox but I can't seem to get the right side of the screen to fill the remaining gap. See screenshot:
What I want is for the area that contains the text to stretch to the right with the text centred within it.
The relevant XAML code is:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<Viewbox HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Orientation="Vertical">
<TextBlock Text="ABC Viewer"
TextAlignment="Center"
FontSize="48"></TextBlock>
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
This is taking me far too long to figure out. Can someone please put me out of my misery?
Try this :
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0"
HorizontalAlignment="Right">
<Image Source="Assets/ABCImage.png"></Image>
</Viewbox>
<StackPanel Grid.Column="1">
<TextBlock Text="SEM Viewer"
TextAlignment="Center"
FontSize="48" />
<TextBlock Text="Test application"
TextAlignment="Center"
FontSize="24" />
</StackPanel>
</Grid>

C# windows phone -Alignment in xaml ListBox.ItemTemplate

i Would like to make simple ListBox. Each line should contain 2 controls, one aligned to the left the other to the right, thats all :)
I tried multiple approaches but nothing worked. My code is following
<StackPanel Grid.Row="1" Margin="12,0,12,0" Grid.Column="0">
<ListBox Name="ListBox" Margin="12,0,12,0" ItemsSource="Exercises" HorizontalContentAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width=">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
(Two textblocks are just for demonstration, in real application i'd like to bind one text block to real data, instead of second ill use button.)
When ill compile this, both textblock are aligned to the left, in emulator, it seems like one textblock with text "abcdef".
Any idea how to align one text block to the right and the other one to the left?
many thanks :)
By default the ListBoxItem does not fill the space it is given. It aligns itself and the content to the left. To ensure that the content of your ListBoxItem spans the entire width, you need to change the ItemContainerStyle
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Now the content will span the available width. If you wish to use a StackPanel as in your example, make sure to set it's HorizontalAlignment also. The StackPanel also does not fill in the available space given
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
However, I would recommend using a Grid and defining two columns
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="abc" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="def" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</Grid>
</DataTemplate>

Windows Phone 7 - how to center a popup in a scrollviewer larger than the screen?

I hope someone can help with what should be a very simple problem to solve... I've spent hours on this and it's just driving me crazy!
In my Silverlight WP7 app I have a ScrollViewer control that is 600x600 and offset to the left by 60 pixels (to center it horizontally) and in this I have a number of images overlayed on each other (see the code below).
I also have a Popup control defined which pops up while the images are downloading from the web but I just can't get the PopUp centered - and even worse, the text inside it is NEVER centered even though I've specified it to be... it always justifies left no matter what I try.
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="100" />
<Popup x:Name="StatusPopup" Margin="-200,-100,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBox Text="...loading..." Width="200" Height="60" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Popup>
</Grid>
</ScrollViewer>
</Grid>
I've tried adding a Grid inside the popup to explicitly control the layout with no joy: the darned PopUp just won't center on the screen and the text inside won't either.
Can anybody suggest what I need to do to fix this?
TIA...
Mike
I've managed to get the Popup content using the following XAML (I added a couple of fixed background colors to show where different elements are):
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="600"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="1" Margin="-60,0,0,0" Height="600" Width="600" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Auto">
<Grid x:Name="RadarImages" Background="AliceBlue" Margin="0,0,0,0">
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgBack" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgObs" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Image Height="600" Margin="0,0,0,0" HorizontalAlignment="Left" Name="imgLoop" Stretch="Fill" VerticalAlignment="Top" Width="600" Opacity="1" />
<Popup x:Name="StatusPopup" IsOpen="True">
<Border Background="Red" Height="768" Margin="60,0" Width="480">
<TextBox Text="...loading..." HorizontalAlignment="Center" VerticalAlignment="Center" Background="Black" Foreground="White" BorderBrush="White" BorderThickness="3" />
</Border>
</Popup>
</Grid>
</ScrollViewer>
</Grid>
Bascially, you can't use the Popup itself for position or alignment, you have to work with the root element inside the Popup instead.
One other thing: the valid range of values for Opacity are 0 to 1, not 100.

Resources