Question

我希望我的所有按钮都有我制作的图像背景。在我的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>

Answer 1

@BradleyUffner提出了所有正确的观点，引导你朝着正确的方向前进。事实上，如果他想把这个解释复制到他自己的答案中，我会把这个解释并投票给他，因为......

您当前的示例缺少部分，并且有点矫枉过正。如果是我，我会在默认按钮模板中添加这样的内容，并避免完全重新模板化。

例如，如果您正在对现有模板执行此操作，只需将样式模板中的当前Background属性设置器替换为类似的内容......

<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 x:Key="ImageButtonStyle" TargetType="TextBox" 
       BasedOn="{StaticResource {x:Type TextBox}}">
    <Setter Property="Background">
       <Setter.Value>
          <ImageBrush ImageSource="images/YourImage.png"/>
       </Setter.Value>
    </Setter>
</Style>

并在像<; p>这样的实例上调用它

<Button Style="{StaticResource ImageButtonStyle}"/>

或者您可以覆盖整个样式模板（如果您没有使用BasedOn从默认值中获取ControlTemplate等），但如果您要这样做，那么我建议您开始从默认模板中，你不会忘记像ContentPresenter和状态触发器之类的东西，比如Bradley所指出的。

希望这会有所帮助，欢呼。

编辑 - 概念示例

所以说你想制作一个包含内容的按钮，并在鼠标悬停时更改它的背景图像。好吧，如果去复制默认按钮模板，改变两件事，瞧，你已经完成了。尝试一下，希望它有助于澄清。

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

为什么我在WPF中的自定义按钮控件模板中看不到内容？

1 个答案: