Gepost door: antonidol | zondag 15 november 2009

Silverlight Style: GlassBorderStyle

GlassBorderStyleCreated a simple, but nice Glass Border for a panel in my current Silverlight 3 project. I’d like to share it with you…

 

 

 

 

 

  <Style x:Key="GlassBorderStyle" TargetType="Border">
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0">
                <GradientStop Color="#33FFFFFF" Offset="0"/>
                <GradientStop Color="#C0FFFFFF" Offset="0.287"/>
                <GradientStop Color="#4011322D" Offset="0.683"/>
                <GradientStop Color="#33FFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#5811322D" Offset="0"/>
                <GradientStop Color="#3EFFFFFF" Offset="0.25"/>
                <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
                <GradientStop Color="#3EFFFFFF" Offset="0.75"/>
                <GradientStop Color="#BFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/>
        </Setter.Value>
    </Setter>
</Style>

To use this style:

<Border x:Name="GlassBorder" Height="100" Width="100" CornerRadius="10"
    Style="{StaticResource GlassBorderStyle}">
    <Button Content="OK"/>
</Border>

Njoy!


Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s

Categorieën

%d bloggers op de volgende wijze: