WPF Image Gallery

An Image Gallery for WPF.This is an WPF Listbox with DataBinding.
How to ?
By default Listbox will use VistualizingStackpanel as ItemsPanelTemplate. I changed it to ‘Grid’.
I set angle of rotation from data(XML) and binding it to Listboxitem rotation.

Gallery View :

On Image Selected :

Source is herete

Outlook Style Expander With XAML Only

Outlook will have collapsible left panel. If the panel is collapsed content will be displayed in the floating panel.I tried creating this in WPF with XAML without C#. I Created the Style but with hardcoding in two place.

This Expander style has tow template Default expander Template and one for Floating the Content. Here I used Popup control to get floating panel. And also I added two styles for Togglebutton used in expander, One for Horizontal Button Style and another for vertical Button Style

<controltemplate x:Key="RightExpander" TargetType="{x:Type Expander}">
<border SnapsToDevicePixels="true" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="3">
<grid>
</grid><grid .RowDefinitions>
<rowdefinition Height="Auto"/>
<rowdefinition Height="Auto"/>
</grid>

<togglebutton Width="{TemplateBinding ActualWidth}"   Margin="0,1,0,1" MinHeight="0" MinWidth="30" x:Name="HeaderSite"
Style="{StaticResource LeftPanelCollpasedButtonStyle}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}"
FontStretch="{TemplateBinding FontStretch}" FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}" Foreground="{TemplateBinding Foreground}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" DockPanel.Dock="Top"/>

<popup x:Name="popup" AllowsTransparency="True"  IsOpen="False" Placement="Bottom" PlacementTarget="{Binding ElementName=HeaderSite}">
<grid>

<contentcontrol x:Name="shadow" Visibility="Collapsed" HorizontalAlignment="Stretch" Style="{DynamicResource ShadowTemplate}"
VerticalAlignment="Stretch" Content="ContentControl"  Opacity="1"
Margin="2,0,2,0" Foreground="#FF000000"/>
<contentpresenter Opacity="1" MinWidth="220"  HorizontalAlignment="Left" Margin="0,0,0,0" x:Name="ExpandSite" Focusable="false" Visibility="Collapsed" VerticalAlignment="Top" />
</grid>

</popup>

</border>
</controltemplate><controltemplate .Triggers>

<trigger Property="IsExpanded" Value="true">
<setter TargetName="shadow" Property="Visibility" Value="Visible"/>
<setter TargetName="popup" Property="Placement" Value="Right"/>
<setter TargetName="popup" Property="HorizontalOffset" Value="-5"/>
<setter TargetName="popup" Property="IsOpen" Value="true"/>
<setter TargetName="ExpandSite" Property="Margin" Value="5,5,5,5"/>

<setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
</trigger>

<trigger Property="IsEnabled" Value="false">
<setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</trigger>
</controltemplate>

Here is the Source
Source Contains Animated Listbox Style too

US Map in Listbox – WPF

One more example to show the power of WPF styling. This is an Listbox with data binding.

XML Data

<map>
</map>

Here is the Source also here