WPF Custom TabItem with Close Button

Question

I'm using WPF and C#. I am trying to create a custom TabItem which contains a close button. I did follow a tutorial and managed to get it working - however I wanted to use Images for my close buttons. Upon trying this, I came across some exceptions.

A first chance exception of type 'System.Deployment.Application.InvalidDeploymentException' occurred in System.Deployment.dll A first chance exception of type 'System.IO.DirectoryNotFoundException' occurred in mscorlib.dll A first chance exception of type 'System.IO.DirectoryNotFoundException' occurred in PresentationCore.dll A first chance exception of type 'System.IO.DirectoryNotFoundException' occurred in mscorlib.dll

I believe this is complaining about the Image Source not being found. To set the Image Source I used the properties pane and selecting the appropriate resource in the Source drop down menu. This should be fine as it is, but it is not fine at all.

I was wondering if anyone could give me some heads up on what to do? It's weird, because if it says the resources isn't found, well the resources are there. I added the images using Resources.resx and it added them into my Resources folder. It's all there... just my XAML does not like it.

Here is my XAML

<UserControl x:Class="WpfApplication1.CloseableHeader"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="23" d:DesignWidth="81" Margin="0">
<UserControl.Resources>
    <Style TargetType="Button" x:Key="close_hover">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image Source="pack://siteoforigin:,,,/Resources/CloseIco.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="Button" x:Key="close_normal">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Image Source="pack://siteoforigin:,,,/Resources/CloseIco_BW.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <Button
        Name="button_close"
        ToolTip="Close"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Margin="0,0,5,0"
        Width="14"
        Height="14"
        Style="{DynamicResource close_normal}"/>
    <Label Content="TabItem"  Height="23" HorizontalAlignment="Left" 
      Margin="4,1,0,0" Name="label_TabTitle" VerticalAlignment="Top" 
      FontFamily="Courier" FontSize="12" />
</Grid>

I should also note that in the Designer View on Visual Studio, it displays the tabs as they should be (with the images!).

Thanks in advance.

---

UPDATE

---

I have now gotten further in my project, the only problem I face is that the paths on Visual Studio do not exist, but when I debug - they do exist. The resources folder is inside bin/Debug so that the images will display on debug... but this means I'll always have errors in the Designer as a result. Is there a way to fix this so it'll work for both?

Here is the updated XAML (quite a change)

<UserControl x:Class="WpfApplication1.CloseableHeader"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  d:DesignHeight="23" Margin="0">
<UserControl.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="border"
                            BorderThickness="0"
                    >
                        <Border.Background>
                            <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/CloseIco_BW.png" />
                        </Border.Background>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border">
                                <Setter.Value>
                                    <ImageBrush ImageSource="pack://siteoforigin:,,,/Resources/CloseIco.png" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid Background="White">
    <Button
        Name="button_close"
        ToolTip="Close"
        HorizontalAlignment="Right"
        VerticalAlignment="Center"
        Margin="0,0,5,0"
        Width="14"
        Height="14"/>
    <Label Content="TabItem"  Height="23" HorizontalAlignment="Left" 
      Margin="4,1,19,0" Name="label_TabTitle" VerticalAlignment="Top" 
      FontFamily="Courier" FontSize="12" />
</Grid>

Answer 1

There is an easier approach to set Image (or whatever you want) to the button, with Stackpanel component. Here the button will have "close.ico" as icon and "Close" as text arranged horizontally

  <Button Name="button_close"> <StackPanel Orientation="Horizontal"> <Image Source="Resources\\close.ico" Width="14" Height="14" /> <TextBlock> <Run Text="Close" /> </TextBlock> </StackPanel> </Button> 

Getting back to your question, setting resource address via pack-URI you won't get it displayed (actually, loaded), unless you play some trick with embedded resource/content build actions - but then you need to provide the file with the app; use direct link instead (Resources\\close.ico)