Part I :Traffic Alert App - Take the pain out of driving

In the past few weeks I have creating some sample apps and in the next few weeks wou will get to see them. The first app is called TrafficAlert. Now as the name says it alerts you about traffic conditions. I have always had this problem of analyzing traffic maps because they show so many red, yellow green spots that its hard to get the details easily. So this app tries to do away with the analysis of the traffic maps. Rather it is one level higher and it provides a list view of the traffic conditions grouped as highways. Consequently you get a better perspective and hence, you can plan your driving route much more easily. Before talking anything more lets just have a look.

This makes things a lot easier than explaining. :) . Now that we have seen it lets dive into the code.

We begin with creating a simple WinFX Windows app which provides with an App.xaml and a Window1.xaml file along with their associated .cs files. Now the entire code goes into the Window1 files. So in this post lets have a look at the UI and in the subsequent post we'll look at the code behind it. :)

 

 <Window x:Class="trafic.Window1"xmlns="https://schemas.microsoft.com/winfx/avalon/2005"xmlns:x="https://schemas.microsoft.com/winfx/xaml/2005"Title="Traffic Alert" ShowInTaskbar="true"Name ="w1"Loaded="WindowLoaded"Background="beige" Width="400"Height ="700" Icon="pack://siteoforigin:,,,/heart.ico"><StackPanel Name="sp">   <StackPanel.Resources>   </StackPanel.Resources>   <WrapPanel>      <Rectangle Stroke="black" Fill="orangered" Height="12" Width="12"/>      <Label>Critical</Label>      <Rectangle Stroke="black" Fill="Orange" Height="12" Width="12"/>      <Label>Major</Label>      <Rectangle Stroke="black" Fill="Yellow" Height="12" Width="12"/>      <Label>Minor</Label>      <Button Name="ZipCode" Click="ButtonClick">         <Button.Background>               <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">                  <LinearGradientBrush.GradientStops>                     <GradientStopCollection>                        <GradientStop Color="red" Offset="0" />                        <GradientStop Color="yellow" Offset="1" />                     </GradientStopCollection>                  </LinearGradientBrush.GradientStops>               </LinearGradientBrush>         </Button.Background>            ZipCode      </Button>   </WrapPanel>   <Label Name="Location" FontWeight="bold"/>   <ScrollViewer HorizontalScrollBarVisibility="auto" 
VerticalScrollBarVisibility="hidden" Name="sv">      <TreeView Name="tv" BorderThickness="0" SizeChanged="tv_SizeChanged">         <TreeView.Background>            <LinearGradientBrush>               <LinearGradientBrush.StartPoint>                  <Point X="0" Y="0"/>               </LinearGradientBrush.StartPoint>               <LinearGradientBrush.EndPoint>                  <Point X="1" Y="1"/>               </LinearGradientBrush.EndPoint>               <LinearGradientBrush.GradientStops>                     <GradientStop Color="red" Offset="0"/>                     <GradientStop Color="black" Offset="1.15"/>               </LinearGradientBrush.GradientStops>            </LinearGradientBrush>         </TreeView.Background>     </TreeView>   </ScrollViewer></StackPanel></Window>

Pretty simple huh! Theres nothing much to it except for the use of gradientBrushes. This gives a very polished look to the app.

The first gradient brush is applied to the button and it is from top to bottom while the one applied to the treeView is diagonal.
This is based on the StartPoint and EndPoint. We have a sizeChanged event on the treeView and that basically is used to resize the window so that scrollbars are used minimally.

And one more thing, this is not a perfect app - so we can have further modifications. But one thing is sure - it works!! and thats what
counts in a sample app ;)

Ciao until the next post

Comments

• Anonymous
  January 17, 2006
  I think you really need to change those colors. Red-Black gradient as an application background is very harsh....
• Anonymous
  January 18, 2006
  I agree that to some it may appear harsh. But changing it is not much pain either. The idea here is to show how a color gradient can be acheived.
  PS: I did think of having a color customization feature for the reason you mentioned. Alas, the shortage of time ;)