I have a user control(Windows 8.1 app) which I have developed using PATH vector control. I have put it inside a ViewBox . The problem is , when I change the screen resolution or even orientation , the Control either get reduced or get too much big.
I want to give it a fixed size so whatever the screen resolution is or orientation is, It shouldnt increase the size .
The XAML for my user control is
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="200">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" >
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
<Border.Background>
<ImageBrush x:FieldModifier="public" x:Name="image1" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
If the only thing in the Viewbox is your user control, just get rid of the Viewbox, it stretches and scales the content by design!
If you have various controls in your Viewbox but you you only want some of them to resize, you might be better changing your layout to use a grid and only wrapping the stuff you want to resize in a Viewbox.
Here is an example of a 3x3 grid with 6 textboxes, 5 fixes size, 1 dynamic (in a Viewbox):
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="1" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="0" Grid.Column="2" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="1" Grid.Column="0" Text="Fixed Size"></TextBox>
<TextBox Grid.Row="2" Grid.Column="0" Text="Fixed Size"></TextBox>
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2">
<TextBox Text="Dynamic"/>
</Viewbox>
</Grid>
Related
Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.
<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Rectangle"
x:Key="ColorButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="RadiusX" Value="50"/>
<Setter Property="RadiusY" Value="50"/>
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The code in particular that I'm asking the question about is the Ellipse.
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.
I tried to place within the page, rather than within the grid, but I think the page can only have one content property?
The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.
Thanks!
To have have multiple layers over the same area introduce one more Grid:
<Grid>
<!--layer 0-->
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
</Grid>
<!--layer 1, covers layer 0-->
<Ellipse x:Name="CenterDot"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
Grid with White background and Ellipse are positioned in the same cell of the outer Grid.
To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)
I've searched whole stackoverflow and can't find simple solution to solve my problem.
I have grid and I want to overlay whole grid by some text/image. Do you have any ideas how can I do it?
Actually it is tetris game and I would like to show user text/image "Game Over" after he lose, so I need to do it manually from c#. Any ideas ?
Thanks for any help :-)
<Window x:Class="TetrisWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TetrisWPF"
mc:Ignorable="d"
Title="MainWindow"
AllowsTransparency="True"
ResizeMode="CanResizeWithGrip"
WindowStyle="None"
ShowInTaskbar="True"
WindowState="Maximized"
KeyDown="HandleKeyDown"
Initialized="MainWindow_Initilized" Background="#222222">
<Window.Resources>
<FontFamily x:Key="FontAwesome">/Fonts/fontawesome-webfont.ttf#FontAwesome</FontFamily>
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Label Content="Score " Height="56" x:Name="Score" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
<Label Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
<Label Content="Level 1" Height="56" x:Name="level" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0" />
<Button x:Name="buttonPlay" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Image Name="img1" Source="C:\Users\xx\Pictures\btn.png" />
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="buttonPause" Content="Pause (L1)" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonPause_Click" />
<Button x:Name="buttonRestart" Content="Restart" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonRestart_Click" />
<Button x:Name="buttonStop" Content="Stop" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonStop_Click" />
<Button x:Name="buttonDemo" Content="Demo" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonDemo_Click" />
<Button x:Name="buttonExit" Content="Exit" HorizontalAlignment="Right" VerticalAlignment="Top" Height="60" Margin="0,20,0,0" Width="205" Click="buttonExit_Click" />
<TextBlock x:Name="GameOverText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Over" Foreground="#FFD41A1A"/>
<TextBlock x:Name="GamePausedText" Height="56" FontSize="28" FontWeight="Bold" TextWrapping="Wrap" Text="Game Paused" Foreground="#FF0D15B6" Margin="0,0,-0.8,0"/>
</StackPanel>
<Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</DockPanel>
With a grid, you can simply add objects occupying the same space and they will overlap in the order you've added them. With your example, you've got a lot of columns and rows, so to overlay something over all of them you'd have to set it's RowSpan and ColumnSpan to the number of rows/columns you have for it to fill all the space.
An easier way might be to put your grid in another grid (with only 1 row and column), and add something to that (this is what I do when I want to overlay components, just stick them in their own little 1x1 grid).
Like this:
<Grid>
<Grid Name="MainGrid" Height="750" Width="375" DockPanel.Dock="Right">
... all those columns
</Grid>
<Border Name="GameOverlay" Background="Black" Visibility="Hidden">
<TextBlock Text="Game Over!" Foreground="White" FontWeight="Bold"
FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</Grid>
Note, it's important to set a background to something if you want to obscure your original content (though a half-transparent background might look cool!).
To show and hide it in the code, simply show & hide it with GameOverlay.Visibility = Visibility.Visible or GameOverlay.Visibility = Visibility.Hidden, or bind this to a property that you can change.
This way you can make it look how you want, place it where you want, with it set to Visible in the designer, then change it to Hidden (so you can make it visible in the code).
Much easier than constructing it in code when you need it and manually adding it to the UX.
I would like to make my controls gets bigger with the same margin, It's like giving 10% of the window's size bigger, all controls should be bigger 10% as the window does, they should goes wider if the windows goes too ...etc.
I searched a lot about that and found this topic : https://msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml
but still couldn't know how to make what i want exactly. I don't have many controls they are like 9 only! They are timers, nothing else!
I could do it in Forms or WPF, but in windows UI XAML is blocking so many features, so I can't do it the same way I did for others. That's why I'm trying to find another alternative way to do it.
My Windows Main window WPF (Screenshot):
WPF XAML :
<Page
x:Class="SpecCountdown.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SpecCountdown"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:FieldModifier="public" x:Name="mainGrid" Background="Black" Loaded="Grid_Loaded" HorizontalAlignment="Left" Width="1910">
<TextBlock x:FieldModifier="public" x:Name="playerTxt" Margin="57,66,0,0" TextWrapping="Wrap" Text="PLAYER:" Foreground="#FF0015FF" FontSize="36" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="148"/>
<Border x:FieldModifier="public" x:Name="separator1" Height="1" Margin="43,135,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top" />
<TextBlock x:FieldModifier="public" x:Name="modeTxt" Margin="57,149,0,0" TextWrapping="Wrap" Text="PREP TIME:" Foreground="#FF0015FF" FontSize="42" Height="51" VerticalAlignment="Top" HorizontalAlignment="Left" Width="247"/>
<Border x:FieldModifier="public" x:Name="separator2" Height="1" Margin="43,216,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top"/>
<TextBlock x:FieldModifier="public" x:Name="nextUpTxt" Margin="57,230,0,0" TextWrapping="Wrap" Text="NEXT UP:" Foreground="#FF0015FF" FontSize="36" Height="67" VerticalAlignment="Top" HorizontalAlignment="Left" Width="171"/>
<TextBlock x:FieldModifier="public" x:Name="currPlayerTxt" Margin="0,66,1333,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" TextAlignment="Right" Height="56" VerticalAlignment="Top" HorizontalAlignment="Right" Width="349"/>
<TextBlock x:FieldModifier="public" x:Name="nextPlayerTxt" Margin="228,230,0,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="349" TextAlignment="Right"/>
<TextBlock x:FieldModifier="public" x:Name="timerTxt" Margin="349,153,0,0" TextWrapping="Wrap" Text="0000:00" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="228" TextAlignment="Right"/>
</Grid>
All what I want to make it flexible as well as I change my window's size.
I think that you want to change your controls sizes when the windows sieze change.But the TextBlock's sizes is same as TextBlock's FontSize.For the reason,I use ViewBox that sizes will be same as the Page size.And if you not set the page in Frame,the Page's sizes will as bigger as the windows's sizes.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="#FF0015FF"></Setter>
<Setter Property="FontSize"
Value="36"></Setter>
<Setter Property="HorizontalAlignment"
Value="Center"></Setter>
<Setter Property="VerticalAlignment"
Value="Center"></Setter>
<Setter Property="Margin"
Value="10,10,10,10"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PLAYER:"
></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PREP TIME:"></TextBlock>
<TextBlock Grid.Column="1"
Text="0000:00"></TextBlock>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="NEXT UP:" ></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
</Grid>
</Viewbox>
</Grid>
http://7xqpl8.com1.z0.glb.clouddn.com/ChangeControlsSizeLayout.gif
Recently I'm trying to learn some Windows 10 UWP app developments. And now I encountered a strange issue, where there is a white ribbon in the bottom of my app, see here:
If I drag and enlarge the app window, then there will be another white ribbon on the top, see here:
Here is my XAML for the UI:
<Page
x:Class="ApodidaeCore.ClockMainUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ApodidaeCore"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid RequestedTheme="Dark" Margin="0,0,0,38" Height="600" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="439*"/>
<RowDefinition Height="161*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="205*"/>
<ColumnDefinition Width="819*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="hourTextBlock" HorizontalAlignment="Left" Height="191" TextWrapping="Wrap" Text="00" VerticalAlignment="Top" Width="205" Foreground="White" FontSize="170" Margin="15.2,98,0,0" Grid.Column="1" />
<TextBlock x:Name="clockSymbolTextBlock" HorizontalAlignment="Left" Height="141" TextWrapping="Wrap" Text=":" VerticalAlignment="Top" Width="38" Foreground="White" FontSize="105" FontWeight="Bold" Margin="244.2,130,0,0" Grid.Column="1"/>
<TextBlock x:Name="minuteTextBlock" HorizontalAlignment="Left" Height="197" TextWrapping="Wrap" Text="00" VerticalAlignment="Top" Width="218" Foreground="White" FontSize="170" Margin="308.2,98,0,0" Grid.Column="1"/>
<TextBlock x:Name="weatherInfoTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="25" Margin="188.2,331,0,0" Text="Unknown" Width="314" Height="33" Grid.Column="1"/>
<TextBlock x:Name="notificationTextBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="No new notification" VerticalAlignment="Top" Foreground="White" FontSize="25" Margin="188.2,369,0,0" Height="30" Width="314" Grid.Column="1"/>
<Image x:Name="weatherInfoIconImage" HorizontalAlignment="Left" Height="100" Margin="67.2,321,0,0" VerticalAlignment="Top" Width="100" Grid.Column="1"/>
</Grid>
What should I do to fix this? Any suggestions? Thanks in advance!
Jackson.
Got fixed, silly me!
I've wrongly set the grid height and the margin.
Remove those two variables will fix that issue.
Change this:
<Grid RequestedTheme="Dark" Margin="0,0,0,38" Height="600" Background="Black">
to this:
<Grid RequestedTheme="Dark" Background="Black">
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>