WPF: Visual studio like error buttons

Question

I want to get this.

Everything works so far, buttons act as filter and are bind to the grid control. All i want is the icons and counter on the button. Whats the correct way of implementing those?

<ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">

I have tried adding image like this:

            <ToggleButton x:Name="IsErrorShown" Margin="4" Width="100" Content="{lex:LocText Errors, Assembly=Client}">
            <StackPanel>
                <Image Source="Resources/Warning"/>
            </StackPanel>
        </ToggleButton>

but i get error that prop. Content is defined more then once.

Answer 1

A WPF Button (or ToggleButton) is a content control, into which you can put anything.

I haven't checked, but these buttons probably have a horizontal stack panel or a DockPanel, with an Image and then one or two TextBlocks. You could make a template for these, and also use binding to set the TextBlock Text content from your viewmodel.

Snoop ( http://snoopwpf.codeplex.com/ ) is a great tool for finding out how other people have built things in WPF.

The Adam Nathan WPF book is excellent, and if you don't have it you should get it. http://www.amazon.co.uk/Windows-Presentation-Foundation-Unleashed-WPF/dp/0672328917

Here's an example:

  <ToggleButton Height="24" Width="100">
    <DockPanel>
      <Image Source="c:\\temp\\me.jpg" Margin="3"/>
      <TextBlock Text="20 Errors"/>
    </DockPanel>
  </ToggleButton>