Align Ellipses along with Grid : Grid « Windows Presentation Foundation « C# / C Sharp

1. C# / C Sharp
2. Windows Presentation Foundation
3. Grid

Align Ellipses along with Grid

       
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Grid" Height="300" Width="300">
    <Grid Background="AliceBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="100" MaxWidth="200" />
            <ColumnDefinition MaxWidth="100" />
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition MinHeight="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Ellipse Grid.Row="0" Grid.Column="0" Fill="Red" Stroke="Black" />
        <Ellipse Grid.Row="0" Grid.Column="1" Fill="BurlyWood"  Stroke="Black" />
        <Ellipse Grid.Row="0" Grid.Column="2" Fill="BlanchedAlmond" Stroke="Black" />
        <Ellipse Grid.Row="0" Grid.Column="3" Fill="BurlyWood" Stroke="Black" />
        <Ellipse Grid.Row="1" Grid.Column="0" Fill="BurlyWood" Stroke="Black" />
        <Ellipse Grid.Row="1" Grid.Column="1" Fill="Red" Stroke="Black" />
        <Ellipse Grid.Row="1" Grid.Column="2" Fill="BurlyWood" Stroke="Black" />
        <Ellipse Grid.Row="1" Grid.Column="3" Fill="BlanchedAlmond" Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="0" Fill="BlanchedAlmond" Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="1" Fill="BurlyWood"  Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="2" Fill="Red" Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="3" Fill="BurlyWood" Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" Fill="Gold"  Stroke="Black" Height="50"/>
        <GridSplitter Grid.RowSpan="3" Width="10" BorderThickness="2" Grid.IsSharedSizeScope="True">
            <GridSplitter.BorderBrush>
                <SolidColorBrush Color="Black" />
            </GridSplitter.BorderBrush>
        </GridSplitter>
    </Grid>
</Window>

   
    
    
    
    
    
    
  

Related examples in the same category

1.	GridSplitter Example
2.	GridSplitter as Entire Column or Row
3.	ColumnDefinition.Width=Auto
4.	ColumnDefinition.Width=*
5.	Grid With Splitter
6.	Bind to Grid Width and Height
7.	Simple Grid.xaml
8.	Use Grid to layout a Calendar
9.	Grid with Rectangle and GeometryDrawing
10.	Set Grid Row and Column for a Button
11.	Arrange UI Elements in a Grid
12.	Grid with Column Definition and Row definition
13.	Use GridSplitter
14.	Define rows / columns for Grid
15.	Using Grid.ColumnSpan
16.	Set Grid Row Height and Column Width to Auto
17.	Mixing row height styles
18.	Show Grid Lines
19.	Multiple Items in a Grid Cell
20.	Grid in ScrollViewer
21.	Margin vs Padding and Grid
22.	Without Panel.ZIndex
23.	Panel.ZIndex
24.	Stretched GridSplitter
25.	Window with Grid
26.	Arrange the children for Grid
27.	Set Row Height and column Width for Grid
28.	Set Row and Column Index when Adding Buttons to Grid
29.	Put more than one Object to one Grid Cell
30.	Set Column and Row index when adding Controls to a Grid
31.	Nested Grid
32.	Shared Size Group
33.	Empty RowDefinition and ColumnDefinition
34.	Grid Splitter and Alignment
35.	Use the Grid element to create a standard user interface (UI) dialog box.
36.	Place and size rectangles and ellipses in Grid cells
37.	Use Image as the Grid background
38.	Automatic Width and Height
39.	Grid with SharedSizeGroup
40.	Layout a Form with StackPanel and Grid
41.	Clear All Columns
42.	Clear All Rows
43.	Remove One Column
44.	Remove One Row
45.	The current number of Columns
46.	The current number of Rows
47.	Remove 5 Columns with ColumnDefinitions.RemoveRange
48.	Remove 5 Row with RowDefinitions.RemoveRange
49.	Contains Row
50.	Contains Column?
51.	Insert Row
52.	Insert Column
53.	Is Grid ReadOnly
54.	Grid mouse down event
55.	Grid Preview mouse down event
56.	Setting Grid row heights in code
57.	Layout Controls with Grid in code
58.	Set control to specific row and column in code
59.	Show Grid lines in code
60.	Programmatically use the positioning methods of Grid
61.	Add a ColumnDefinition to Grid
62.	Add a RowDefinition to Grid
63.	Grid PreviewMouseDown action and MouseDown action
64.	Grid MouseLeftButtonDown action and PreviewMouseLeftButtonDown action