CODEWITHSUNDEEP
wpfbindingstylesstyling
Captain overflow
Captain overflow

Reputation: 312

New Button style Image not showing

I am making a style for button to appear in a custom way enter image description here

The Idea is to write the Image source in the Tag property and the Text in the Content property

So the style goes like this

<Style x:Key="NormalButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Black"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="12,4,12,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{TemplateBinding Tag}" Height="{TemplateBinding Height}" Width="{TemplateBinding Height}"/>
                    <ContentPresenter x:Name="ContentPresenter" Grid.Column="1" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Foreground" Value="Red" />
                    </Trigger>

                    <Trigger Property="IsPressed" Value="true">

                        <Setter Property="Foreground" Value="Gray"/>

                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Image does not display and only the Text apears

I call the button like this in the MainWindow

<Button Style="{DynamicResource NormalButtonStyle}" Tag="/iPARK;component/Resources/Sign%20out_icon.png" HorizontalAlignment="Right" Margin="20" Click="Signout_Click"/>

If I set the image in the style file directly like this then it shows but then it cannot be reused for other images

<Image Source="/iPARK;component/Resources/Sign%20out_icon.png" Height="{TemplateBinding Height}" Width="{TemplateBinding Height}"/>

Upvotes: 3

Views: 276

Answers (1)

Clemens
Clemens

Reputation: 128098

When you put an image URI into the Tag property it will not automatically be converted into an ImageSource (as it is done for the Image.Source property). You need to do that explicitly:

<Button ...>
    <Button.Tag>
        <BitmapImage UriSource="/iPARK;component/Resources/Sign%20out_icon.png"/>
    </Button.Tag>
</Button>

Upvotes: 1

Related Questions