Docking Like Mac OSX Dock in WPF

Question

As Here on the link is a nice docking application but I need something like Mac OSX dock, It Docks at a side without taking the screen, and when we need it it's there.

Please tell me docking solution that does not take up the screen space.

                                                              Thanks in Advance.

Answer 1

Here's a shot in the dark, based on what I imagine you're trying to achieve. I'm going to assume you're running a Window based full trust local app. Trust probably won't matter, just setting context.

There are three pieces to the solution I'm imagining:

Window1.xaml (your main app window)
 <Window blah blah>
  <Grid>
  <!--Your application content-->
    <local:PseudoDock VerticalAlignment='Bottom' />
  </Grid>
</Window>

PseudoDock.xaml
<UserControl Height='5'>
 <UserControl.Triggers>
  <Trigger Property='FrameworkElement.IsMouseOver'>
   <Setter Property='Height' Value='NaN' />
  </Trigger>
 </UserControl.Triggers>
 <ItemsControl>
  <ItemsControl.ItemsPanelTemplate>
   <StackPanel Orientation='Horizontal' />
  </ItemsControl.ItemsPanelTemplate>
  <ItemsControl.ItemTemplate>
   <DataTemplate>
    <Button Command='{Binding Path=Command}'>
     <StackPanel>
      <Image Source='{Binding Path=Icon}' />
      <TextBlock Source='{Binding Path=Label}' />
     </StackPanel>
    </Button>
   </DataTemplate>
  </ItemsControl.ItemTemplate>
 </ItemsControl>
</UserControl>

The important thing about the dock is that it's 5 pixels tall, which is unnoticeable at the bottom, and has a mouseover which raises it to full height. (You could also try setting an explicit height, I imagine that setting the height to NaN will have it measure against its children but I could be wrong).

Lastly, the structure of the items which make up the dock:

DockItem.cs
class DockItem{
 ICommand Command{get;set;}
 String Label{get;set;}
 ImageSource Icon{get;set;}
}

(After comment exchange) If you're looking to have it transparently sit over the desktop you'll need to set it this way:

<Window WindowStyle='None' Background='Transparent' State='Maximized'>