Изображение png внутри кнопки WPF

Question

Я пытаюсь создать кнопку WPF с изображением png внутри, но фон не работает

<Setter Property="Width" Value="30"/>
<Setter Property="Height" Value="30"/>
<Setter Property="Background" Value="Purple"/>

<Setter Property="Template">

    <Setter.Value>
        <ControlTemplate TargetType="Button">

            <Grid>
                <Image Source="../Images/Buttons/logo_30px.png"/>
                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>

            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value="1"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Opacity" Value="1"/>
                </Trigger>
            </ControlTemplate.Triggers>

        </ControlTemplate>
    </Setter.Value>
</Setter>

размер моей кнопки - 30x30, а изображение - 30x30 px, и оно имеет прозрачные области. Когда я использую свойство "Background", оно просто работает.

Как сделать так, чтобы цвет фона работал?

Answer 1

Ваш ControlTemplate должен будет использовать свойство Background, как-то так:

<ControlTemplate TargetType="Button"> 
    <Grid> 
        <Rectangle Fill="{TemplateBinding Background}"/>
        <Image Source="../Images/Buttons/logo_30px.png"/> 
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> 
    </Grid> 
    ...
</ControlTemplate>

Answer 2

С помощью ControlTemplate пометьте, вы строите свой собственный вид кнопки. поэтому вам нужно реализовать (добавить) свой собственный фон, используя Border или же Rectangle и связать его Backrgound(Border)Fill(Rectangle) Свойство для вашего фона кнопки, используя TemplateBinding,

<Rectangle Fill="{TemplateBinding Background}"/> 

или же

<Border Background="{TemplateBinding Background}"/>