I’ll start with a little UI trick for this series, glaring techy borders! ( I’m not even sure if “glaring” is the right word for it but anyway )
So I’ve been trying to get a light blue high-tech UI style for Towel as it fits the sci-fi ( or Starcraft 2 ) theme very well. You know like the high tech consoles from all mighty and glorious battleships. It was going rather well until I came across this little problem; when you put an unrelated image into a high-tech looking UI, it doesn’t blend well.
Notice how boring and insipid it looks. Obviously I needed some kind of border / frame for a proper transition but decided boring static borders wouldn’t cut it.
I also wanted something with animation, as I really believe that animations are what makes UI feel dead or alive. So I decided to try glaring lines which is very common among techy looking UI designs. I guess almost all sci-fi UI ever created has a variation of this.
It’s a very nice, subtle, non-distractive animation that fits so well with this kind of UI. And this is what the whole window looks like;
.jpg "Towel (15)")
So, how to do it? It’s rather easy really. All you have to do is to create a Border with LinearGradientBrush as BorderBrush.
BorderThickness=“2”
CornerRadius=“5”>
<Border.BorderBrush>
<LinearGradientBrush Opacity=“0.5” StartPoint=“0,0” EndPoint=“1,1”>
<GradientStop x:Name=“GradientStop1” Offset=“0.0” Color=“#FF057394” />
<GradientStop x:Name=“GradientStop2” Offset=“-0.1” Color=“#FF057394” />
<GradientStop x:Name=“GradientStop3” Offset=“0” Color=“#FF77DFFF” />
<GradientStop x:Name=“GradientStop4” Offset=“0.1” Color=“#FF057394” />
<GradientStop x:Name=“GradientStop5” Offset=“1.0” Color=“#FF057394” />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Triggers>
<EventTrigger RoutedEvent=“Border.Loaded”>
<BeginStoryboard>
<Storyboard RepeatBehavior=“Forever”>
<DoubleAnimation Duration=“0:0:5”
From=“-0.1”
Storyboard.TargetName=“GradientStop2”
Storyboard.TargetProperty=“Offset”
To=“1” />
<DoubleAnimation Duration=“0:0:5”
From=“0”
Storyboard.TargetName=“GradientStop3”
Storyboard.TargetProperty=“Offset”
To=“1.1” />
<DoubleAnimation Duration=“0:0:5”
From=“0.1”
Storyboard.TargetName=“GradientStop4”
Storyboard.TargetProperty=“Offset”
To=“1.2” />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<Image Source=”{Binding Screenshot}“/>
</Border>
As you can see all we need is a LinearGradientBrush and an EventTrigger that runs the animation.
Well I’m not really experienced in GradientBrushes really but I believe we need 5 stops for this kind of thing glare. It might also possible with 3 stops I guess (but then it won’t be slim/thin glare I’m afraid ) , got to experiment on stuff like that a little.
Animation starts running when the control is loaded and repeats forever. All it does is to move 3 middle stops bit by bit until it reaches the right end.
Hmm I guess that’s all? Yea pretty much
Oh I hope this works properly. If it works I’ll try to add live SL samples like this every time from now on.
OK it looks somewhat decent but straight lines and curved corners are still boring right? I’ll talk about how to fix that in the next post, hope you like this one!
Very nice example. Just what I needed.
If I make the border thickness large as to make the border flow behind my controls, it really makes a nice effect.
Glad you like it!