Subscribe to There and Back again, a Coders Blog        RSS Feed
-----

Gradiant Borders

Icon Leave Comment
Here is a little something something for you all looking to do gradiant borders. This may not fit everyones taste but you can use it to partially what you are looking for.

I personally am using this XAML as a backdrop template for my Silverlight apps, when doing stuff like Login overlays, or ad-hoc data entry that requires immediate information input.

Since the XAML framework is not really designed (when doing custom displays as such) for clean formatting, but verry good at detailing specific layouts if you know what you are looking for.

<Grid x:Name="LayoutRoot" Cursor="Hand">
  <Grid.RowDefinitions>
    <RowDefinition Height="50" />
    <RowDefinition Height="150" />
    <RowDefinition Height="50" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="150" />
    <ColumnDefinition Width="50" />
  </Grid.ColumnDefinitions>
  <Border Grid.Row="0" Grid.Column="0" CornerRadius="10,0,0,0" >
    <Border.Background>
      <RadialGradientBrush Center="1,1" RadiusX="1" RadiusY="1" GradientOrigin="1,1">
        <GradientStop Color="silver" Offset="0.5" />
        <GradientStop Color="Transparent"  Offset=".98"/>
      </RadialGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="2" Grid.Column="0" CornerRadius="0,0,10,0">
    <Border.Background>
      <RadialGradientBrush Center="1,0" RadiusX="1" RadiusY="1" GradientOrigin="1,0">
        <GradientStop Color="Silver" Offset=".5" />
        <GradientStop Color="Transparent" Offset=".98" />
      </RadialGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="0" Grid.Column="2" CornerRadius="0,10,0,0">
    <Border.Background>
      <RadialGradientBrush Center="0,1" RadiusX="1" RadiusY="1" GradientOrigin="0,1">
        <GradientStop Color="Silver" Offset=".5" />
        <GradientStop Color="Transparent" Offset=".98" />
      </RadialGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="2" Grid.Column="2" CornerRadius="0,0,0,10">
    <Border.Background>
      <RadialGradientBrush Center="0,0" RadiusX="1" RadiusY="1" GradientOrigin="0,0">
        <GradientStop Color="Silver" Offset=".5" />
        <GradientStop Color="Transparent" Offset=".98" />
      </RadialGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="1" Grid.Column="0">
    <Border.Background>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Silver" Offset=".5"/>
      </LinearGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="0" Grid.Column="1">
    <Border.Background>
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Silver" Offset=".5" />
      </LinearGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="1" Grid.Column="2">
    <Border.Background>
      <LinearGradientBrush StartPoint="1,1" EndPoint="0,1">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Silver" Offset=".5" />
      </LinearGradientBrush>
    </Border.Background>
  </Border>
  <Border Grid.Row="2" Grid.Column="1">
    <Border.Background>
      <LinearGradientBrush StartPoint="1,1" EndPoint="1,0">
        <GradientStop Color="Transparent" Offset="0" />
        <GradientStop Color="Silver" Offset=".5" />
      </LinearGradientBrush>
    </Border.Background>
  </Border>
  <Canvas Grid.Row="1" Grid.Column="1" Background="Silver" />
</Grid>

0 Comments On This Entry

 

Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry

0 user(s) viewing

0 Guests
0 member(s)
0 anonymous member(s)

Search My Blog

December 2014

S M T W T F S
 123456
78910111213
14151617 18 1920
21222324252627
28293031   

Recent Entries