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=开发者_Python百科"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.
精彩评论