Use Grid to layout a Calendar : Grid « Containers « Silverlight






  1. Silverlight
  2. Containers
  3. Grid

Use Grid to layout a Calendar

Use Grid to layout a Calendar
    

<UserControl x:Class='SilverlightApplication3.MainPage'
    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' 
    mc:Ignorable='d' 
    d:DesignWidth='640' 
    d:DesignHeight='480'>

    <Border BorderBrush="Black">

        <Grid ShowGridLines="false" Background="White">

            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
            </Grid.RowDefinitions>


            <Rectangle Grid.ColumnSpan="7" Fill="#73B2F5"/>
            <Rectangle Grid.Row="1" Grid.RowSpan="6"  Fill="#73B2F5"/>
            <Rectangle Grid.Column="6" Grid.Row="1" Grid.RowSpan="6" Fill="#73B2F5"/>
            <Rectangle Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="5" Grid.RowSpan="6" Fill="#efefef"/>

            <TextBlock Grid.ColumnSpan="7" Margin="0,5,0,5" HorizontalAlignment="Center">
        Month 2004
            </TextBlock>
            <Rectangle Grid.Row="1" Grid.ColumnSpan="7" Fill="Black" RadiusX="1" RadiusY="1" Height="2" Margin="0,20,0,0"/>
            <TextBlock Grid.Column="0" >Sun</TextBlock>
            <TextBlock Grid.Column="1" >Mon</TextBlock>
            <TextBlock Grid.Column="2" >Tue</TextBlock>
            <TextBlock Grid.Column="3" >Wed</TextBlock>
            <TextBlock Grid.Column="4" >Thu</TextBlock>
            <TextBlock Grid.Column="5" >Fri</TextBlock>
            <TextBlock Grid.Column="6" >Sat</TextBlock>

            <TextBlock Grid.Column="4" Grid.Row="2">1</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="2">2</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="2">3</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="3">4</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="3">5</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="3">6</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="3">7</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="3">8</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="3">9</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="3">10</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="4">11</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="4">12</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="4">13</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="4">14</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="4">15</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="4">16</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="4">17</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="5">18</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="5">19</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="5">20</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="5">21</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="5">22</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="5">23</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="5">24</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="6">25</TextBlock>
            <TextBlock Grid.Column="1" Grid.Row="6">26</TextBlock>
            <TextBlock Grid.Column="2" Grid.Row="6">27</TextBlock>
            <TextBlock Grid.Column="3" Grid.Row="6">28</TextBlock>
            <TextBlock Grid.Column="4" Grid.Row="6">29</TextBlock>
            <TextBlock Grid.Column="5" Grid.Row="6">30</TextBlock>
            <TextBlock Grid.Column="6" Grid.Row="6">31</TextBlock>
        </Grid>
    </Border>
</UserControl>








Related examples in the same category

1.Positioning UI Elements with a GridPositioning UI Elements with a Grid
2.A Simple Grid ControlA Simple Grid Control
3.Span two rows and two columns with an Image control
4.Implementing a Grid to Set the Layout of Silverlight Controls
5.Grid exampleGrid example
6.ColumnSpan exampleColumnSpan example
7.Grid example 2* row and column definitionsGrid example 2* row and column definitions
8.Set Grid Row and Column for a Button
9.Grid with Column Definition and Row definitionGrid with Column Definition and Row definition
10.Define rows / columns for GridDefine rows / columns for Grid
11.Using Grid.ColumnSpanUsing Grid.ColumnSpan
12.Set Grid Row Height and Column Width to AutoSet Grid Row Height and Column Width to Auto
13.Mixing row height stylesMixing row height styles
14.Show Grid LinesShow Grid Lines
15.Multiple Items in a Grid CellMultiple Items in a Grid Cell
16.Grid in ScrollViewerGrid in ScrollViewer
17.Margin vs Padding and Grid
18.ColumnDefinition.Width=Auto
19.Bind to Grid Width and Height
20.Set Row and Column Index when Adding Buttons to Grid
21.Put more than one Object to one Grid Cell
22.Set Column and Row index when adding Controls to a Grid
23.Empty RowDefinition and ColumnDefinition
24.Use the Grid element to create a standard user interface (UI) dialog box.
25.Place and size rectangles and ellipses in Grid cellsPlace and size rectangles and ellipses in Grid cells
26.Use Image as the Grid backgroundUse Image as the Grid background
27.Automatic Width and HeightAutomatic Width and Height
28.Layout Controls with Grid in codeLayout Controls with Grid in code
29.Set control to specific row and column in codeSet control to specific row and column in code
30.Show Grid lines in codeShow Grid lines in code
31.A basic Grid using star sizing.A basic Grid using star sizing.
32.A basic Grid using auto sizingA basic Grid using auto sizing
33.The basic syntax of a GridThe basic syntax of a Grid
34.Arranging content within a GridArranging content within a Grid
35.Proportional GridProportional Grid
36.Nested GridsNested Grids
37.Grid cell stretch modeGrid cell stretch mode
38.Programmatically adding a row and a column while setting the height and widthProgrammatically adding a row and a column while setting the height and width
39.Programmatically removing a row and a columnProgrammatically removing a row and a column
40.The basic syntax and usage of a GridSplitterThe basic syntax and usage of a GridSplitter
41.Star sizing GridStar sizing Grid
42.Grid mouse button up eventGrid mouse button up event