I am working on a demo app, and I'm trying to set the grid size base on a selection from a combo box. The problem I am having is when a do a 2x2 grid, for example. It doesn't fill the grid; just a quarter of it. I've tried messing with the size of the rows and columns and also the control that goes inside but I can't get it to behave the way I want it to. The behavior I'm looking for is too evenly divide up space for the rows and columns; and then have a control fill the cell. When I resize the window I want the grid and the controls in each cell too resize with the window.
Here is my code:
int row = 0;
int col = 0;
short cam = 0;
for (int i = 0; i < (_length * _length); i++)
{
RowDefinition rowDef = new RowDefinition();
ColumnDefinition colDef = new ColumnDefinition();
//rowDef.Height = GridLength.Auto;
//colDef.Width = GridLength.Auto;
//rowDef.Height = new GridLength((this.ActualHeight / length) - 7, GridUnitType.Star);
//colDef.Width = new GridLength((this.ActualWidth / length) - 1, GridUnitType.Star);
//var converter = new GridLengthConverter();
//rowDef.Height = (GridLength)converter.ConvertFromString("*");
//colDef.Width = (GridLength)converter.ConvertFromString("*");
Border border = new Border();
border.BorderBrush = Brushes.White;
border.BorderThickness = new Thickness(2);
//rowDef.MinHeight = (this.ActualHeight / _length) - 7;
//colDef.MinWidth = (this.ActualWidth / _length) - 1;
rendererGrid.RowDefinitions.Add(rowDef);
rendererGrid.ColumnDefinitions.Add(colDef);
AxCVClientControlLib.AxCVVideo axCVVideo = new AxCVClientControlLib.AxCVVideo();
_hosts.Add(new System.Windows.Forms.Integration.WindowsFormsHost());
_hosts[i].Child = axCVVideo;
_hosts[i].HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
_hosts[i].VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
border.Child = _hosts[i];
//hosts[i].Width = (this.ActualWidth / length) - 1;
//hosts[i].Height = (this.ActualHeight / length) - 7;
axCVVideo.CreateControl();
axCVVideo.Camera = Convert.ToInt16(camCombo.SelectedIndex);
axCVVideo.XResolution = 640;
axCVVideo.YResolution = 480;
//System.Drawing.Rectangle rect = System.Windows.Forms.Screen.PrimaryScreen.Bounds;
//axCVVideo.XResolution = (int)rect.Height;
//axCVVideo.YResolution = (int)rect.Width;
if (axCVVideo.ConnectSync())
{
axCVVideo.Connect();
}
_axCVs.Add(axCVVideo);
if (col == _length)
{
col = 0;
row++;
}
Grid.SetRow(border, row);
Grid.SetColumn(border, col);
rendererGrid.Children.Add(border);
//Grid.SetRow(hosts[i], row);
//Grid.SetColumn(hosts[i], col);
//rendererGrid.Children.Add(hosts[i]);
col++;
<Grid x:Name="someRandomGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
This will cause the grid to have two rows and two columns. The rows will always be half the ActualHeight and the columns will always be half the ActualWidth.
You can do this in codebehind if you really insist on it:
grid.RowDefinitions.Add(new RowDefinition() {
Height = new GridLength(1, GridUnitType.Star)
});
Etc. The number determines how the grid size is divided up. If one column is 1* and the other is 2*, the first one will get one third of the width and the second will get two thirds. If they're both 2*, they'll both get 2/4 of the width (a.k.a. 1/2). It adds up all the numbers and divides. A star without a number in XAML means "1*". If you add a dozen 1* rows, you'll get a dozen rows each of which will dynamically resize to 1/12 the actual height of the whole grid at runtime.
This is not exactly intuitive, but once you learn it, it makes adequate sense.
In my app I am trying to create a grid layout dynamically but not getting expected output:
Below is the code that I tried:
Grid LayoutGrid = new Grid();
//Created Two Columns
ColumnDefinition gridCol1 = new ColumnDefinition();
ColumnDefinition gridCol2 = new ColumnDefinition();
LayoutGrid.ColumnDefinitions.Add(gridCol1);
LayoutGrid.ColumnDefinitions.Add(gridCol2);
Grid Col1Grid = new Grid();
//Create Two Rows
RowDefinition gridRow1 = new RowDefinition();
RowDefinition gridRow2 = new RowDefinition();
Col1Grid.RowDefinitions.Add(gridRow1);
Col1Grid.RowDefinitions.Add(gridRow2);
Grid.SetColumn(Col1Grid, 1);
return LayoutGrid;
The layout I am trying to create is like this:
I added some colors to be easier to understand
private Grid CreateGrid()
{
var LayoutGrid = new Grid { Background = new SolidColorBrush(Colors.Yellow) };
//Created Two Columns
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition());
//Created Two Rows
LayoutGrid.RowDefinitions.Add(new RowDefinition());
LayoutGrid.RowDefinitions.Add(new RowDefinition());
// region 1 - vertical left
var stack1 = new StackPanel {
Background = new SolidColorBrush(Colors.Red)
};
Grid.SetColumn(stack1, 0);
Grid.SetRowSpan(stack1, 2);
LayoutGrid.Children.Add(stack1);
// region 2 - top right
var stack2 = new StackPanel
{
Background = new SolidColorBrush(Colors.Green)
};
Grid.SetColumn(stack2, 1);
LayoutGrid.Children.Add(stack2);
// region 3 - bottom right
var stack3 = new StackPanel
{
Background = new SolidColorBrush(Colors.Blue)
};
Grid.SetColumn(stack3, 1);
Grid.SetRow(stack3, 1);
LayoutGrid.Children.Add(stack3);
return LayoutGrid;
}
Xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Background="Red" Grid.RowSpan="2"></StackPanel>
<StackPanel Background="Blue" Grid.Column="1"></StackPanel>
<StackPanel Background="Green" Grid.Column="1" Grid.Row="1"></StackPanel>
</Grid>
I am creating a kiosk app in Windows 8 but it will be used as assigned access app in 8.1. I want to create an animation for ads. The idea of animation is attached as image with this thread. Basically there will be 6-10 images in a L shape (Right side a column & bottom side a row). Now one ad in extreme bottom right corner will be stationary. The ads in column will travers like HTML's marquee and reaches to row at that time the ads in row will travers and reaches to column. In this way the ads will keep of moving in a clock wise pattern. How can I achieve this in my C#/XAML app?
Please not the ads will be never be displayed on top or left. The ad is <Image /> & source is Internet URLs. All ads are in ItemsControl.
Yuck, let's start with how much I hate this app already.
Now to the answer.
I don't think you really need an animation. You will likely change the ads only every so often. And a simple change in their position and NOT a transition in their position seems adequate.
Try this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle Fill="White" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="3" />
<Rectangle x:Name="Ad1" Fill="Green" Grid.Column="3" Grid.Row="3" />
<Rectangle x:Name="Ad2" Fill="IndianRed" Grid.Column="0" Grid.Row="3" />
<Rectangle x:Name="Ad3" Fill="Red" Grid.Column="1" Grid.Row="3" />
<Rectangle x:Name="Ad4" Fill="DarkRed" Grid.Column="2" Grid.Row="3" />
<Rectangle x:Name="Ad5" Fill="Pink" Grid.Column="3" Grid.Row="0" />
<Rectangle x:Name="Ad6" Fill="HotPink" Grid.Column="3" Grid.Row="1" />
<Rectangle x:Name="Ad7" Fill="Purple" Grid.Column="3" Grid.Row="2" />
</Grid>
With this:
public MainPage()
{
this.InitializeComponent();
var timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(1) };
timer.Tick += (s, e) => Move();
timer.Start();
}
void Move()
{
var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 };
foreach (var item in ads)
{
var row = (int)item.GetValue(Grid.RowProperty);
var col = (int)item.GetValue(Grid.ColumnProperty);
if (row == 3)
{
if (col == 0)
{
row = 0;
col = 3;
}
else
col--;
}
else
{
if (row == 2)
{
row = 3;
col = 2;
}
else
row++;
}
item.SetValue(Grid.RowProperty, row);
item.SetValue(Grid.ColumnProperty, col);
}
}
And it looks pretty good to me.
But if you must have animations, try this.
void Move()
{
var ads = new Rectangle[] { Ad1, Ad2, Ad3, Ad4, Ad5, Ad6, Ad7 };
foreach (var item in ads)
{
var row = (int)item.GetValue(Grid.RowProperty);
var col = (int)item.GetValue(Grid.ColumnProperty);
var x = item.ActualWidth;
var y = item.ActualHeight;
// bottom
if (row == 3)
{
// left-last
if (col == 0)
{
row = 0;
col = 3;
x = -x;
y = 0;
}
// others
else
{
col--;
x = -x;
y = 0;
}
}
// right
else
{
// bottom-last
if (row == 2)
{
row = 3;
col = 2;
x = -x;
}
else
{
row++;
x = 0;
}
}
var dr = new Duration(TimeSpan.FromSeconds(.5));
var tx = item.RenderTransform = new TranslateTransform();
var ax = new DoubleAnimation { To = x, Duration = dr };
Storyboard.SetTarget(ax, tx);
Storyboard.SetTargetProperty(ax, "X");
var ay = new DoubleAnimation { To = y, Duration = dr };
Storyboard.SetTarget(ay, tx);
Storyboard.SetTargetProperty(ay, "Y");
var st = new Storyboard { FillBehavior = FillBehavior.HoldEnd };
st.Children.Add(ax);
st.Children.Add(ay);
st.Completed += (s, e) =>
{
item.SetValue(Grid.RowProperty, row);
item.SetValue(Grid.ColumnProperty, col);
st.Stop();
};
st.Begin();
}
}
Best of luck!
Summary:
I cannot get a UserControl, which is inside a FlipView, to refresh/update itself when changing pages on the FlipView. The UserControl depends upon its code-behind to perform essential calculations for its own display.
Introduction:
I have created a graphing UserControl in Windows 8 due to the lack of such a control at the moment (apart from some 3rd parties). The XAML for the control creates the axes and declares the path used for actually drawing the graph-line, and the code-behind instantiates a class which generates the plot-points for this path. The instantiation of this graph-path class is made by the loaded event-handler in the code-behind once the axes have been properly rendered in order to get the size of the plotting area. The parameters to the constructor include various data specific to the plot-points plus references to the child control elements which are used for scaling.
Here's the control:
<Grid>
<Border Background="LightGray"
Margin="0,10">
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="1"
Grid.Column="0"
Grid.RowSpan="11"
Name="yAxisBorder">
<!--this canvas is written to in DrawGraph.cs -->
<Canvas Name="yAxis">
</Canvas>
</Border>
<Border Grid.Row="11"
Grid.Column="1"
Name="xAxisBorder"
BorderBrush="Black">
<!--this canvas is written to in DrawGraph.cs -->
<Canvas Name="xAxis"/>
</Border>
<Border x:Name ="GraphAxis"
Grid.Row="1"
Grid.Column="1"
Grid.RowSpan="10"
BorderThickness="2,2,2,2"
BorderBrush="Black"
Loaded="GraphAxis_Loaded">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop x:Name="GraphStop2"
Offset="0.554" Color="White"/>
</LinearGradientBrush>
</Border.Background>
<!--this path is written to in DrawGraph.cs -->
<Path x:Name="GraphLine"
StrokeThickness="2"
Data="M0,0">
<Path.Stroke>
<SolidColorBrush Color="Black"/>
</Path.Stroke>
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="LightPink"
Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Border>
<!--These borders draw the grid-lines on the graph-->
<Border Grid.Row="1"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black"/>
<Border Grid.Row="2"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="3"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="4"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<!--This border is for drawing the x-axis for -ve inflation-->
<Border Grid.Row="5"
Grid.Column="1"
x:Name="xAxisLine1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="6"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="7"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="8"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border Grid.Row="9"
Grid.Column="1"
BorderThickness="0,0,0,0.5"
BorderBrush="Black">
</Border>
<Border x:Name="xAxisLine2"
Grid.Row="10"
Grid.Column="1"
BorderThickness="0,0,0,2"
BorderBrush="Black">
</Border>
</Grid>
</Border>
</Grid>
Here's the code-behind with the instantiation of the object which draws the graph line (the Path called GraphLine in the XAML:
public void GraphAxis_Loaded(object sender, RoutedEventArgs e)
{
ApplicationDataContainer appData = ApplicationData.Current.RoamingSettings;
Country selectedCountry = CountryDataSource.GetCountry((int)appData.Values["Country"]);
string month1 = selectedCountry.FirstMonth, month2 = selectedCountry.LastMonth;
int year1 = selectedCountry.FirstYear, year2 = selectedCountry.LastYear;
DrawGraph dGraph = new DrawGraph(selectedCountry, month1, year1, month2, year2,
GraphAxis.ActualHeight, GraphAxis.ActualWidth, GraphLine, xAxis, xAxisBorder, yAxis, MainGrid, xAxisLine1, xAxisLine2);
}
}
...and finally here's the DrawGraph class:
public class DrawGraph
{
List<String> months = new List<string> { "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC" };
public DrawGraph(Country currentC, string nearMonth, int nearYear, string farMonth, int farYear, double cHeight, double cWidth, Path pGraphLine, Canvas xAxis, Border xAxisBorder, Canvas yAxis, Grid GraphGrid, Border xAxisLine1, Border xAxisLine2)
{
int periods = 0, years = farYear - nearYear, firstDateIndex = 0, lastDateIndex = 0, n = 0, prIndex = 0, yScalePve = 0, yScaleNve = 0, yScaleExtent = 0;
double endDateIndex, minFactor = 1000, maxFactor = 0, inflationFactor,
baseFactor = 0, yOffSet = 0;
plotPoint[] plotResults;
cHeight -= 4; // this is for the 4 pixels taken up by the border
// count up the months between the start and end points
foreach (KeyValuePair<string, double> rpiRecord in currentC.RpiData)
{
if (rpiRecord.Key == nearMonth + nearYear.ToString())
{
firstDateIndex = n;
}
if (rpiRecord.Key == farMonth + farYear.ToString())
{
lastDateIndex = n;
}
n++;
}
// calculate the number of points to plot
periods = lastDateIndex - firstDateIndex + 1;
// put together the array of dates (relative) and factors to plot
if (periods > 1)
{
plotResults = new plotPoint[periods];
n = 0;
foreach (KeyValuePair<string, double> rpiRecord in currentC.RpiData)
{
if (n >= firstDateIndex & n <= lastDateIndex)
{
if (n == firstDateIndex)
{
baseFactor = rpiRecord.Value;
plotResults[prIndex] = new plotPoint(prIndex, 0);
minFactor = 0;
maxFactor = 0;
}
else
{
// get the inflation factor and date position and populate the plotPoints array
inflationFactor = (rpiRecord.Value - baseFactor) / baseFactor * 100;
plotResults[prIndex] = new plotPoint(prIndex, inflationFactor);
// these are used for the height scaling
if (inflationFactor > maxFactor)
{
maxFactor = inflationFactor;
}
if (inflationFactor < minFactor & rpiRecord.Value != 0)
{
minFactor = inflationFactor;
}
}
prIndex++;
}
n++;
}
// now decide on the y-axis scale
// firstly, is the maximum in the units, tens, hundreds or thousands
if (maxFactor - 1 < 0)
{
yScalePve = 1;
}
else if (maxFactor - 2 < 0)
{
yScalePve = 2;
}
else if (maxFactor - 5 < 0)
{
yScalePve = 5;
}
else if (maxFactor - 10 < 0)
{
yScalePve = 10;
}
else if (maxFactor - 50 < 0)
{
yScalePve = 50;
}
else if (maxFactor - 100 < 0)
{
yScalePve = 100;
}
else if (maxFactor - 500 < 0)
{
yScalePve = 500;
}
else if (maxFactor - 1000 < 0)
{
yScalePve = 1000;
}
else if (maxFactor - 5000 < 0)
{
yScalePve = 5000;
}
else
{
yScalePve = 10000;
}
if (minFactor < 0)
{
if (minFactor + 1 > 0)
{
yScaleNve = 1;
}
else if (minFactor + 2 > 0)
{
yScaleNve = 2;
}
else if (minFactor + 5 > 0)
{
yScaleNve = 5;
}
else if (minFactor + 10 > 0)
{
yScaleNve = 10;
}
else if (minFactor + 50 > 0)
{
yScaleNve = 50;
}
else if (minFactor + 100 > 0)
{
yScaleNve = 100;
}
else if (minFactor + 500 > 0)
{
yScaleNve = 500;
}
else if (minFactor + 1000 > 0)
{
yScaleNve = 1000;
}
else if (minFactor + 5000 > 0)
{
yScaleNve = 5000;
}
else
{
yScaleNve = 10000;
}
// calculate the position of the xAxis on the yScale
if (maxFactor <= minFactor * -100) // this is to prevent small -ves moving the x-axis to the middle
{
yOffSet = cHeight / 2;
}
}
// calculate the position of the xAxis on the yScale
yScaleExtent = yScalePve + yScaleNve;
if (cHeight > 0) // this prevents the borders being re-sized before the grids have been rendered
{
// this re-sizes the rows in the grid displaying the graph - there is a border in the 5th row (defined in the XAML)
// which acts as the x axis and this adjusts the line thickness to where the x axis should be
if (yOffSet == 0)
{
// this draws the x-axis when it is at the bottom position
xAxisLine1.BorderThickness = new Thickness(0, 0, 0, 1);
xAxisLine2.BorderThickness = new Thickness(0, 0, 0, 2);
cHeight += 1; // this is for the extra pixel taken up by the border
}
else
{
// this draws the x-axis when it is at the middle position
xAxisLine1.BorderThickness = new Thickness(0, 0, 0, 2);
xAxisLine2.BorderThickness = new Thickness(0, 0, 0, 1);
cHeight -= 1; // this is for the extra pixel taken up by the border
}
}
// this is used for the width scaling
endDateIndex = plotResults[plotResults.Length - 1].plotDate;
// zero-base the plot results
plotResults[0].plotDate = 0;
plotResults[0].plotFactor = 0 + yOffSet;
PathFigure myPathFigure = new PathFigure();
myPathFigure.StartPoint = new Point(0, cHeight - yOffSet);
PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
for (int x = 1; x < plotResults.Length; x++)
{
// re-base the array dates with respect to the plot area width
plotResults[x].plotDate *= cWidth / endDateIndex;
// re-base the array factors with respect to the y-axis
plotResults[x].plotFactor = plotResults[x].plotFactor / yScaleExtent;
// then re-base the array into the units of the plot area
plotResults[x].plotFactor = plotResults[x].plotFactor * (cHeight - yOffSet);
// generate the LineSegment objects for each plotPoint
LineSegment myLineSegment = new LineSegment();
myLineSegment.Point = new Point(plotResults[x].plotDate, (cHeight - yOffSet) - plotResults[x].plotFactor);
myPathSegmentCollection.Add(myLineSegment);
}
// these 2 additional line segments create an enclosed polygon for the fill to go into
LineSegment myLineSegment1 = new LineSegment();
// this line draws down vertically on the right-hand y axis
myLineSegment1.Point = new Point(cWidth, cHeight - yOffSet); //
myPathSegmentCollection.Add(myLineSegment1);
LineSegment myLineSegment2 = new LineSegment();
// this line draws across to the left on the x axis
myLineSegment2.Point = new Point(0, cHeight - yOffSet);
myPathSegmentCollection.Add(myLineSegment2);
// this sets up the LineSegments for the PathFigure, the
// PathFigure for the PathGeometry and the PathGeometry for the PathData!!
myPathFigure.Segments = myPathSegmentCollection;
PathFigureCollection myPathFigureCollection = new PathFigureCollection();
myPathFigureCollection.Add(myPathFigure);
PathGeometry myPathGeometry = new PathGeometry();
myPathGeometry.Figures = myPathFigureCollection;
pGraphLine.Data = myPathGeometry;
Calculate_xAxis(nearYear, farYear, nearMonth, farMonth, xAxis, xAxisBorder);
Calculate_yAxis(yScalePve, yScaleNve, xAxis, yAxis, yOffSet);
}
}
Issue:
I want to display this graphing control within a FlipView which is bound to an observable collection which holds sets of data used by both the FlipView and the path-drawing class. As you can see in the code-behind, there is no data binding in the graph control itself. The data is obtained from the ApplicationData and control element sizes within the UserControl itself. This all works fine when the FlipView starts up but when I flip the pages the graphs do not update.
I have looked at this problem from a couple of points-of-view:
Firstly, it appears to be the case that when flipping the pages in the FlipView, the loaded event does not re-fire on the axis control (a Border) within the UserControl within the FlipView, but it does fire first time around. I cannot find any other event to hook into other than the loaded event.
Secondly, would it be possible to make the entire graph work off data-binding? I understand that I'd have to create Dependency Properties in the UserControl to do this but even then, I would still need to instantiate a DrawGraph in code-behind somehow.
Can anyone here see if there is a solution to this problem? Or am I approaching this incorrectly? Should I be putting all of the DrawGraph functionality into a routine somewhere else which pre-populates the Observable Collection with all of the plot-points and then bind the graph UserControl to this?
Any suggestions most welcome. I'm fairly new to this and this is my first posting here and am hopeful that someone can educate me in my approach. Thank you
How can I append an Image object into a Grid and set it's Row and Column?
The grid is 3x3.
Main file:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="440" Width="400" ResizeMode="NoResize">
<Window.Background>
<ImageBrush ImageSource="C:\Users\GuyD\AppData\Local\Temporary Projects\WpfApplication1\AppResources\Background.png"></ImageBrush>
</Window.Background>
<Grid ShowGridLines="True" x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="42" />
<RowDefinition Height="30*" />
<RowDefinition Height="30*" />
<RowDefinition Height="32*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="26*" />
<ColumnDefinition Width="32*" />
</Grid.ColumnDefinitions>
</Grid>
</Window>
Code behind file:
public MainWindow()
{
InitializeComponent();
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
Image Box = new Image();
this.myGrid.Children.Add(Box);
}
}
}
The Grid setter methods are static.
To place them in row 1 column 1:
Image Box = new Image();
myGrid.Children.Add(Box);
Grid.SetRow(Box, 1);
Grid.SetColumn(Box, 1);
You can use following to set for any UIElement
Grid.SetRow(Box, i);
Grid.SetColumn(Box, j);
for (int i = 0; i < 4; i++)
{
for (int j = 0; j < 3; j++)
{
Image Box = new Image();
this.myGrid.Children.Add(Box);
Grid.SetRow(Box, i);
Grid.SetColumn(Box, j);
}
}
And yes the Grid is of 4X3 not of 3X3 dimensions. I hope this will help.
Try this:
public MainWindow() {
InitializeComponent();
for (int i = 0; i < 3; i++)
{
for (int j = 0; j < 3; j++)
{
Image Box = new Image();
Grid.SetRow(Box, i);
Grid.SetColumn(Box, j);
}
}
}