使用内容控制显示图像

本文关键字：显示图 图像 显示 内容控制 | 更新日期: 2023-09-27 18:29:33

我正在读一本关于WPF的书

下面是一个按钮的示例。这是有道理的，除了下面的一行。

<ContentControl Margin=”2” Content=”{TemplateBinding Content}”/>

这本书说的如下，

Figure 14.9 shows what two Buttons look like with this new control template applied.
One Button has simple “OK” text content, and the other has an Image. In both cases, the content is reflected in the new visuals as expected.

然而，我不知道如何在按钮上显示图像？我在下面画了一个三角形，我想在按钮的中心，但我无法让它出现。

我的绘图

<Polygon x:Key="playTriangle" Stroke="Black" Fill="Black">
        <Polygon.Points>
            <Point X="10" Y="40"/>
            <Point X="40" Y="25"/>
            <Point X="10" Y="10"/>
        </Polygon.Points>
    </Polygon>

书籍示例

<ControlTemplate x:Key="buttonTemplatePlay" TargetType="{x:Type RibbonButton}">
        <Grid Height="60" Width ="60">
            <Ellipse x:Name="outerCircle">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="Blue"/>
                        <GradientStop Offset="1" Color="Red"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="5">
                <Ellipse.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="White"/>
                        <GradientStop Offset="1" Color="Transparent"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Viewbox>
                <ContentControl Margin="5" Content="{TemplateBinding Content}"/>
            </Viewbox>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter TargetName="outerCircle" Property="Fill" Value="Green"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="RenderTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX=".9" ScaleY=".9"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="RenderTransformOrigin" Value=".5,.5"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

使用内容控制显示图像

您应该将多边形（或任何其他内容）设置为按钮的内容：

<RibbonButton>
    <RibbonButton.Content>
        <Polygon Stroke="Black" Fill="Black">
            <Polygon.Points>
                <Point X="10" Y="40"/>
                <Point X="40" Y="25"/>
                <Point X="10" Y="10"/>
            </Polygon.Points>
        </Polygon>
    </RibbonButton.Content>
</RibbonButton>

注意，我删除了x:Key="playTriangle"属性

如果多边形是在资源字典中定义的，则应该使用StaticResourceExtension来引用它：

<RibbonButton Content={StaticResource ResourceKey=playTriangle}" />

无论如何，关键是您应该使用RibbonButton.Content属性来设置按钮的内容。

相关文章：