Display PopUp for Collapsed State Content in C1OutlookBar

When MS OutlookBar is in collapsed state, it shows the content of the selected item in a popup window. However, C1OutlookBar for Silverlight does not mimic this feature; perhaps it will be added in some future version. The functionality is easy to implement with some minor tweaks. In this post, we will see how we can implement the same. The basic idea is to:-

1. Edit the default template and add a popup to show the content. We will use a C1Window as a popup. You can use native ContentPresenter too.
2. When C1OutlookBar is collapsed, toggle the visibility of the popup window when collapsed content is clicked. Set the window content to the C1OutlookBar's selected item content.

Below is the custom C1OutlookBar class which extends the functionality:-

public class ExtendedOutlookBar : C1OutlookBar  
{  
    public ExtendedOutlookBar()  
    {  
       DefaultStyleKey = typeof(ExtendedOutlookBar);  
    }  

    private bool _isopen = false;  
    private UIElement Content { get; set; }  
    private C1OutlookItem _lastselected;  
    private int currentindex = -1;  

    public override void OnApplyTemplate()  
    {  
        base.OnApplyTemplate();  
        var bdr = GetTemplateChild("CollpasedStateBorder") as Border;  

        var cp = GetTemplateChild("ContentPresenter") as ContentPresenter;  
        var win = GetTemplateChild("CollapsedContentPopUp") as  C1Window;  
        var btn = GetTemplateChild("ExpandButton") as Button;  

        btn.Click += (s, e) =>  
        {  
           if (this.IsExpanded == true)  
           {  
                if (win.Content != null)  
               {  
                   Content = win.Content as UIElement;  
                   win.Content = null;  
                  _lastselected.Content = Content;  
                   cp.Content = Content;  
               }  
               win.Visibility = Visibility.Collapsed;  
               _isopen = false;  
               currentindex = -1;  
           }  
        };  

      this.SelectedItemChanged += (s, e) =>  
      {  
           if((_isopen)  && (this.IsExpanded==false))  
           {  
               if (_lastselected != null)  
               {  
                  Content = win.Content as UIElement;  
                  win.Content = null;  
                  _lastselected.Content = Content;  
                }  
                currentindex = this.SelectedIndex;  
                Content = (this.SelectedItem as C1OutlookItem).Content as UIElement; ;  
                (this.SelectedItem as C1OutlookItem).Content = null;  
                win.Content = Content;  
                _lastselected = this.SelectedItem as C1OutlookItem;  
            }  
        };  

        bdr.MouseLeftButtonDown += (s, e) =>  
       {  
           if (this.IsExpanded == false)  
           {  
              if ((!_isopen) && (currentindex != this.SelectedIndex))  
              {  
                 currentindex = this.SelectedIndex;  
                 if ((\_lastselected != null) && (\_lastselected.Content == null))  
                {  
                    Content = win.Content as UIElement;  
                    win.Content = null;  
                   _lastselected.Content = Content;  
                }  
                Content = (this.SelectedItem as C1OutlookItem).Content as UIElement; ;  
                (this.SelectedItem as C1OutlookItem).Content = null;  
                _lastselected = this.SelectedItem as C1OutlookItem;  
                win.Content = Content;  
                win.Visibility = Visibility.Visible;  
               _isopen = true;  
             }  
             else if ((_isopen == false) && (currentindex == this.SelectedIndex))  
             {  
                win.Visibility = Visibility.Visible;  
               _isopen = true;  
             }  
             else if (currentindex == this.SelectedIndex)  
             {  
                win.Visibility = Visibility.Collapsed;  
                _isopen = false;  
             }  
          }  
       };  
    }  
}

Even though the above Class is written to work with unbound scenarios, the approach remains same for bound mode as well. Please refer to attached sample for detailed implementation. Download Sample