Search code examples
wpfavalondock

WPF/AvalonDock: Switching StackPanel orientation depending on dock location


I'm building an app in WPF, using AvalonDock, partly because I think it'll be useful but mostly to teach myself some WPF and to get used to that style of programming in general. I've constructed the main "toolbox" of the app as a dockable pane so that it can be moved, pulled out or auto-hidden so that the user can make the most of their screen space, and inside it, I'm using a StackPanel to arrange the various buttons.

Is there a (relatively simple) way to have the StackPanel orient vertically when the toolbox is docked on the left or right, but horizontally when docked at the top or bottom? I'm sure there must be some way to bind the orientation to something rather than setting it directly, but I can't seem to find anything useful to bind it to.


Solution

  • How about something like that:

    Your StackPanel should be the following:

    <StackPanel Orientation="{Binding DockableStyle, 
                             RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Avalon:DockableContent}},
                             Converter={StaticResource MyConverter}">
      <!-- StackPanel content here -->
    </StackPanel>
    

    Your Myconverter having the following as a Convert method:

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
      DockableStyle style = value as DockableStyle
      if (style == DockableStyle.TopBorder || style == DockableStyle.BottomBorder)
      {
         return Orientation.Horizontal;
      }
      else
      {
         return Orientation.Vertical;
      }
    }
    

    I think this should do all the magic for you