【问题标题】:C# WPF Button Style Template Not Showing Background ImageC# WPF 按钮样式模板不显示背景图像
【发布时间】:2021-09-17 06:45:09
【问题描述】:

我正在组合一个非常简单的 WPF 窗口来演示最终用户所要求的样式的外观。由于有许多重复的按钮类型对象,我想让它们在窗口中具有一种样式,一旦进行了调整,就可以将其转移到实际应用程序中。

我面临的问题是用户希望为他们的按钮提供图像,当我在按钮本身内设置背景图像时,它会完美显示并按我想要的方式运行(鼠标悬停时更改图像等)。当我将该格式移动到样式中时,一切正常,但背景图像不显示。我确定我遗漏了一些非常简单的东西,但我看不到它。

我生成的代码如下:-

<Window x:Class="SkinningDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SkinnigDemo"
        mc:Ignorable="d"
        Title="DemoWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="MainButtonStyle" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Background">
                <Setter.Value>
                    <ImageBrush ImageSource="/Images/Button1.png" />
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                            BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Center" 
                                            VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/Images/Button1.png"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="#FF266C38"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <ImageBrush ImageSource="/Images/Button2.png"/>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Foreground" Value="#220A88"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="Home">
        <Grid.Background>
            <SolidColorBrush Color="#FF220A88" Opacity="0.15"/>
        </Grid.Background>
        <Image HorizontalAlignment="Left" Height="68" Margin="10,10,0,0" VerticalAlignment="Top" Width="737" Source="images/Master Logo transparent.png"/>
        <TextBlock HorizontalAlignment="Left" Height="62" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="750" Margin="36,96,0,0" Foreground="#FF266C38" FontSize="14" FontWeight="Bold"><Run Language="en-gb" Text="Sample Welcome Text will be placed here once agreed..."/></TextBlock>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="36,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="427,0,0,0" Stroke="#220A88" VerticalAlignment="Center" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="36,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle HorizontalAlignment="Left" Height="111" Margin="427,295,0,0" Stroke="#220A88" VerticalAlignment="Top" Width="348" RadiusX="10" RadiusY="10">
            <Rectangle.Fill>
                <SolidColorBrush Color="#FF266C38" Opacity="0.25"/>
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="54,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="First functional text will go here..."/></TextBlock>
        <Button x:Name="Button1" Style="{StaticResource MainButtonStyle}" Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
        </Button>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,163,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Second Functional Text will go here..."/></TextBlock>
        <Button x:Name="Button2" Style="{StaticResource MainButtonStyle}" Content="View Function 2" HorizontalAlignment="Left" Height="50" Margin="472,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="56,294,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Third Functional Text will go here"/></TextBlock>
        <TextBlock HorizontalAlignment="Left" Height="56" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Top" Width="311" Margin="446,295,0,0" Foreground="#FF220A88"><Run Language="en-gb" Text="Fourth functional text will go here..."/></TextBlock>
        <Button x:Name="Button3" Style="{StaticResource MainButtonStyle}" Content="View Function 3" HorizontalAlignment="Left" Height="50" Margin="472,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

        <Button x:Name="Button4" Style="{StaticResource MainButtonStyle}" Content="View Function 4" HorizontalAlignment="Left" Height="50" Margin="80,343,0,0" VerticalAlignment="Top" Width="258" FontSize="18"/>

    </Grid>
</Window>

正如我所说的,背景图像不会显示在屏幕上,但是如果我删除样式并将其全部设置在本地并使用完全相同的值,它就可以完美地工作:-

<Button x:Name="Button1"  Content="View Function 1" HorizontalAlignment="Left" Height="50" Margin="82,205,0,0" VerticalAlignment="Top" Width="258" FontSize="18">
            <Button.Background>
                <ImageBrush ImageSource="/Images/Button1.png"/>
            </Button.Background>
        </Button>

感谢期待帮助。

【问题讨论】:

    标签: c# wpf xaml button


    【解决方案1】:

    玩弄漂亮的 XAML,我注意到您需要将背景画笔“绑定”到控件模板的根元素(即边框),以显示背景图像。

    如果你只是在&lt;Border Name="border" 行下插入Background="{TemplateBinding Background}" 基本上就可以了。例如:

      <Border Name="border"
               Background="{TemplateBinding Background}" 
               BorderThickness="0">
    

    【讨论】:

    • 我相信他也需要在Setters上指定他的目标,否则它不会知道要改变谁的背景。示例:Setter Property="Background" TargetName="border"...。此外,他还需要删除他在模板上的 Setter 之前编写的背景上第一次出现的 Setter,否则它将覆盖任何鼠标悬停事件并始终将背景保持为 Button1.png。
    • 谢谢你们俩。第一个答案导致按钮的图像出现,我还需要删除第一次出现的 setter 背景以使鼠标悬停在事件上。现在一切正常
    猜你喜欢
    • 2013-02-11
    • 1970-01-01
    • 1970-01-01
    • 2018-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-12
    • 1970-01-01
    相关资源
    最近更新 更多