Develop Reference

window phone 8.1 build app for different screen size

I'm newer in window phone.
So, i use visual studio 2013 to build first app for window phone 8.1.
I test on emulator WVGA 4 inch, everything is ok.
this is my simple xaml:
<Grid>
<ScrollViewer>
<StackPanel>
<TextBlock x:Name="tbCheck" Margin="10,0,0,0" FontSize="20" Text="check"/>
<ListView x:Name="lvInfo" SelectionChanged="lvInfo_SelectionChanged">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid MaximumRowsOrColumns="5" Orientation="Horizontal" HorizontalAlignment="Center"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Border BorderThickness="3" CornerRadius="3" Margin="10,0,10,10" BorderBrush="#ffffff">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Image Margin="5,5,5,5" Width="100" Height="100" HorizontalAlignment="Left" Source="{Binding ImgInfo}"/>
<StackPanel>
<TextBlock FontSize="28" Text="{Binding NameInfo}"/>
<TextBlock Margin="0,5,0,5" FontSize="18" Text="{Binding AgeInfo}"/>
<TextBlock FontSize="18" Text="{Binding GenderInfo}"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
i know i need to fix for different screen size to make everything like on WVGA 4 inch, but i don't know how to do that.
Please help me.

Few things to point out.
1) Windows Phone OS Automatically sets the FontSize of Items based on the Font Size of OS. You do not need to explicitly Set the FontSize of TextBoxes. However if you want to make FontSize of your items explicitly larger or smaller than others, use Theme Resources
See Table Below:
2) Your first StackPanel Inside DataTemplate HorizontalAlignment is set to Left. Unless it is required by Design, Do not use it. Instead use a Grid
Replace your StackPanel with Grid as below.
<Border BorderThickness="3" CornerRadius="3" Margin="10,0,10,10" BorderBrush="#ffffff">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Margin="5" Width="100" Height="100" Source="{Binding ImgInfo}"/>
<StackPanel Grid.Column="1">
<TextBlock FontSize="{StaticResource PhoneFontSizeLarge}" Text="{Binding NameInfo}"/>
<TextBlock Margin="0,5" FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding AgeInfo}"/>
<TextBlock FontSize="{StaticResource PhoneFontSizeSmall}" Text="{Binding GenderInfo}"/>
</StackPanel>
</Grid>
</Border>
Now your ListViewItem will consume full space on device irrespective of ScreenSize and looks same on all resolutions.

Panel on Control Focus

I am working on a multi-lingual WPF app. The user must provide input for multiple languages at same time. This works but it also moves fields below it.
What I am looking for is somewhat like this:
What I have done so far is below:
<Label Grid.Column="0" Grid.Row="0" Content="Field1" Padding="0" Style="{DynamicResource ControlLabel}"/>
<Label Grid.Column="1" Grid.Row="0" Content=":" Style="{DynamicResource ControlLabelMiddle}"/>
<StackPanel Grid.Column="2" Grid.Row="0" Margin="3" Style="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<TextBox x:Name="txtField1" Height="23" GotKeyboardFocus="txtField1_GotKeyboardFocus" />
<Grid Background="White" x:Name="pnlField1" Visibility="Collapsed" Panel.ZIndex="99">
<Border BorderBrush="blue" BorderThickness="3">
<StackPanel Background="White" Margin="5">
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Label Content="Language2" HorizontalAlignment="Left"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10" Padding="2" >
<Hyperlink Hyperlink.Click="btnClose_Click" x:Name="btnClose" >X</Hyperlink>
</TextBlock>
</StackPanel>
<TextBox x:Name="txtField_Second" Height="23" Width="280" />
</StackPanel>
</Border>
</Grid>
</StackPanel>
When the above control gets focus, my second language panel comes up. But it moves my next row controls down and doesn't look good.

To keep the panels from moving, try placing them in a Grid, rather than a StackPanel. This enables you to specifically define where each element is placed in the Grid. In a StackPanel, elements "stack" on top of each other. As contents of the panels change, the amount of space each element takes up in the "stack" also has the potential to change.

Dynamic height of StackPanel in ListBox custom ItemTemlate, WP8, C#, WPF

I'm programing app that will display data from RSS feed. I need just little view to show small image and description.
I have custom ListBox with one stackPanel where is an and .
Problem is: each item in that listbox has some height, but i need that height to change dynamically by the length of text and size of image.
There's my ListBox:
<ListBox x:Name="gui_listNovinky" SelectedIndex="-1" Height="500" VerticalAlignment="Top" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="0,1,0,0" BorderBrush="Black" Margin="10">
<StackPanel Name="stackpanel" Orientation="Horizontal" Height="500">
<StackPanel Width="435" Height="1000">
<Image Source="{Binding Image}" Height="200" Width="230" VerticalAlignment="Top"/>
<TextBlock Text="{Binding Description}" MaxHeight="290" FontSize="20" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And there is how it look like. You can see that annoying free space below the image and the text. So ugly... :(
I will so thankful for solution. :)
PS: If there is mistakes in my English, dont be afraid to ask and i will explain it. :)

Do not enforce size inside data template. Modified DataTemplate which will solve the problem.
<DataTemplate>
<Border BorderThickness="0,1,0,0"
BorderBrush="Black"
Margin="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Source="{Binding Image}"
Height="200"
Width="230"
VerticalAlignment="Top" />
<TextBlock Text="{Binding Description}"
MaxHeight="290"
FontSize="20"
Grid.Row="1"
VerticalAlignment="Top"
Foreground="Black"
TextWrapping="Wrap" />
</Grid>
</Border>
</DataTemplate>

in win8 store app, how to do fade-in overlay of items in GridView?

