WPF Flat button style with image and text inside even when hover - wpf

Question

I'm trying to create a flat styled wpf button. Like on the picture below (the log-out button). I want to have an image and text inside the button even if you hover it. But what happened is every time i try to put a hover style/effects the button turn plain blue when hover and image and text are missing.
Can anyone help me with this? Thank you!
Here's what I tried so far :
<Button Name="button_lgout">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}"></ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Image Source="Images/logout.png" Height="21" VerticalAlignment="Top" Margin="0,5,0,0"/>
<Label Name="lbl_lgout" Content="LOGOUT" FontSize="12" Foreground="White" FontFamily="Calibri" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,-4" Height="27" />

Answer 1

I think some of your code is missing, from the question. eg. the Control template does not have any visual tree. also seems like you are also talking about some triggers, mouse hover etc. please include them too if necessary
however to create a plain button with any arbitrary content you may use this example
<Button Name="button_lgout">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<StackPanel>
<Image Source="Images/logout.png" Height="21" HorizontalAlignment="Center" Margin="0,5,0,0"/>
<Label Name="lbl_lgout" Content="LOGOUT" FontSize="12" Foreground="White" FontFamily="Calibri" HorizontalAlignment="Center" Height="27" />
</StackPanel>
</Button>
you may also try to set <StackPanel HorizontalContentAlignment="Center"> and see if this can replace HorizontalAlignment="Center" from sub items. also Foreground="White" is redundant as specified in the button style, you may safely remove either of them
Enable hover effect
as requested here is how you can implement a simple hover effect. assuming that the container of the button has the desired color, this effect will darken the background color
<Button Name="button_lgout" HorizontalAlignment="Center" VerticalAlignment="Top">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter TextElement.Foreground="{TemplateBinding Foreground}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Background"
Value="#2000" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<StackPanel>
<Image Source="desert.jpg"
Height="21"
HorizontalAlignment="Center"
Margin="0,5,0,0" />
<Label Name="lbl_lgout"
Content="LOGOUT"
FontSize="12"
Foreground="White"
FontFamily="Calibri"
HorizontalAlignment="Center"
Height="27" />
</StackPanel>
</Button>
I have added <Setter Property="Background" Value="Transparent" />. this is necessary for TemplateBinding to work with the setters in triggers, these setter can also be used with TargetName but former approach will also help to define a base color if needed. I also added a control template trigger for IsMouseOver to apply the effect
if you want to increase the darkness, increase the alpha component 2 in Value="#2000". possible hex values are 0 to F where is 0 is least dark and F is most dark

Answer 2

You need to add ContentPresenter in button template and move the image and label inside some panel and add them as child of button:
<Button Name="button_lgout">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Button.Template>
<Grid>
<Image Source="Images/logout.png" Height="21" VerticalAlignment="Top"
Margin="0,5,0,0"/>
<Label Name="lbl_lgout" Content="LOGOUT" FontSize="12" Foreground="White"
FontFamily="Calibri" VerticalAlignment="Bottom"
HorizontalAlignment="Center" Margin="0,0,0,-4" Height="27" />
</Grid>
</Button>