I'm new to WPF. here I'm having following static grid
Main Grid
frame for child grid like this
Child Grid
I have a main grid, I'm trying to dynamically generate child grids and populate it inside Main Grid Column 0
Final outcome I'm trying to get like below
here I'm trying populate a collection of items with some styles (with separate block for each collection item property).
so for each collection item I want to generate a grid and bind that collection property names and values inside of a grid here in above picture red color represent grid for a collection item, black color grid is main grid.
really appreciate suggest an idea or propose better solution for this purpose
Edit:
upto now I tried following, here as child grid I'm trying to populate icTodoList grid 3 times, but here its only populate 1 time
XML file
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="147*"/>
<ColumnDefinition Width="220*"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<ItemsControl Name="icTodoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<Border BorderBrush="Black" BorderThickness="1">
<Grid Name="icTodoList" Grid.Row="0" Grid.Column="0" Margin="0,10,10,2941" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" Width="268">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="79*"/>
<ColumnDefinition Width="99*"/>
<ColumnDefinition Width="90*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="39*"/>
<RowDefinition Height="63*"/>
<RowDefinition Height="29*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="0" Grid.Column="2" Text="{Binding Description}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="1" Grid.Column="2" Text="{Binding Description}"/>
<TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding Title}"/>
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Completion}"/>
<TextBlock Grid.Row="2" Grid.Column="2" Text="{Binding Description}"/>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
Code Behind file
public WindowPanelConstructor()
{
InitializeComponent();
List<TodoItem> items = new List<TodoItem>();
for (int i = 0; i < 3; i++)
{
items.Add(new TodoItem() { Title = "Title" + i.ToString(), Completion = "Completion" + i.ToString(), Description = "Description" + i.ToString() });
icTodoList.ItemsSource = items;
}
}
public class TodoItem
{
public string Title { get; set; }
public string Completion { get; set; }
public string Description { get; set; }
}
This is just an example (I set the background of each grid to be different colour, this is just an example) to get you started, you can expand this by adding your own methods.
In Code:
public MainWindow()
{
InitializeComponent();
// get the reference of the column definition of the main grid, then set your new column definition as required.
var coldef = MainGrid.ColumnDefinitions;
coldef.Add(new ColumnDefinition(){Name = "col1", Width=new GridLength(100.0)});
coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });
coldef.Add(new ColumnDefinition() { Name = "col2", Width = new GridLength(100.0) });
// now add the child grids dynamically as many as you like.
for (var i = 0; i < 2; ++i)
{
var colour1 = (byte)(50 * i);
var colour2 = (byte)(100 * i);
var grid1 = new Grid()
{
Background = new SolidColorBrush(Color.FromRgb(100, colour1, colour2)),
};
grid1.SetValue(Grid.ColumnProperty, i);
// get the reference to the row definition the child grid, then set the rows as required.
var rowDef = grid1.RowDefinitions;
rowDef.Add(new RowDefinition() { Name = "Row1", Height = new GridLength(100.0) });
rowDef.Add(new RowDefinition() { Name = "Row2", Height = new GridLength(100.0) });
// add nesting child grids as many as you like.
for (var j = 0; j < 1; j++)
{
var r = (byte)(50 * i);
var g = (byte) (100 * i);
var grid2 = new Grid()
{
Background = new SolidColorBrush(Color.FromRgb(r, g, 255)),
};
grid2.SetValue(Grid.RowProperty, 0);
// add grid 3 to grid 2
grid1.Children.Add(grid2);
}
// Add grid1 to main grid.
MainGrid.Children.Add(grid1);
}
}
XAML:
<Window x:Class="SimpleProgressBar.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="MainGrid">
</Grid>
</Window>
You can see in my xaml code, there is only one grid, that is the main grid that is used in the C# code above.
Related
Good day! I want to make a scrollable image grid like "Unsplash" site, but with WPF. I using Grid and ListBoxes, but the Grid not scrolling, scrolling only 3 ListBoxes apart from each other. What I should use for that type of thing?
What I need
What I have with wrong scrolling
WPF code:
<Grid ScrollViewer.VerticalScrollBarVisibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition>
</ColumnDefinition>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0" x:Name="listBox0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
</ListBox>
<ListBox Grid.Column="1" x:Name="listBox1" ScrollViewer.VerticalScrollBarVisibility="Disabled">
</ListBox>
<ListBox Grid.Column="2" x:Name="listBox2" ScrollViewer.VerticalScrollBarVisibility="Disabled">
</ListBox>
</Grid>
List filling:
for (int i = 0; i < 20; i++)
{
Rectangle temp = new Rectangle();
temp.Width = 250;
temp.Height = rnd.Next(100, 300);
temp.Fill = GetRandColor();
if(listStateCounter == 2)
{
listStateCounter = 0;
listBox2.Items.Add(temp);
}
else if (listStateCounter == 1)
{
listStateCounter++;
listBox1.Items.Add(temp);
}
else if (listStateCounter == 0)
{
listStateCounter++;
listBox0.Items.Add(temp);
}
}
try this
<ScrollViewer VerticalScrollBarVisibility="Visible">
<Grid>
//.............................................
</Grid>
</ScrollViewer>
I managed to display my array in TextBlock - each [element] in separate row, but I would like to put each Array[index] element into separate TextBlock in the same Row, as long as it comes from same line, So:
A file is accessed
Lines are sorted
Lines are split into words
Each line is put on separate row
5. Each word from line is put into separate TextBlock but within the same row.
Here is my code:
public async void ReadFile()
{
var path = #"CPU.xls";
var folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
var file = await folder.GetFileAsync(path);
var readFile = await Windows.Storage.FileIO.ReadLinesAsync(file);
foreach (string line in readFile.OrderBy(line =>
{
int lineNo;
var success = int.TryParse(line.Split(';')[4], out lineNo);
if (success) return lineNo;
return int.MaxValue;
}))
{
string[] splitLines = line.Split(';');
for (int index = 0; index < splitLines.Length; index++)
{
itemsControl.Items.Add(splitLines[index]);
}
}
}
As you can see above, I already did steps 1 - 4, unfortunately, at the moment each word goes into different row.
Here is bigger part of my xaml file:
<ItemsControl x:Name="itemsControl"
ItemsSource="{Binding itemsControl}"
FontSize="24">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="Auto"
Margin="0 12"
HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Column="0"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Text="{Binding }" />
</StackPanel>
<StackPanel Grid.Column="1"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Text="{Binding }" />
</StackPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I put two TextBlocks instead of 5 for now. How to make each of them getting different binding path to link with different array element?
----------UPDATE----------
I edited TextBlocks so each of them points to different array element like so:
<StackPanel Grid.Column="0"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Text="{Binding Path=splitLines[0]}" />
</StackPanel>
<StackPanel Grid.Column="1"
Grid.Row="0"
Orientation="Horizontal">
<TextBlock Text="{Binding Path=splitLines[1]}" />
</StackPanel>
I don't get any errors at this point, but unfortunately no data is displayed at all. Why binding to array element is not working?
You can do this quite easily setting ItemsPanel of ItemsControl
EDIT
Added ItemTemplate to ItemsControl
Say you had a MainPage.xaml
<ItemsControl x:Name="WordsList"
ItemsSource="{Binding listOfWords}">
<!-- Ensures each item is displayed horizontally -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!--if you want each line in seperate TextBlock with more control-->
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" FontSize="22" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
In code behind MainPage.xaml.cs
public sealed partial class MainPage : Page
{
//Your intial string
string words = "I am Line 1; I am Line 2; I am Line 3";
//Using an ObservableCollection as works well with data binding
public ObservableCollection<string> listOfWords { get; set; } =
new ObservableCollection<string>();
public MainPage()
{
this.InitializeComponent();
//set the DataContext to this page
this.DataContext = this;
Loaded += (s, args) =>
{
var splitWords = words.Split(';');
foreach(var word in splitWords)
{
//each line is added to listOfWords and can then be accessed by the ItemsControl as the ItemsSource
//is set to listOfWords
listOfWords.Add(word);
}
};
}
}
EDIT2
to bind to the array you will need a public property eg
public string[] splitLines { get; set; }
I have a grid that I need to put into a border, doing this via XAML is easy
but how do I do this via C#?
everything that I have found thus far wants to add the border around each cell.
I need it to come out looking the same way XAML does it, please help!
I can not get the XAML to post correctly here:
<Border Grid.Column="1"
Grid.Row="0"
Background="AliceBlue"
BorderBrush="Black"
BorderThickness="4"
x:Name="Side6"
Visibility="Collapsed">
<UIElement.Projection>
<PlaneProjection RotationY="-90" />
</UIElement.Projection>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
<RowDefinition Height="100"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="2" Grid.Row="1" Click="RotateRight_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Right</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 4</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<Button Grid.Column="0" Grid.Row="1" Click="RotateLeft_Click">
<Button.Content>
<StackPanel>
<TextBlock HorizontalAlignment="Center">Rotate Left</TextBlock>
<TextBlock HorizontalAlignment="Center">To</TextBlock>
<TextBlock HorizontalAlignment="Center">Side 2</TextBlock>
</StackPanel>
</Button.Content>
</Button>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
Grid.Column="1"
Grid.Row="1"
Text="Side 6">
</TextBlock>
</Grid>
</Border>
Here is the C# code that I'm using, maybe you can see what I am doing wrong?
public static void panelMain(string strPassGridName, System.Windows.Media.Color mcPassColor,
int intRowProperty, int intColumnProperty, Visibility vVisibility,
string[] strButtonTitles, Grid passLayoutRoot, Canvas passCanvas)
{
Grid panelGrid = new Grid();
panelGrid.Name = strPassGridName;
panelGrid.Background = new SolidColorBrush(mcPassColor);
panelGrid.SetValue(Grid.RowProperty, intRowProperty);
panelGrid.SetValue(Grid.ColumnProperty, intColumnProperty);
panelGrid.Visibility = vVisibility;
RowDefinition row1 = new RowDefinition();
row1.Height = new GridLength(100, GridUnitType.Auto);
panelGrid.RowDefinitions.Add(row1);
ColumnDefinition column1 = new ColumnDefinition();
column1.Width = new GridLength(100);
panelGrid.ColumnDefinitions.Add(column1);
passLayoutRoot.Children.Add(panelGrid);
}
I figured it out, I needed to create the border first then add the grid to the border.
One major difference is that I could not reference the border object directly, I needed to "find it"
Border findBorder = passLayoutRoot.FindName("bd" + strPassGridName) as Border;
if (findBorder == null)
{ }
else
{
findBorder.Child = panelGrid;
}
This worked perfectly....
Thanks to all that attempted to help
You can do it as below,
Border gridBorder = new Border();
gridBorder.BorderBrush = new SolidColorBrush(Colors.Black);
gridBorder.BorderThickness = new Thickness(4);
gridBorder.Child = new Grid(); //Your grid here
LayoutRoot.Children.Add(border); // ParentGrid(layout) holding the border
I have a XAML with 2 columns in a Grid and I have a button that when I click it, in the code behind, I set the visibility to collapse, and want to resize the other half of the screen to try to take up the whole screen. The collapsing part works, and the RHS then shifts over to the LHS, but it does not take up the entire screen. I tried using both the Auto and Star to resize in HidePlots, but it never takes the full screen. I thought if I collapsed the LHS, and set the column to * for the RHS, it would take up the whole screen. Any thoughts? Thanks.
Here's some code to make it more clear:
<Grid Grid.Row="1" x:Name="ExpandableGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="1.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" x:Name="TableGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.Row="0" Grid.Column="0" x:Name="SampleViewGroupBox" Header="SampleView" HorizontalAlignment="Stretch" FontFamily="Arial" FontSize="12" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.SampleView}" Height="Auto" Width="Auto"/>
</GroupBox>
<Button x:Name="TableButton" HorizontalAlignment="Right" Content="Button" Width="15" Height="15" VerticalAlignment="Top" Margin="0,0,-2,0" Click="MaxButton_Click" Grid.Column="0" Grid.Row="0"/>
</Grid>
<Grid Grid.Column="1" x:Name="BaseViewGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<GroupBox Grid.RowSpan="2" Grid.Column="1" Name="BaseViewGroupBox" Header="PLOTS" Margin="5,0,5,0" >
<ContentControl Content="{Binding LayoutManager.ConsensusView}" Height="Auto" Width="Auto" />
</GroupBox>
</Grid>
</Grid>
private void MaxButton_Click(object sender, RoutedEventArgs e)
{
UIElement senderElement = (UIElement)sender;
if (_tableMinimized)
{
HideTables(false);
_tableMinimized = false;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButton");
}
else
{
HideTables(true);
_tableMinimized = true;
((Button)senderElement).Style = (Style)FindResource("DashboardDetailsButtonReverse");
}
}
private void HideTables(bool hide)
{
if (hide)
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Collapsed;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = GridLength.Auto;
ExpandableGrid.ColumnDefinitions[1].MinWidth = 500;
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = GridLength.Auto;
TableButton.Visibility = Visibility.Visible;
}
else
{
foreach (UIElement child in TableGrid.Children)
child.Visibility = Visibility.Visible;
for (int i = 0; i < ExpandableGrid.ColumnDefinitions.Count; i++)
ExpandableGrid.ColumnDefinitions[i].Width = new GridLength(1, GridUnitType.Star);
for (int i = 0; i < ExpandableGrid.RowDefinitions.Count; i++)
ExpandableGrid.RowDefinitions[i].Height = new GridLength(1, GridUnitType.Star);
}
}
Edit: I tried to also change one line to:
ExpandableGrid.ColumnDefinitions[1].MinWidth = System.Windows.SystemParameters.PrimaryScreenWidth-20;
instead of the hard-coded 500 value, it looks correct. However, if I try to click the button again to revert back to normal, the RHS takes up the bulk of the screen without getting back to its original position.
Your current column definition says to make Column B equal to 1.5 times the size of Column A, so even if ColumnB's content is hidden, the column will still take up 3/5 of the screen.
Change it so the column that collapses has a Width="Auto", and set it's Content's Width equal to whatever size it should be when it's expanded. If you want to keep the 1.5* default width, I'd recommend using something like a MathConverter to figure out what size it should be based on the parent Grid's width. I have the code for one posted here
<Grid x:Name="ParentGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid x:Name="RHS" Grid.Column="0" />
<!-- Collapse this Grid -->
<Grid x:Name="LHS" Grid.Column="1"
Width="{Binding ElementName=ParentGrid, Path=ActualWidth,
Converter={StaticResource MathConverter},
ConverterParameter=((#VALUE/5)*3)}" />
</Grid>
You need to set column 0 to be whatever you desire (Auto, 150, etc...) and set column 1 to be *.
It looks like your Grid is also within a Grid, so the parent's behavior also has to be taken into account.
I'm trying to create a grid programmatically and appending a custom control as a child to the grid as row 0 column 0 out of a 2x2 matrix. To make matters more tricky, I'm using the MVVM design pattern. Heres some code to help everyone get the idea:
App.xaml.cs
base.OnStartup(e);
var viewModel = new MainWindowViewModel();
var mainWindow = new MainWindow();
mainWindow.GridWindows = viewModel.Window.GridWindows;
MainWindowViewModel - method returns the GridWindows.
private Grid CreateGrid()
{
Grid grid = new Grid();
// Create column definitions.
ColumnDefinition columnDefinition1 = new ColumnDefinition();
ColumnDefinition columnDefinition2 = new ColumnDefinition();
columnDefinition1.Width = new GridLength(640);
columnDefinition2.Width = new GridLength(640);
// Create row definitions.
RowDefinition rowDefinition1 = new RowDefinition();
RowDefinition rowDefinition2 = new RowDefinition();
rowDefinition1.Height = new GridLength(340);
rowDefinition2.Height = new GridLength(340);
// Attached definitions to grid.
grid.ColumnDefinitions.Add(columnDefinition1);
grid.ColumnDefinitions.Add(columnDefinition2);
grid.RowDefinitions.Add(rowDefinition1);
grid.RowDefinitions.Add(rowDefinition2);
// Create preview window.
Border border = new Border();
border.BorderThickness = new Thickness(20);
border.Padding = new Thickness(8);
border.SetResourceReference(Control.BackgroundProperty, "PreviewWindow");
MediaRTSPElement previewElement = new MediaRTSPElement();
previewElement.Name = "RTSPStreamPlayer";
previewElement.Stretch = Stretch.UniformToFill;
previewElement.Source = "rtsp://192.100.100.22/media/video1";
previewElement.VideoRenderer = VideoRendererType.EnhancedVideoRenderer;
previewElement.LoadedBehavior = WPFEVR.DirectShow.Players.MediaState.Play;
previewElement.SpeedRatio = 0.5;
//border.Child = previewElement;
// Add preview window.
for (int i = 0; i < 4; i++)
{
grid.Children.Add(previewElement as UIElement);
Grid.SetColumn(previewElement, i);
Grid.SetRow(previewElement, i);
break;
}
return grid;
}
And the XAML Markup that the grid should assign to
<Grid x:Name="GridWindows"></Grid>
The problem is my custom control does not appear in the grid layout, heres the xaml code that does it without code-behind, and this does work:
<Grid x:Name="GridWindows">
<!--<Grid.ColumnDefinitions>
<ColumnDefinition Width="640" />
<ColumnDefinition Width="640" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="340" />
<RowDefinition Height="340" />
</Grid.RowDefinitions>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="0" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer2"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="0">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer3"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.78/media/video1"
SpeedRatio="0.5" />
</Border>
<Border BorderThickness="20" Padding="8" Background="{DynamicResource ResourceKey=PreviewWindow}" Grid.Row="1" Grid.Column="1">
<evr:MediaRTSPElement x:Name="RTSPStreamPlayer4"
Stretch="UniformToFill"
VideoRenderer="EnhancedVideoRenderer"
LoadedBehavior="Play"
Source="rtsp://192.100.100.22/media/video1"
SpeedRatio="0.5" />
</Border>-->
</Grid>
Any ideas as to why programmatic code isn't working?
if you're creating Grid in the xaml you can't later set it in code. Grid (instance) is already in visualtree. Overwriting variable won't do any effect. You should set your Grid as content of xaml defined control. I'm guessing that your code looks like this:
Code:
this.GridWindows = createdGrid;
Xaml:
<Grid x:Name="GridWindows"></Grid>
In code you should have something like this:
this.GridWindows.Children.Add(createdGrid);