Rich Application

Posts Tagged ‘Listbox

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 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}"
                    </grid><grid .RowDefinitions>
                        <rowdefinition Height="Auto"/>
                        <rowdefinition Height="Auto"/>

                    <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}">

                            <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" />


            </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 Property="IsEnabled" Value="false">
                    <setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>

Here is the Source
Source Contains Animated Listbox Style too

By default Listbox will list the data in Vertical style. WPF gives us easy option to change Listbox Orientation and content in desired way.

Styling of Listbox mainly depends on three templates. ControlTemplate, ItemTemplate, ItemPanelTemplate

ControlTempalte : This used to change Appearance for Listbox. Default Listbox Control Template will have MainContainer(Grid,Border) ,Scrollviewer and ItemPresenter.

Main container : To Set Background, Border etc…

ScrollViewer :Container to Scrollbar to Listbox.

ItemPresenter : This is the main Control for Listbox. We should have ItemPresenter to display the Content in Listbox.

<controltemplate TargetType="{x:Type ListBox}">
                        <border x:Name="Bd" SnapsToDevicePixels="true" Background="Gray"
                                BorderBrush="Darkgray"  BorderThickness="1">
                            <scrollviewer Padding="{TemplateBinding Padding}" Focusable="false">

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

                        </controltemplate><controltemplate .Triggers>
<trigger Property="IsEnabled" Value="false">
								<setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<trigger Property="IsGrouping" Value="true">
								<setter Property="ScrollViewer.CanContentScroll" Value="false"/>

ItemTemplate : Item template can have any control to bind with data eg:

  <datatemplate x:Key="ItemTemplate">
                <image x:Name="img" Source="{Binding XPath=Thumbnail}" Width="125" Stretch="Uniform" RenderTransformOrigin="0,0">

                <border Background="#66000000" Height="20" Opacity="0" VerticalAlignment="Bottom" x:Name="txtBorder" BorderBrush="#FF1c1c1c" BorderThickness="0,2,0,0">
                    <textblock Margin="5,0,0,0" VerticalAlignment="Center" FontWeight="Bold" Text="{Binding XPath=Description}" Foreground="#FFffffff"/>


ItemPanelTemplate : Container present inside the this Template will decide the apperance of Listboxitems. By default ItempanelTemplate will have VirtualizingStackPanel with orientation vertical. We can change the orientation horizontal, and we can use any container instead of VirtualizingStackPanel.


Code to Apply Style to our Lsitbox

	<listbox Template="{DynamicResource ListBoxStyle}"
                 ItemTemplate="{DynamicResource ItemTemplate}" 

                 IsSynchronizedWithCurrentItem="True"  ItemsPanel="{DynamicResource ItemsPanelTemplate1}" 


  • I love what you guys tend to be up too. This sort of clever work and reporting! Keep up the amazing works guys I've included you guys to our blogrol
  • incense burner: This is very interesting, You are an excessively professional blogger. I have joined your rss feed and look forward to looking for more of your fanta
  • Online Low cost Hotels scheduling in The capital: We're a bunch of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful info to work on. You've performed
June 2017
« Feb