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

68 Views Asked by At

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
2

There are 2 best solutions below

0
NSearcher On BEST ANSWER
<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.

2
tombobadil On

In the ControlTemplate, I tried as Image Source

Source="pack://application:,,,/Delete.png"

having the png file in the project directory and it worked for me...