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

August 2014

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627 28 2930
31      

Recent Entries