Mac Style DockBar Functionality in WPF

Question

I am trying to imitate the DockBar on Mac or the ObjectBar. In the process I hope to learn WPF Custom Controls and hopefully create a usable control for me and the community. So far I have this

<Window x:Class="WPFMacStyleTBar.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="356" Width="577">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="3">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="1" x:Name="btnHome" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
            <Button.Content>
                <Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Home.png"></Image>
            </Button.Content>
        </Button>
        <Button Grid.Column="2" x:Name="btnGlobe" Background="Transparent" BorderBrush="Transparent" Margin="0,0,47,0" Foreground="Transparent">
            <Button.Content>
                <Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Globe.png"></Image>
            </Button.Content>
        </Button>
        <Button Grid.Column="3" x:Name="btnNotes" Background="Transparent" BorderBrush="Transparent" Margin="0,0,49,0" Foreground="Transparent">
            <Button.Content>
                <Image Source="C:\Vikram\Projects\WPFMacStyleTBar\WPFMacStyleTBar\Images\Notes.png"></Image>
            </Button.Content>
        </Button>
    </Grid>        
</Grid>

It's a little rudimentary but I felt for starters this should be fine. The problem that I am facing are even after setting the background and the border to Transparent, the button border still shows up. On top of it I want to button region to cropped to that of the image. I would appreciate help on how this can be done.

EDIT

I found what I was looking for here

score 0 · Accepted Answer · answered Feb 08 '11 at 16:15

0

I think a wrap-panel (http://msdn.microsoft.com/en-us/library/system.windows.controls.wrappanel.aspx) would be a wiser choice than just limiting the buttons the user is able to set.

Also, you might as well create an style for your buttons and bind the button size to the image's size (Implement a check in the code-behind to set the max image size tho).

As for the non-transparent button borders, i dont really have a clue why that would of happen. Post a screenshot if possible ;)

answered Feb 08 '11 at 16:15

Machinarius

3,637
3
30
53

I will definitely check the wrap panel and post a screenshot if possible. Although just copying the given XAML should give you an idea what I meant. – vikramjb Feb 08 '11 at 16:39
You will have to create your very own Style and/or ControlTemplate for this.... http://msdn.microsoft.com/en-us/library/ms745683.aspx Will get you started ;) – Machinarius Feb 08 '11 at 17:08
The control template would definitely be heading in the right direction. Thanks for the link, appreciate it :). – vikramjb Feb 10 '11 at 19:07
No problem man, i myself would be interested in this kind of project. Tweet me @XDrknezz if you want some help ;) – Machinarius Feb 10 '11 at 23:57

Mac Style DockBar Functionality in WPF

1 Answers1