Category Archives: Flash/XAML/Silverlight

WPF TreeView (2Advance style) done in XAML

Hi,

Sorry for not posting any news tutorials, I’ve been busy with trying to add a news section to my site and now i’m currently working and a Silverlight version of my site.

As you can see in the picture below I’ve tried to  reproduce the Treeview from 2advanced.com website:

previewtree

Here is the code sample if you have any question please ask them and i will try to respond to them.

WPF 2advanced ListView Style

Hi,

Sorry for not posting earlier anything yet, but i have been busy so i decided to start a series in which i will try to create all the controls you can see in the site www.2advanced.com and first i started with the ListView control and styled it like the one you can see in the site.

In the below image you can see more details.

Img 2advanced
So the only things that i styled here was the ListView and The ListViewItem.

ListView:

The template of the listview is very simple it has a border and in that border the default contentpresenters of the listview:

<Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="4">

     <ScrollViewer Focusable="false" Padding="{TemplateBinding Padding}">

          <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

     </ScrollViewer>

</Border>

ListViewItem:

This control is a little bit complicated but not too much. So first is COntrolTemplate that it’s just a grid with 3 columns:

  1. a Path that draw the little corner as you can see it in the screenshot above;
  2. then a rectangle which is the little white “bulb” ;
  3. an finally the ContentPresenter;
<Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Path Margin="6,0,0,0" SnapsToDevicePixels="true" Grid.Column="0" x:Name="Path" Width="6" Height="5" Stretch="Fill" StrokeThickness="1" StrokeMiterLimit="2.75" Stroke="{TemplateBinding BorderBrush}" Data="F1 M 0,0L 0,5L 6,5"/>
<Rectangle Margin="6,0" x:Name="whiteSquare" SnapsToDevicePixels="true" Grid.Column="1" Fill="#FFFFFF" Width="3" Height="7">
<Rectangle.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="#ffffff" GlowSize="0" Opacity="1"/>
</Rectangle.BitmapEffect>
</Rectangle>
<ContentPresenter Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>

To make the animation on the trigger IsMouseOver i start and stop 2 storyboards.

<Trigger Property="IsMouseOver" Value="True"><Trigger.EnterActions><BeginStoryboard Storyboard="{StaticResource FadeIn}"/></Trigger.EnterActions>

<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
</Trigger.ExitActions>
</Trigger>

To see the code for the storyboards download the whole project from here.

For the next post i will make the nice slick ScrollBar.