Question

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

任何人都可以帮我吗？谢谢！

这是我到目前为止所尝试的内容：

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

logout_button

Answer 1

我认为你的一些代码遗失了。例如。控件模板没有任何可视树。似乎你也在谈论一些触发器，鼠标悬停等。如果有必要，请包括它们

但要创建一个包含任意内容的普通按钮，您可以使用此示例

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

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

启用悬停效果

这里要求的是如何实现简单的悬停效果。假设按钮的容器具有所需的颜色，此效果将使背景颜色变暗

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

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

如果你想增加黑暗，请增加2中的alpha分量Value="#2000"。可能的十六进制值为0 to F，其中0最暗，F最暗

Answer 2

您需要在按钮模板中添加 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>

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

2 个答案: