Fatal编程技术网
  • wpf/
  • 为什么可以'；我在WPF中看到自定义按钮控件模板中的内容了吗？

为什么可以'；我在WPF中看到自定义按钮控件模板中的内容了吗？

wpf xaml

为什么可以'；我在WPF中看到自定义按钮控件模板中的内容了吗？,wpf,xaml,Wpf,Xaml,我希望我所有的按钮都有我制作的图像的背景。在我的app.xaml中，我将按钮的前景设置为白色，图像的背景设置为蓝色。基于这些规格，您肯定能够看到它。也许我在xaml中做了一些不正确的事情。请注意，我希望悬停状态期间按钮的外观与常规状态相同。我做错了什么？这是我的按钮的xaml <Style TargetType="{x:Type Button}"> <Setter Property="Foreground" Value="White"></Sette

我希望我所有的按钮都有我制作的图像的背景。在我的app.xaml中，我将按钮的前景设置为白色，图像的背景设置为蓝色。基于这些规格，您肯定能够看到它。也许我在xaml中做了一些不正确的事情。请注意，我希望悬停状态期间按钮的外观与常规状态相同。我做错了什么？这是我的按钮的xaml

<Style TargetType="{x:Type Button}">
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="FontSize" Value="14"></Setter>
        <Setter Property="Width" Value="179"></Setter>
        <Setter Property="Height" Value="60"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Image Source="assets/img/button.png"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Image Source="assets/img/button.png"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

<Button Content="Submit" Margin="0,18,0,0"/>
所有其他设置都正常工作。谢谢你抽出时间

编辑：这是我的新代码

<Style TargetType="{x:Type Button}">
            <Setter Property="Foreground" Value="#FFFFFF"></Setter>
            <Setter Property="FontSize" Value="14"></Setter>
            <Setter Property="Width" Value="179"></Setter>
            <Setter Property="Height" Value="60"></Setter>
            <Setter Property="BorderThickness" Value="0"></Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="assets/img/button.png"/>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Image Source="assets/img/button.png"/>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
@BradleyUffner提出了所有正确的观点来引导你朝着正确的方向前进。事实上，如果他想把这个解释复制到他自己的答案中，我会删除这个，然后投票支持他，因为

您当前的示例缺少片段，并且有点过火。如果是我，我会在默认按钮模板中添加类似的内容，并避免完全重新设置模板

因此，例如，如果对现有模板执行此操作，只需将样式模板中当前的
Background
property setter替换为以下内容

<Setter Property="Background">
       <Setter.Value>
          <!-- NOTE: This could be a hard set file path, a resource declaration, 
                     or could template bind it to a verbose property like `Tag` 
                     so you could supply both a default AND let them set a 
                     different image at each instance if necessary -->
          <ImageBrush ImageSource="images/YourImage.png"/>
       </Setter.Value>
    </Setter>
并在类似的情况下调用它

<Button Style="{StaticResource ImageButtonStyle}"/>
您的模板不需要一个
ContentPresenter
？我对WPF还是相当陌生的，尤其是在处理控件模板时，但我觉得您所做的有些不对劲。没有
ContentPresenter
WPF不知道将控件的内容放在模板中的何处。此外，我认为您实际上不必费劲更换按钮的控件模板来完成此操作。您只需将
ImageSource
属性设置为图像即可定义
ImageBrush
，并将按钮的
Background
属性直接设置为
Brush
。
ControlTemplate
已更改，但它仅填充了
Border
和
image
。因此，
按钮
没有理由显示除此之外的任何内容。知道我终于开始理解WPF，感觉很好。谢谢你验证我的想法。我更喜欢使用第一种方法，这样样式会影响所有按钮。问题是，当使用此方法时，鼠标悬停触发器不会产生任何效果。当我将OP中的触发器模板添加到您提供的方法时，当我将鼠标悬停在按钮上时，内容将消失。@ShoeLace1291显示您的模板。我假设其他东西中可能有一些东西默认情况下对
Background
属性有其他计划，而您只是遇到了冲突或其他一些无意义的小问题。：）我已经编辑了我的OP以包含我的新代码。我还意识到按钮的前景色也没有受到影响。这是我窗口其余部分的默认颜色。@ShoeLace1291对不起，我一定没看过你的第一次尝试，也没注意到你在用鼠标悬停触发器做什么。所以你从一开始就用错了模板。您不会在事件上更改整个ControlTemplate。相反，您应该与ControlTemplate中元素的属性交互。由于新的
按钮
不知道如何处理内容和鼠标悬停控制模板部分，这也不会对您有多大帮助，请回到前面提到的
ContentPresenter
内容。 
<Button Style="{StaticResource ImageButtonStyle}"/>

<!-- Used resources -->
<Style x:Key="FocusVisual">
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
        <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
        <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
        <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
        <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
        <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
        <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
        <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
        <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<!-- /END Used resources -->

<Style x:Key="ImageButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="/img/DEFAULT-BG-IMAGE.png"/>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                            <!-- NOTICE THIS GUY, HE PRESENTS YOUR CONTENT -->
                            <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!-- NOTICE THE TRIGGERS AND HOW THEY INTERACT WITH JUST PROPERTIES INSTEAD OF WHOLE TEMPLATES -->
                            <Trigger Property="IsDefaulted" Value="true">
                                <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <!-- WE GOT MOUSEOVER? COOL, GIVE THEM A DIFFERENT PICTURE -->
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/img/MOUSEOVER-BG-IMAGE.png"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="true">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                                <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>

        <Button Content="Blah" Style="{DynamicResource ImageButtonStyle}"/>

    </Grid>