When I have an Image with VerticalAlignment="Stretch" inside a container such as a HubSection, the Image expands perfectly from top to bottom in my page. I.e.:
<HubSection>
<DataTemplate>
<Image
Loaded="BigPic_Loaded"
ImageFailed="BigPic_ImageFailed"
x:Name="BigPic"
Source="http://i.imgur.com/hd4tFk0.jpg"
VerticalAlignment="Stretch" />
</DataTemplate>
</HubSection>
Then, I want to be able to zoom into the image, for that purpose I am adding a ScrollViewer around the Image. Then, the VerticalAlignment='Stretch' does not work as I expect, the Height of the Image does not match the Height of the page anymore. I.e.:
<HubSection>
<DataTemplate>
<ScrollViewer
ZoomMode="Enabled"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Auto"
VerticalScrollMode="Auto"
VerticalScrollBarVisibility="Auto"
VerticalContentAlignment="Stretch"
MinZoomFactor="1"
MaxZoomFactor="4">
<Image
Loaded="BigPic_Loaded"
ImageFailed="BigPic_ImageFailed"
x:Name="BigPic"
Source="http://i.imgur.com/hd4tFk0.jpg"
VerticalAlignment="Stretch" />
</ScrollViewer>
</DataTemplate>
</HubSection>
Is there any fix for this problem?
The fix is to handle the SizeChanged event of your ScrollViewer and set the size of the BigPic to the size of the ScrollViewer.
Related
I've seen in some apps where the background, which is a static image, is animated to scroll constantly in a single direction. I've looked but haven't found any resources that would aid me in implementing this sort of feature. I have no problem setting the page background, but my issue is when trying to get the image to continuously scroll, say to the left.
Just make One more Grid Inside the Root container of the page at the same lavel as that of your content Grid.
<Grid x:Name="LayoutRoot" Background="Transparent" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Name="GrdBackground" Grid.Row="0" >
// Set this grid background as Image and animate it with animation behavior repeat.
</Grid>
<Grid Name="ContentGrid" Grid.Row="0" Canvas.ZIndex="1">
// do all your UI in this grid.
</Grid>
</Grid>
So now make your UI in ContentGrid and for background animation use GrdBackground. And also there is property called RepeatBehaviour for the Storyboard you can set that to repeat. And it will work.
Hope it give you a clue what has to be done. Cheers :)
I am building a windows phone 8 application with an ApplicationBar to keep the shortcuts and some menu options for the application. I read somewhere that that Height for ApplicationBar is 72px. So I tried with this code
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="72"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewer" Width="Auto" VerticalAlignment="Top" >
<Grid x:Name="ContentPanel" Background="DarkSeaGreen">
<TextBlock Name="tb" FontSize="100" TextWrapping="Wrap"
Text="Hello eveyone. Need some help with AppBar">
</TextBlock>
</Grid>
</ScrollViewer>
</Grid>
I was expecting the ApplicationBar to fit in space provided in the Grid and not to scroll up my layout. But what happened is this. http://i.stack.imgur.com/cjEXD.png
ApplicationBar pushed up the Layout leaving a blank space. I wish to prevent this thing. I want my Application Bar to be visible but it should not scroll up my layout. Please help if you know of any kind of solution to this.
Thanks
You can achieve this by setting the Opacity of your ApplicationBar to a value < 1. Then it overlays your layout and does not push it up. In my eyes Opacity="0.99" is a good option.
But be careful: The ApplicationBar's height is not always 72px. On a 1080p device for example it differs!
To determine the actual height of your Application Bar you can use ApplicationBar.DefaultSize or respectively ApplicationBar.MiniSize.
For more information the the MSDN documentation.
i have gridview in my windwos store app and i want this gridview to fill whole screen - to have 100% width and height.
This is my gridview in xaml:
<GridView x:Name="ItmLView" HorizontalAlignment="Left" Height="751" Margin="0,10,0,0" VerticalAlignment="Top" Width="1361" SelectionChanged="FeedItemClick" ItemTemplate="{StaticResource ItemTemplate}"/>
Can anybody help me please?
Thank You
You can remove properties affecting size and position, like, Height, Margin, Width, etc. and have it like this:
<GridView x:Name="ItmLView" SelectionChanged="FeedItemClick" ItemTemplate="{StaticResource ItemTemplate}"/>
Basically, we just want GridView to have HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" which are the default values, so you don't need to put anything.
I am trying to have a parallax moving background of images behind my actual content. I have added a converter according to John's solution:
http://w8isms.blogspot.com/2012/09/parallax-background-in-xaml-revisited.html
The parallax scrolling part is working fine, although I have stumbled upon a following problem - images outside of the initial app's screen area get cut off, so when I scroll to the right, only white area starts to appear instead of the rest of the images, as in the content of those would have to be redrawn. Does anybody have a clue as to what I could do to fix it?
This is my code:
<Grid Background="White">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<CompositeTransform
TranslateX="{Binding ElementName=MyScrollViewer, Path=HorizontalOffset, Converter={StaticResource ParallaxConverter}}" />
</StackPanel.RenderTransform>
<Image Source="1.jpg"/>
<Image Source="2.jpg"/>
<Image Source="3.jpg"/>
</StackPanel>
<ScrollViewer
x:Name="MyScrollViewer"
HorizontalScrollMode="Enabled"
HorizontalScrollBarVisibility="Auto">
<TextBlock
VerticalAlignment="Center"
FontSize="180"
Text="Hello world! This text will extend to the right." />
</ScrollViewer>
</Grid>
Fixed it! Had to wrap my StackPanel inside a Canvas element.
I am currently working on an app that will work in both a landscape and portrait layout. I am having some trouble dealing with rotating the ads when the orientation changes from portrait to landscape. I'm able to set up a grid and such for the ad to go vertical. I can rotate it but it gets all messed up when I do.
The reason I'm aiming for vertical is it maintains the best real-estate for me.
I'm not sure how much more detail I can offer for my situation, I just want to have the ad rotate 90-degrees so it fits to the "left or right" of the landscape screen. But a rotation forces it's grid to still be a certain width. I then put in some controls in the change function to force the grid to re size, but the add won't sit right in it's Grid after a rotation. Any suggestion or direction in this? Many thanks in advance.
Also, I was thinking to have two ad elements that simply float on the page (not in a grid). And show/hide each depending on the orientation, but that sounded stupid when I thought about it.
Thought I would let you know that I created a control to handle the rotation of the phone and keep ads stationary. Please follow this SO answer for more information.
Use the PubCenter ads with the normal width and height then apply a transform to rotate it 90 degrees.
I wasn't able to find a solution that helped me. I realized what I wanted was as the last commented in my posting realized; to keep an ad's orientation on rotation change.
To accomplish this one could use a LayoutTransform, however they are not available in WP8. Initially I had floating menus that switched on and off on rotation change but would be troublesome on a different sized screen.
The cleanest brute force solution I've found is to make a 3x5 (row-major) grid layout. My main page sits in the center-most grid, ads to the immediate left, right and bottom. And lastly, two filler spaces to the left-most and right-most grid:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto "/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="1" Grid.Column="2">
<phone:Pivot x:Name="ContentPanel">
...
</phone:Pivot>
</Grid>
<Grid Name="AdBottom" Grid.Row="2" Grid.Column="2">
...
</Grid>
<Grid Name="AdRight" Grid.Row="1" Grid.Column="3" MaxWidth="80">
<adduplex:AdControl x:Name="adDuplexAdRight" AppId="?????"
RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="-200,0" Visibility="Collapsed">
<adduplex:AdControl.RenderTransform>
<CompositeTransform Rotation="90"/>
</adduplex:AdControl.RenderTransform>
</Grid>
<Grid Name="AdLeft" Grid.Row="1" Grid.Column="1" MaxWidth="80">
... <As Above, just negated>
</Grid>
<Grid Name="FillerLeft" Grid.Row="1" Grid.Column="0" MinWidth="80" Visibility="Collapsed">
</Grid>
<Grid Name="FillerRight" Grid.Row="1" Grid.Column="4" MinWidth="80" Visibility="Collapsed">
</Grid>
</Grid>
The reason for the Filler elements and their minimum width is to help margin overflow. Without it, you could use the Rendertransform to rotate the element, but when you tried to force it's container down to a size you wanted, it came out incorrectly. This is because the rotation happens after render, so without those extra padded columns to allow for overflow the element gets sliced up upon rotation.
So, doing an overflow and extending the ad's margins allows for it to show up locked in a grid instead of floating. Then I manage switching the ads' visibility and the Filler areas on a rotationchanged event.
This is the easiest solution I've had. Others can search for incorporating the Silverlight LayoutTransformer as seen here. Or, if using one from a paid toolkit. This works so far for my simple app.