Prevent collapse/expand wpf expander by added to header buttons

Question

I have the following problem: I have to add couple of additional buttons to the Expander header(in order to change presentation scheme of expander content - graph or table). But the problem is that when I press these buttons the Expander is collapsing or expanding (and I want only the content changing). It kind of bubble event as I remember from the web development. I found the following solution for CancelBubble: e.Handled = true; but it doesn't help

<Expander x:Name="xpdNumberDevices">
    <Expander.Header >
        <Border Background="#E5E5E5">
            <StackPanel Width="605" Height="40" Orientation="Horizontal" HorizontalAlignment="Center">
                <Label Foreground="Black" Content="Number of Devices" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,0,0,0" FontSize="14" />
                <Image x:Name="imgGraphNumberDevices" Height="24" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="380,0,0,0"
                        MouseLeftButtonUp="btnNumDeviceGraph_Click">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source" Value="/Pictures/graph_button.png"/>
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Source" Value="/Pictures/graph_button_over.png"/>
                                    </Trigger>
                               </Style.Triggers>
                         </Style>
                     </Image.Style>    
                </Image>
                <Image Height="24" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="0,0,0,0"
               MouseLeftButtonUp="btnNumDeviceTable_Click">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Setter Property="Source" Value="/Pictures/table_button.png"/>
                            <Style.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Source" Value="/Pictures/table_button_over.png"/>
                                </Trigger>
                             </Style.Triggers>
                         </Style>
                     </Image.Style>    
                 </Image>
             </StackPanel>
          </Border>
      </Expander.Header>
      <my:Chart Name="crtDeviceNumberChart" Title="Number of Devices" VerticalAlignment="Top" Margin="20,5,0,0" Height="280" Width="600" BorderBrush="#FFE5E5E5">
          <my:BarSeries Title="Devices" DependentValuePath="Key" IndependentValuePath="Value" ItemsSource="{Binding}" IsSelectionEnabled="True" />
      </my:Chart>                            
  </Expander>

Answer 1

Since you're treating an image like a button, why not make it a button with the image on it? As a test, if you replace an image with a button, you'll see that clicking a button that's on the header won't expand/collapse the Expander.

You can just modify the button's template and it'll look like an image:

<Button>
    <Button.Template>
        <ControlTemplate>
            <Border HorizontalAlignment="Center" VerticalAlignment="Center" >
                <Image Source="/Pictures/graph_button.png" Width="24" Height="24"/>
            </Border>
        </ControlTemplate>
    </Button.Template>
</Button

I also recommend learning about Commands and how you can bind to one to perform an action when you click the button.