I'm a newbie in Win8 development, and I'm stuck in implementing some design that I assume to be fairly easy, since I do have some experience of C#, Javascript, etc.
I created a DataTemplate like this：
<DataTemplate x:Key="Customized250x250ItemTemplate">
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border>
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding State}" VerticalAlignment="Top" Margin="0,10,20,0" FontFamily="Segoe UI" FontSize="12"/>
<Grid x:Name="InfoGrid" Background="Black" Opacity="0">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Nickname" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="1"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Nickname}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="2"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Age" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="3"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Age}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="4"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Race" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="5"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Race}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="6"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Language" VerticalAlignment="Center" Margin="10,0,0,0" FontFamily="Segoe UI" FontSize="17.333" Grid.Row="7"/>
<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Language}" VerticalAlignment="Center" Margin="0,0,20,0" FontFamily="Segoe UI" FontSize="19.333" Grid.Row="8"/>
</Grid>
</Grid>
</DataTemplate>
That Grid with the name "InfoGrid" is designed to be an overlay container of detail information of the current hover GridViewItem, the overlay will fade in nicely when certain GridViewItem is hovered. So I set its Opacity to 0, looking for some approaches to accomplish my design.(I've used this design in websites so many times, but first time in Win8 app)
That's when I feel really trapped, it seems impossible.
I tend to override the template(ItemTemplate & ItemContainerStyle)
It doesn't work out. ItemTemplate is all about Data, ItemContainerStyle is all about sty
le, but they are independent of each other, when PointerOver state is on, it can't do anything to content in ItemTemplate but simply change some useless properties of outer container.
It confuses me why GridView in Win8 Metro doesn't provide Hover event for single GridViewItem, is there anything that I need to know to finish this? Some hints, please.

While ItemContainerStyle might include some visual states that could help you - it might be easier to simply put a UserControl in your ItemTemplate/DataTemplate. Once you create a UserControl - you have easy access to its code-behind and you can handle various events, define visual state and transition between these states whenever you want. Your problem might be though that there is no hover event you could handle with touch input, so you should think about some alternatives - perhaps show your overlay on tap, in the details view when you tap on the item or in a separate panel for selected grid view item. Note that a grid with 10 rows or 8 TextBlocks on top of a 250x250 tile won't be readable to most users.

ScrollViewer scrolls down but snaps back to top

Hi I am trying to use a ScrollViewer but it is not working properly it keeps snapping back to the top when I drag down to view rest of the view.
I've tried setting the height statically to the design height of the page but that does not work either and tried wrapping it in a grid.
here is my xaml
<ScrollViewer Height="768">
<!--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="ApplicationTitle" Text="myApp" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Menu" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" HorizontalAlignment="Left" Margin="0,15,0,0" Name="rectangle1" VerticalAlignment="Top" Click="rectangle1_Click">
<Image Name="image1" Source="/Images/1.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,15,0,0" HorizontalAlignment="Left" Name="rectangle2" VerticalAlignment="Top" Click="rectangle2_Click">
<Image Name="image2" Source="/Images/2.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,138" HorizontalAlignment="Left" Name="rectangle3" VerticalAlignment="Bottom" Click="rectangle3_Click">
<Image Name="image3" Source="/Images/3.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="227,0,0,138" HorizontalAlignment="Left" Name="rectangle4" VerticalAlignment="Bottom">
<Image Name="image4" Source="/Images/4.png" />
</Button>
<Button Background="{StaticResource PhoneAccentBrush}" Height="221" Width="223" Margin="0,0,0,-89" HorizontalAlignment="Left" Name="rectangle" VerticalAlignment="Bottom" IsTabStop="True">
<Image Name="image5" Source="/Images/5.png" />
</Button>
<TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="79,183,0,0" Name="textBlock1" Text="Stop Gap" VerticalAlignment="Top" Width="133" />
<TextBlock Foreground="White" Height="59" FontSize="30" HorizontalAlignment="Left" Margin="285,183,0,0" Name="textBlock2" Text="Time Lapse" VerticalAlignment="Top" Width="150" />
<TextBlock Foreground="White" Height="40" FontSize="30" HorizontalAlignment="Left" Margin="96,413,0,0" Name="textBlock3" Text="Projects" VerticalAlignment="Top" Width="116" />
<TextBlock Foreground="White" Height="50" HorizontalAlignment="Left" FontSize="30" Margin="321,413,0,0" Name="textBlock4" Text="Settings" VerticalAlignment="Top" Width="114" />
</Grid>
<ScrollViewer>
</ScrollViewer>
</Grid>
</ScrollViewer>
I would appreciate if you could help me thanks.

The reason why your current implementation does not work is because your definition essentially tells Silverlight to place all of the Image controls and TextBlock controls into a single grid cell. This means that all of the objects using the grid as a basis of their positioning and scaling, rather than stacking against each other as you seem to expect in your code.
The result of this is the controls overlapping each other, making it look like there is only 1 control visible (you may be seeing 2 controls as you are forcing "bottom" alignment to some items in the grid, which means these will be aligned to the bottom of the cell and won't overlap the other controls that are aligned to the top. This is probably why it looks like only part of the list is being shown by the ScrollViewer).
Josemiguel's answer does explain one suitable solution. Another (and I think) simpler choice would be to use one or more StackPanel controls, which will force the controls to stack against each other in a specified orientation (Vertical is default). It is also possible to stack and nest StackPanels against eachother also.
MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel(v=vs.95).aspx - T - Scroll to the bottom of the MSDN page to see a nice example of a stackpanel using several coloured rectangles.

The best way to achive it is by using some kind of control like WrapPanel and create an empty DataTemplate to dynamically add all the items you want. Here and here you'll find an example.