Develop Reference

How to resize all of the objects on my wpf form when window is set to maximize

I'm new with WPF forms so this may be easy, but...
I created a new wpf form and added 12 images to it. I set the window to maximize which I believe will fit it to any monitor it is viewed on, right? How do I get my objects shift around so it looks generally the same when in the maximized mode?
The first image is what it looks like in the designer, the second is what it looks like when the program is running.

Obviously, you want to stretch your entire UI. Then ViewBox control is extremely helpful:
<Window ...>
<ViewBox>
<Grid Height="800" Width="600">
<!-- Everything inside viewbox will be stretched as you resize window
Place you UI assuming you have virtual resolution 800x600 -->
</Grid>
</ViewBox>
</Window>

What I usually do is in the editor of the part that you want to expand, select anchor for top and right, as this usually is enough stretching for my purpose. However, play around with the anchor, as that is what will get you the scaling you are looking for. In your case, you might want to anchor all four sides of everything you want scaled.
Edit
Alternately, you can also select stretch for both vertical and horizontal alignment, which will cause the stretching as well. Note, just make sure you use margins to position the images where you want.

Try setting Height & width property as "Auto" , This will automatically resize all the elements on your form.
regards,
Vishal

I suggest you to use WrapPanel to lay out your images:
<WrapPanel>
<Image x:Name="b1" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b2" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="b4" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="b3" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b5" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png" Visibility="Hidden"/>
<Image x:Name="b6" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="blackCircle.png"/>
<Image x:Name="y1" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png"/>
<Image x:Name="y2" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png" Visibility="Hidden"/>
<Image x:Name="y3" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="51" Source="yellowCircle.png"/>
<Image x:Name="y4" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png" Visibility="Hidden"/>
<Image x:Name="y5" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png"/>
<Image x:Name="y6" HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Source="yellowCircle.png" Visibility="Hidden"/>
</WrapPanel>
WrapPanel automatically wraps to new lines if there is not not enough space.
Update:
I've made a test for 5 images, but you can do for 12 images. To do 12 images you should add 12 columns. Let me show an example:
<Window x:Class="SOWpfApplication.MainWindow"
<!--The code omitted for the brevity-->
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="/Images/Back.jpg" Stretch="UniformToFill"/>
<Image Source="/Images/Forward.jpg" Grid.Column="1" Stretch="UniformToFill"/>
<Image Source="/Images/Back.jpg" Grid.Column="2" Stretch="UniformToFill"/>
<Image Source="/Images/Back.jpg" Grid.Column="3" Stretch="UniformToFill"/>
<Image Source="/Images/Forward.jpg" Grid.Column="4" Stretch="UniformToFill"/>
</Grid>
<TextBlock Text="Time is up!" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="50"/>
<Button Margin="10" Grid.Row="2" HorizontalAlignment="Left" Height="42" Width="150" Content="Close" />
</Grid>
</Window>

Windows 8.1 Universal app - Design UI

I am sorry for my bad English.
I want to make a program for windows 8.1 universal. I have a question about design UI. I have a menu in top of my app for choose one option to see full information at the bottom of page. I want to make page that work for all different page size and resolutions. When person change the size of app windows, the top menu must changed like here. (for example when person decrease size of page):
Please save image because It's gif with animation.
I try to use viewbox but viewbox make the button in top menu smaller so button's boarder is changed. (or maybe I don't know how to do it)
It's my code But It doesn't work like my example:
<Viewbox>
<StackPanel Orientation="Horizontal">
<StackPanel x:Name="StackConnectionInfor" Orientation="Horizontal" Margin="10,0,30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandInformation.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Information</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionReport" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandReport.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Reports</TextBlock>
</StackPanel>
<StackPanel x:Name="StackConnectionChart" Orientation="Horizontal" Margin="30,0" Width="300" Background="Red">
<Image Height="75" Width="75" Source="Images/CommandImage/ImageCommandChart.png" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBlock Margin="25,0,0,0" FontSize="35" VerticalAlignment="Center" TextAlignment="Center">Connection<LineBreak/>Chart</TextBlock>
</StackPanel>
</StackPanel>
</Viewbox>
Is it possible to help me?
Thanks.

You can use Grid as a container and define 4 columns:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

Pinch zoom inside listbox not working in windows phone 8.1

I have a Listbox that displays image and need to have pinch zoom for the image. I use ScrollViewer to achieve pinch zoom.
So my Listbox data template looks this.
<Border BorderBrush="Transparent"
BorderThickness="1"
Background="{StaticResource WhiteBrush}"
Margin="0">
<Grid VerticalAlignment="Top"
Background="Transparent"
Holding="Grid_Holding"
Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="{StaticResource RedBrush}"
BorderThickness="1"
CornerRadius="20"
Width="150"
Height="170"
Grid.Column="0">
<ScrollViewer VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
ScrollViewer.BringIntoViewOnFocusChange="True"
ZoomMode="Enabled"
MinZoomFactor="0.8"
MaxZoomFactor="20">
<Image Stretch="Uniform"
Width="150"
Height="170">
<Image.Source>
<BitmapImage UriSource="{Binding MainImage}"
DecodePixelWidth="400"/>
</Image.Source>
</Image>
</ScrollViewer>
</Border>
<StackPanel Grid.Column="1"
Margin="15 0 0 0"
VerticalAlignment="Center">
<TextBlock Text="{Binding Title}"
Style="{StaticResource SavedImageHeadingTextBlockStyle}" />
</StackPanel>
</Grid>
</Border>
The problem is that when I use the same code outside the ListBox Pinch zoom works great. But inside ListBox the Pinchzoom doesn't work.
Any help will be apprieciated. Thanks in advance.

The problem here is that you probably shouldn't be trying to do this anyway. If you get it to work, you're going to end up with a pretty frustrating UI where your ListView may not scroll depending on whether or not the internal ScrollViewer is under the finger (and swallowing touch).
What may or may not work in your scenario is to rather use a FlipView (instead of ListView). A FlipView handles a ScrollViewer in the ItemTemplate pretty well, and you'll end up with a better experience for the user.

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.

Siverlight Grid XAML script issue

Here is my Siverlight Grid script, I want Media Element mediaPlayer to occupy left half of the whole Grid space, and want Media Element cameraPlayer to occupy right half of the whole Grid space. But my following code does not work quite well (I have set related Grid column/row value), two Media Elements play overlap.
Any ideas what is wrong?
<Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MediaElement HorizontalAlignment="Stretch" Margin="10,10,10,10" x:Name="mediaPlayer" AutoPlay="false" Grid.Column="0" Grid.Row="0"/>
<MediaElement HorizontalAlignment="Stretch" x:Name="cameraPlayer" AutoPlay="false" Grid.Column="1" Grid.Row="0"/>
</Grid>
thanks in advance,
George

You need to define your column definitions on your grid.
<Grid x:Name="LayoutRoot2" Margin="0" Background="#FF0D0A0A" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="specify width" />
<ColumnDefinition
Width="specify width" />
</Grid.ColumnDefinitions>
<MediaElement HorizontalAlignment="Stretch" Margin="10,10,10,10" x:Name="mediaPlayer" AutoPlay="false" Grid.Column="0" Grid.Row="0"/>
<MediaElement HorizontalAlignment="Stretch" x:Name="cameraPlayer" AutoPlay="false" Grid.Column="1" Grid.Row="0"/>
</Grid>
you'll need to specify the width that you want your column to be.