Question

我想为按钮创建一个模板，它将显示图像（图标）而不是文本。
我希望能够将不同的图像分配给该按钮的不同实例，例如：

<Button Style="{StaticResource iconButton}" ImageSource="Sources/icon.png">

或者：

<Button Style="{StaticResource iconButton}">
    <Image Source="...">
</Button>

（但我仍然希望能够在模板中设置图像的样式，所以当我使用它时我不需要担心颜色和尺寸 - 所以简单地将图像渲染为内容赢了＆t做）。

示例代码：

这里我使用图像作为蒙版来呈现我想要的任何颜色：

<Style TargetType="Button" x:Key="iconButton">
        <Style.Resources>
            <!-- add the "content to image source" converter-->
            <converters:ContentToImageSourceConverter x:Key="ContentToImageSourceConverter"/>
        </Style.Resources>
        <Setter Property="Foreground" Value="{DynamicResource foreground_color}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Margin="5">
                        <Ellipse x:Name="circle"  Width="45" Height="45" Fill="{DynamicResource foreground_color}" Opacity="0"/>
                        <Ellipse Width="45" Height="45" Fill="{DynamicResource foreground_color}">
                            <Ellipse.OpacityMask>
                                <!--How to accomplish this?-->
                                <ImageBrush ImageSource="{TemplateBinding Property=Content "/>
                            </Ellipse.OpacityMask>
                        </Ellipse>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="circle" Property="Opacity" Value="0.15"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="circle" Property="Opacity" Value="0.3"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

    </Style>

看一下＆＃34;如何完成这个＆＃34; 的行。我使用图像作为源，但我希望每当您使用按钮时都定义图像，例如：

<Button Style="{StaticResource iconButton}" DockPanel.Dock="Right">
                    <Image Source="/Sources/settings_icon.png"/>
                </Button>

我不想要简单地将图像渲染为按钮的内容，因为我将其用作其他东西的遮罩，因此我可以更改前景色并拥有图标呈现不同的颜色。

Answer 1

我会使用图像源的一个依赖项属性进行自定义控件。你试过这个吗？

然后你会像这样使用它

<MyCustomButton DockPanel.Dock="Right" ImageSource = Sources/settings_icon.png">
            </MyCustomButton>

最简单的方法：

将UserControl添加到您的项目
在xaml中只需添加一个按钮
为此控件添加样式并将其设置为按钮
添加依赖项属性，并通过绑定将其链接到图像源（样式）。在这里，您还需要指定绑定源。 {Binding RelativeSource = {RelativeSource Self}}

第二种方式：

创建一个派生自Button类的类。
使用图像源对象添加一个依赖项属性。
在样式中指定图像控件的源属性的绑定，它必须与依赖项属性具有相同的名称。我认为您还需要将绑定源指定为祖先，因为它无法找到绑定源。点击此处查看语法。 Binding to an ancestor in WPF

两种方式的使用方式都相同。

将自定义属性绑定到WPF中的模板

1 个答案: