WPF 平面按钮样式即使在悬停时也包含图像和文本

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

提问by x'tian

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.

我正在尝试创建一个平面样式的 wpf 按钮。如下图所示（注销按钮）。即使您将其悬停，我也希望在按钮内有一个图像和文本。但是发生的事情是每次我尝试放置悬停样式/效果时，当悬停和图像和文本丢失时，按钮都会变成纯蓝色。

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" />

回答by pushpraj

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

我认为你的一些代码丢失了，从这个问题。例如。Control 模板没有任何可视化树。似乎您也在谈论一些触发器、鼠标悬停等。如有必要，也请包括它们

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

您也可以尝试设置<StackPanel HorizontalContentAlignment="Center">并查看是否可以HorizontalAlignment="Center"从子项中替换。也是Foreground="White"多余的，如按钮样式中指定的那样，您可以安全地删除它们中的任何一个

---

---

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 IsMouseOverto apply the effect

我已经添加了<Setter Property="Background" Value="Transparent" />。这对于 TemplateBinding 与触发器中的 setter 一起使用是必要的，这些 setter 也可以与 TargetName 一起使用，但如果需要，以前的方法也将有助于定义基色。我还添加了一个控制模板触发器IsMouseOver来应用效果

if you want to increase the darkness, increase the alpha component 2in Value="#2000". possible hex values are 0 to Fwhere is 0is least dark and Fis most dark

如果你想增加黑暗，增加alpha分量2在Value="#2000"。可能的十六进制值是0 to F在哪里0是最黑暗和F最暗

回答by Rohit Vats

You need to add ContentPresenterin button template and move the image and label inside some panel and add them as child of button:

您需要添加ContentPresenter按钮模板并将图像和标签移动到某个面板内并将它们添加为按钮的子项：

<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>