使用内容控件显示图像

Question

我正在阅读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> 

Answer 1

应设置多边形（或任何其他内容为此事）作为按钮的内容：

<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属性来设置按钮的内容。