Rich Application

Outlook Style Expander With XAML Only

Posted on: February 22, 2009

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


5 Responses to "Outlook Style Expander With XAML Only"

Thanks for sharing mate. : )

thanks a ton! this type of expander examples aren’t easy to find, this cleared out a lot of questions I had 🙂

Hi thank you so much for sharing this.

But a small doubt, when toggle button in unchecked width collapses to 30 but ListBox popup remains open. This happens when Expander is expanded and toggle button is made to collapse.

Is it possible to auto close popup when toggle button is closed?

The boolean animation in OnUnChecked to collapse processMangerExpander is not working as intended.

Any solution for this?

Great job! keep up the good work…

Hi..thats a good work. I’ve used this in my WPF learning, but observed that the listbox doesn’t provide scrollbar on size changes. I tried using TreeView instead, but could not get the scroll bar working. I’m a beginner and it has been very hard for me to figure out what the problem is. If you can fix the issue or let me know the fix for the issue, your help would be greatly appreciated. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

  • 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
February 2009
%d bloggers like this: