XAML border renkleri- resim ekleme

border renkleri- resim ekleme

ÖRNEK :

5x5 bir grid oluşturalım, her hücre ayrı renkte olsun. Resim ekleyelim.

Adım 1: grid oluşturmak.

   <Grid >

    </Grid>

Adım 2: satır  tanımlamak.

<Grid.RowDefinitions>

        </Grid.RowDefinitions>

     Adım 3: satırları  oluşturmak.

<Grid.RowDefinitions>

            <RowDefinition Height="20*"></RowDefinition>

            <RowDefinition Height="20*"></RowDefinition>

            <RowDefinition Height="20*"></RowDefinition>

            <RowDefinition Height="20*"></RowDefinition>

            <RowDefinition Height="20*"></RowDefinition>

        </Grid.RowDefinitions>

    

Adım 4: kolon  tanımlamak.

<Grid.ColumnDefinitions>

        </Grid.ColumnDefinitions>

Adım 5: kolonları  oluşturmak.

            <ColumnDefinition Width="20*"></ColumnDefinition>

            <ColumnDefinition Width="20*"></ColumnDefinition>

            <ColumnDefinition Width="20*"></ColumnDefinition>

            <ColumnDefinition Width="20*"></ColumnDefinition>

            <ColumnDefinition Width="20*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

Adım 6: Borderları oluşturmak (Örnek olarak ikinci satırın kolonlarına renkleri ile beraber border oluşturalım ve renk kodlarını kullanarak renklendirelim. Diğer hücreleri aynı mantıkla yapabilirsiniz.)

        <Border Background="#9999cc" Grid.Column="4" Grid.Row="1"></Border>

        <Border Background="#99cccc" Grid.Column="3" Grid.Row="1"></Border>

        <Border Background="#99ffcc" Grid.Column="2" Grid.Row="1"></Border>

        <Border Background="#99ccff" Grid.Column="1" Grid.Row="1"></Border>

        <Border Background="#99ffff" Grid.Column="0" Grid.Row="1"></Border>

Adım 7: Hürelere resim eklemek.

İstediğimiz hücrenin border koduna aşağıdaki kodları ekleriz.

        <Border Background="#99ffcc" Grid.Column="2" Grid.Row="1">

<Image x:Name="networking_png" Margin="0,0,-2,1" Source="networking.png" Stretch="Fill"/>

</Border>