Search code examples
wpfvisual-studio-extensionswpf-style

How to replace default button style in visual studio extension with image?


I try to remove default button style in visual studio extension and replace it with image. Exactly I try to make my button to look like image, not like button as usually do all other extensions and so on.

In preview I can see correct image and all styles are removed. But when I start debugging image just disappears.

Is there any way to fix it?

<UserControl x:Class="TabsGroupper.TabsGroupperToolControl"
             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"
             xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"
             xmlns:theming="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
             xmlns:util="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Utilities"
             xmlns:catalog="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.ImageCatalog"
             xmlns:toolkit="clr-namespace:Community.VisualStudio.Toolkit;assembly=Community.VisualStudio.Toolkit"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="300"
             Name="TabGroupperWindow" 
             FontFamily="Segoe UI">
    <Grid Background="#e8ecf4">
        <Grid.Resources>
            <Style x:Key="IconButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                                <Image Source="pack://application:,,,/TabsGroupper;component/Resources/Delete.png" Width="16" Height="16" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="3">
            <Button Name="RemoveItemBtn" Style="{StaticResource IconButtonStyle}"></Button>
        </StackPanel>
    </Grid>
</UserControl>

Tried with zero result:

  • set image as content
  • set background with imagebrush
  • set absolute path for image
  • set image build action to 'resource'.
  • restarted VS
  • reset of VS experimental instance

Solution

  • <Image Source="pack://application:,,,/TabsGroupper;component/Resources/Delete.png">
    

    This variant works, the problem was about the image. To make it work in properties of image Build Action should be set to Resource. And in addition if there are several images than each of should have Build Action as Resource.