How create this wpf toolbar

4
votes

I would like to create a toolbar like this on wpf.

enter image description here

What i need to use in order to create the area with the button circled in red ? Is it possible with the microsoft toolbar ?

For the moment i tried this :

enter image description here

Here is my xaml code :

    <ToolBarTray Background="#008ede" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="33" >
        <ToolBar ToolBarTray.IsLocked="True" Background="#008ede" HorizontalAlignment="Stretch"  VerticalAlignment="Center"  VerticalContentAlignment="Center">
            <Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
                <Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
            </Button>
            <Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
                <Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
            </Button>
        </ToolBar>    
    </ToolBarTray>

1) First, i would like to know how centered the button, i add the verticalAlignment="Center", but nothing is center. Have you an idea please?

2) Secondly, how remove or hide the little rectangle white on the right please ?

3) Then, anyone know how it's possible to recreate the area circled on red please ?

Thanks a lot :)

Best regards

1
c#wpfxamltoolbar

1 Answers

3
votes

Your tool bar looks centered. do you mean you want the toolbar to be where the caption/title is or do you want to hide the caption title? for the latter you can try WindowStyle="None" in your window.

As for for the 'little rectangle" try getting and setting OverflowGrid visibility property of the toolbar.

you probably also need to wrap the elments in aborder and use the corner radius to achieve the rounded corners. here's an example:

    <DockPanel  Height="40" VerticalAlignment="Top">
        <Border BorderBrush="LightBlue" BorderThickness="1" CornerRadius="8" Margin="1" Background="#008ede">
                <ToolBarTray Background="#008ede" HorizontalAlignment="Left" VerticalAlignment="Center"  >
                    <ToolBar ToolBarTray.IsLocked="True" Background="Transparent"  HorizontalAlignment="Stretch"  VerticalAlignment="Center"  VerticalContentAlignment="Center">
                        <Button Name="tbrClear" ToolTip="Clear" VerticalAlignment="Center">
                            <Image Source="_XWPF_TBR_PREMIER.PNG_IMAGES.png" Name="Image1"></Image>
                        </Button>
                        <Button Name="tbrClear_" ToolTip="Clear" VerticalAlignment="Center" VerticalContentAlignment="Center">
                            <Image Source="_XWPF_TBR_PRECED.PNG_IMAGES.png" Name="Image2"></Image>
                        </Button>
                    </ToolBar>
                </ToolBarTray>
        </Border>
    </DockPanel>