Hi,

I am fairly new to WPF and have started a simple project. I need a ToolBar in my application with a few buttons that have images beside them. Just like the normal windows forms ToolStrip actually.

It is my understanding that there is no such thing as a dedicated 'ToolBarButton', you just need to add your own elements to the ToolBar content. So that's what I did:
xml Code:
  1. <ToolBar Name="toolBar" Grid.Row="1">
  2.             <Button Name="newPlaylistButton" Command="New" >
  3.                 <StackPanel Orientation="Horizontal">
  4.                     <Image Source="/MediaPlayer;component/Images/NewWindow.png" />
  5.                     <TextBlock Text="New Playlist" />
  6.                 </StackPanel>
  7.             </Button>
  8.  
  9.             <Button Name="openPlaylistButton" Command="Open" >
  10.                 <StackPanel Orientation="Horizontal">
  11.                     <Image Source="/MediaPlayer;component/Images/OpenHS.png" />
  12.                     <TextBlock Text="Open Playlist" />
  13.                 </StackPanel>
  14.             </Button>
  15.  
  16.             <Button Name="savePlaylistButton" Command="Save" >
  17.                 <StackPanel Orientation="Horizontal">
  18.                     <Image Source="/MediaPlayer;component/Images/SaveHS.png" />
  19.                     <TextBlock Text="Save Playlist" />
  20.                 </StackPanel>
  21.             </Button>
  22.         </ToolBar>

When the buttons have just some Text, then it looks fine like a normal ToolStrip (see the 'Add Files' button on the second ToolBar in the screenshot), but when the images are added they turn out way too large and the ToolBar is stretched. All in all, it just looks ugly. The ToolBar is too large, the images are blurry, etc...


I tried various properties but nothing seems to help... How do I fix this?
Thanks!