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.

Hello,

Here you have the windows vista login screen made all in XAML. To download the complete Project click here.

If you have question please ask and I will answer to you.

Vista Login Screen

The graphical element where the image will be placed it’s just a Border that has inside some PATHS those were made in Microsoft Expression Design and exported to XAML.

The TextBox where you insert the user name it’s a normal text with a custom style which has 2 BORDER elements and inisde has the CONTENTPRESENTER:

<Border x:Name="OuterBorder" BorderBrush="#5AFFFFFF" BorderThickness="1,1,1,1? CornerRadius="4,4,4,4?>
<Border x:Name="InnerBorder" Background="#FFFFFFFF" BorderBrush="#33000000? BorderThickness="1,1,1,1? CornerRadius="3,3,3,3?>
<ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost"/>
</Border>
</Border>

The passworBox is the same only that has a Label with “Password” int the Content. Also i have put an trigger “IsFocused” which hides the label.

<ControlTemplate TargetType="{x:Type PasswordBox}">
<Border x:Name="OuterBorder" BorderBrush="#5AFFFFFF" BorderThickness="1,1,1,1? CornerRadius="4,4,4,4?>
<Border x:Name="InnerBorder" Background="#FFFFFFFF" BorderBrush="#33000000? BorderThickness="1,1,1,1? CornerRadius="3,3,3,3?>
<Grid>
<Label x:Name="lblPwd" Content="Password" FontSize="11? VerticalAlignment="Center" Margin="2,0,0,0? FontFamily="Verdana" Foreground="#828385? Padding="0?/>
<ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost"/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" TargetName="lblPwd" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Sample code