XAML (WPF) BLOG

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.

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.