使用內容控件顯示圖像

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屬性來設置按鈕的內容。