Develop Reference

How to do a list of square in GRID XAML?

I am trying to create a grid in XAML by the following:
GRID Type
I tried something like this but I have no ideea how to add the red squares.
Do I have to make a grid in grid?
Right now, I have this code
<Window x:Class="MonitorComenzi.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:MonitorComenzi"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
</Grid>
</Window>

You can make nested Grids, its absolutly fine, but a single StackPanel do the trick as well. Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Black">Comenzi plasate</TextBlock>
<TextBlock Grid.Row="0" Grid.Column="1" FontSize="30" TextAlignment="Center" FontWeight="Bold" Foreground="Green">Comenzi preparate</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="10"
Grid.Row="1"
Grid.Column="0">
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
<Rectangle Fill="Red" Width="30" Height="30" Margin="5 0"/>
</StackPanel>
</Grid>

WPF text overlay grid

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.

how to create design like this in windows phone universal project

how can i design following?
what i have tried so far :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding nexs}" Width="70" Height="70" Grid.Column="0"/>
<Grid Grid.Column="1" HorizontalAlignment="Left" >
<Image Source="{Binding url}" Height="{Binding height}" Width="{Binding width}"/>
</Grid>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" Grid.Column="2" Margin="0,15,0,0" FontFamily="Lucida Console" Foreground="Black" />
</Grid>
is there anyway 2 to put rows inside columdefinations?

No. You can have columdefinations and rowdefinations. If you want multiple rows in a column then create another grid and set the row definitions on that grid.
Or, create rows and columns definitions on main grid and set row spans on controls to get the desired layout.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="{Binding nexs}" Width="70" Height="70" Grid.Column="0"/>
<Grid Grid.Column="1" HorizontalAlignment="Left" >
<Image Source="{Binding url}" Height="{Binding height}" Width="{Binding width}"/>
</Grid>
<TextBlock Text="{Binding title}" TextWrapping="Wrap" Grid.Column="2" Margin="0,15,0,0" FontFamily="Lucida Console" Foreground="Black" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- Place controls here -->
</Grid>
</Grid>

Dynamically resizing TextBox with scroll bar

Is it possible to have a scrolling (multiline) TextBox without explicitly setting the height? Here is my example code snippet:
<Grid Grid.Row="6"
Grid.Column="2"
Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0">Heading</Label>
<TextBox Grid.Row="1"
SpellCheck.IsEnabled="True"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"></TextBox>
</Grid>
The problem here is that the TextBox will resize itself depending on how many lines the user enters without resorting to instead staying the same size and scrolling.

Simply add VerticalAlignment="Top"
<Grid Grid.Row="6"
Grid.Column="2"
Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0">Heading</Label>
<TextBox
VerticalAlignment="Top"
Grid.Row="1"
SpellCheck.IsEnabled="True"
TextWrapping="Wrap"
AcceptsReturn="True"
VerticalScrollBarVisibility="Auto"></TextBox>
</Grid>

This will get you started. As you have not put your requirements clearly, it's difficult to put a proper solution. If you put your more clear requirements, I can make a better version for you.
<Window ...>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="476*"/>
<ColumnDefinition Width="45*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Width="{Binding Value, ElementName=HorizontalSB}" Height="{Binding Value, ElementName=VerticalSB}" Margin="30,37,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" />
<ScrollBar x:Name="VerticalSB" Grid.Column="1" HorizontalAlignment="Center" Width="Auto" SmallChange="1" Minimum="50" Value="25" MaxHeight="250" Maximum="1000"/>
<ScrollBar x:Name="HorizontalSB" Grid.Row="1" VerticalAlignment="Top" Width="Auto" Orientation="Horizontal" VerticalContentAlignment="Center" SmallChange="10" Maximum="1000" Minimum="20" LargeChange="10" Value="75"/>
</Grid>
</Window>

how to get grid children by its row and column in wpf?

<Grid x:Name="LayoutRoot" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Width="150" Height="50" x:Name="Btn1" Content="Button1" Grid.Row="0" Grid.Column="0"/>
<Button Width="150" Height="50" x:Name="Btn2" Content="Button2" Grid.Row="0" Grid.Column="1"/>
<Button Width="150" Height="50" x:Name="Btn3" Content="Button3" Grid.Row="2" Grid.Column="0"/>
<Button Width="150" Height="50" x:Name="Btn4" Content="Button4" Grid.Row="2" Grid.Column="1"/>
</Grid>
C# code in wpf
Visual childVisual = (Visual)VisualTreeHelper.GetChild(LayoutRoot,0);
With above code i can get the First child of the grid(LayoutRoot).But i want to get grid child by it's rows or columns. What should i do for that.
Thanks in Advance.

Filter the Grid.Children based on what Grid.GetRow and GetColumn returns for every child.
e.g.
var itemsInFirstRow = LayoutRoot.Children
.Cast<UIElement>()
.Where(i => Grid.GetRow(i) == 0);