Month: February 2011

Simple Grid.xaml

Posted on by coder
image_pdfimage_print


   
       
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="100*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="33*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="67*" />
    </Grid.ColumnDefinitions>

    <Button Content="Button No. 1" Grid.Row="0" Grid.Column="0" />
    <Button Content="Button No. 2" Grid.Row="1" Grid.Column="0" />
    <Button Content="Button No. 3" Grid.Row="2" Grid.Column="0" />

    <GridSplitter HorizontalAlignment="Center" Width="6"
                  Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" />

    <Button Content="Button No. 4" Grid.Row="0" Grid.Column="2" />
    <Button Content="Button No. 5" Grid.Row="1" Grid.Column="2" />
    <Button Content="Button No. 6" Grid.Row="2" Grid.Column="2" />
 
</Grid>

Use Grid to layout a Calendar

Posted on by coder
image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="Complex Grid Example">
    <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>
</Page>

Grid with Rectangle and GeometryDrawing

Posted on by coder
image_pdfimage_print


   
       

<Window x:Class="WPFBrushes.ColorAndAlpha"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Alpha Channel" Height="300" Width="300">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Rectangle Height="200" Width="200">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,10,10" ViewportUnits="Absolute" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <DrawingGroup>
                            <GeometryDrawing Brush="Black">
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,10,10" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="Red" Geometry="M0,10 L 0,0 10,0 10,1 1,1 1,10Z">
                            </GeometryDrawing>
                        </DrawingGroup>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>



    </Grid>

</Window>

Set Grid Row and Column for a Button

Posted on by coder
image_pdfimage_print


   
       
<Window x:Class="VeryBasicXAMLFile.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="VeryBasicXAMLFile" Height="300" Width="300"
    >
    <Grid>
      <Button 
        Width="134" 
        Height="27" 
        Name="button1"
        Margin="73,53,0,0" 
        Grid.RowSpan="1" 
        Grid.Row="0"
        VerticalAlignment="Top" 
        HorizontalAlignment="Left"
        Grid.Column="0" 
        Grid.ColumnSpan="1"
        >
        Button
        </Button>
    </Grid>
</Window>

Arrange UI Elements in a Grid

Posted on by coder
image_pdfimage_print


   
       

<Window x:Class="Main"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF" Height="200" Width="250">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition MinHeight="50" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Button Content="Button spanning 3 rows" Grid.RowSpan="3">
            <Button.LayoutTransform>
                <RotateTransform Angle="90" />
            </Button.LayoutTransform>
        </Button>
        <Button Content="Button spanning 2 columns" Grid.Column="1" 
                Grid.Row="0" Grid.ColumnSpan="2" />
        <Button Content="Button" Grid.Column="2" Grid.Row="2"/>
    </Grid>
</Window>

Grid with Column Definition and Row definition

Posted on by coder
image_pdfimage_print


   
       
<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="BlanchedAlmond" Stroke="Black" />
        <Ellipse Grid.Row="0" Grid.Column="1" Fill="BurlyWood"  Stroke="Black" />
        <Ellipse Grid.Row="0" Grid.Column="2" Fill="Red" 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="Red"  Stroke="Black" />
        <Ellipse Grid.Row="2" Grid.Column="2" Fill="BlanchedAlmond" 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"/>
    </Grid>
</Window>

Align Ellipses along with Grid

Posted on by coder
image_pdfimage_print


   
       
<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>