2013-03-01 29 views
5

我想創建一個按鈕模板,以在按鈕中顯示圖像和標籤。 我在按鈕上使用水平堆棧面板。用圖像和文字創建wpf按鈕

我沒有成功顯示標籤。

這裏是我的模板:

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
<Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
    <Button.Content> 
     <StackPanel Orientation="Horizontal"> 
      <Border CornerRadius="3"> 
       <ContentPresenter/> 
       <Border.Style> 
        <Style TargetType="{x:Type Border}"> 
         <Setter Property="Background" Value="#58585a" /> 
         <Style.Triggers> 
          <Trigger Property="IsMouseOver" Value="True"> 
           <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
          </Trigger> 
         </Style.Triggers> 
        </Style> 
       </Border.Style> 
      </Border> 
      <Label> 
       <Label.Content>Fichiers joints</Label.Content> 
       <Label.Foreground>white</Label.Foreground> 
       <Label.VerticalAlignment>center</Label.VerticalAlignment> 
       <Label.HorizontalAlignment>center</Label.HorizontalAlignment> 
      </Label> 
     </StackPanel> 
    </Button.Content> 
    <Button.Style> 
     <Style TargetType="{x:Type Button}" > 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}" > 
         <ContentPresenter /> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Button.Style> 
</Button> 

這是我這個模板召喚:

<Grid Margin ="10,180,10,14"> 
      <Button Template="{StaticResource BoutonImageEtTexte}" HorizontalAlignment="Left" Margin="13,0,0,0"> 
       <Image Source="ToolBar_FicJoints.png" /> 
      </Button> 
     </Grid> 

這裏是一個文本框,而不是一個標籤的另一種方法

<ControlTemplate TargetType="{x:Type Button}" x:Key="BoutonImageEtTexte"> 
    <Button Grid.Column="2" BorderBrush="Transparent" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Width="90" Height="27" > 
     <Button.Content> 
      <StackPanel Orientation="Horizontal"> 
       <Border CornerRadius="3"> 
        <ContentPresenter/> 
        <Border.Style> 
         <Style TargetType="{x:Type Border}"> 
          <Setter Property="Background" Value="#58585a" /> 
          <Style.Triggers> 
           <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="Background" Value="{StaticResource DegradeCouleurTheme}" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Border.Style> 
       </Border> 
        <TextBlock Text="LabelText" /> 
       </StackPanel> 
     </Button.Content> 
     <Button.Style> 
      <Style TargetType="{x:Type Button}" > 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type Button}" > 
          <ContentPresenter /> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button> 
</ControlTemplate> 

我的問題是我看到onl我的形象,而不是我的標籤在模板中指定。 任何人都可以幫助我嗎?

非常感謝:)

+1

你的概念是完全關閉的。如果要創建按鈕的控件模板以將多個項目作爲內容獲取,則必須創建一個額外的依賴項屬性。 – TYY 2013-03-01 19:27:13

+0

您能否請我舉個例子來做到這一點? – 2013-03-01 19:52:56

+1

這似乎是一個很好的帖子... http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton。 aspx – PGallagher 2013-03-01 20:05:32

回答

12

TextBlock比標籤更符合您的需求。如果您不使用額外的標籤功能(例如目標,對象內容),請使用良好的「TextBlock」。

如果要禁用所有按鈕的造型和只有在按鈕的圖像和標籤(注意,這勾銷鼠標懸停/鼠標按下的效果,但可以提供觸發邏輯):

<ControlTemplate TargetType="{x:Type Button}" x:Key="SimpleButton"> 
    <ContentPresenter/> 
</ControlTemplate> 

用法:

<Button Template="{StaticResource SimpleButton}"> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="LabelText" /> 
    </StackPanel> 
</Button> 

如果你只是想在一個正常的風格的按鈕圖像/ TextBlock的,它更容易:

<Button> 
    <StackPanel Orientation="Horizontal"> 
     <Image Source="ToolBar_FicJoints.png" /> 
     <TextBlock Text="Fichiers joints" /> 
    </StackPanel> 
</Button> 
+0

謝謝,我會試試:) – 2013-03-02 10:28:16

+1

我試過了,但是我的文本框顯示出按鈕之外,你有想法嗎?我用TxtBoxMedthod編輯我的第一篇文章:)非常感謝! – 2013-03-02 11:34:21

3

使用畫布如下。

<Button Height="50" Width="150" > 
         <Button.Template> 
          <ControlTemplate> 
           <Canvas> 
            <Image Source="./Images/Cancel.png"/> 
            <TextBlock Canvas.Left="22" Canvas.Top="8" Text="Cancel" FontFamily="Arial" FontSize="18"/> 
           </Canvas> 
          </ControlTemplate> 
         </Button.Template> 
        </Button> 

您可以調整Canvas.LeftCanvas.Top按您的要求。我希望這個會幫助你,因爲它會在圖像上顯示文本塊。