WPFボタンのスタイルにテキストが表示されない

Question

私はこれに新しいですので、私に同行してください。

私は今これを持っていますStyle。これをウィンドウに貼り付けて、実際の動作を確認してください。

<Window.Resources> 

<Style x:Key="SelectionButton3" 
     TargetType="{x:Type Button}"> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 

       <Grid HorizontalAlignment="Stretch" 
         VerticalAlignment="Stretch" 
         ClipToBounds="False"> 

        <Grid.RowDefinitions> 
         <RowDefinition Height="75" /> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="100" /> 
         <ColumnDefinition Width="55" /> 
        </Grid.ColumnDefinitions> 

        <Border x:Name="TheBorder" 
          BorderThickness="0,1.5,1.5,1.5" 
          CornerRadius="3" 
          Background="SteelBlue" 
          Height="35" 
          Grid.Column="1" 
          Grid.Row="0" 
          Margin="-31" 
          BorderBrush="DarkSlateBlue"/> 

        <Rectangle Name="TheRectangle" 
           Fill="SteelBlue" 
           Stroke="DarkSlateBlue" 
           Grid.Row="0" 
           Grid.Column="0"> 

         <Rectangle.LayoutTransform> 
          <RotateTransform Angle="-45" /> 
         </Rectangle.LayoutTransform> 

         <Rectangle.BitmapEffect> 
          <DropShadowBitmapEffect ShadowDepth="5" /> 
         </Rectangle.BitmapEffect> 

        </Rectangle> 

        <ContentPresenter x:Name="ContentArea" 
             VerticalAlignment="Center" 
             HorizontalAlignment="Center" 
             Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" /> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" 
           Value="True"> 
         <Setter TargetName="TheBorder" 
           Property="BitmapEffect"> 
          <Setter.Value> 
           <DropShadowBitmapEffect ShadowDepth="0" /> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 

    </Setter> 

    <Setter Property="Foreground" 
      Value="White"/> 
    <Setter Property="FontFamily" 
      Value="Segoe UI" /> 
    <Setter Property="FontSize" 
      Value="20" /> 

    </Style> 

<Grid.RowDefinitions> 
    <RowDefinition Height="20"/> 
    <RowDefinition Height="Auto"/> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 
<Grid.ColumnDefinitions> 
    <ColumnDefinition Width="20"/> 
    <ColumnDefinition Width="250" /> 
</Grid.ColumnDefinitions> 

<Button Grid.Row="1" 
     Grid.Column="1" 
     Style="{StaticResource SelectionButton3}" 
     Margin="0,0,0,5" 
     Click="Button_Click"> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 

     <Image Height="35" 
       Width="35" 
       Stretch="Fill" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Grid.Column="0" 
       Margin="32.5,0,0,0" 
       Source="/app;component/Media/Images/Mail/email.png" /> 

     <TextBlock Text="Email" 
        Grid.Column="1" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Margin="22,0,0,0"/> 

    </Grid> 


</Button> 

I持っている2つの質問：

1）なぜ、テキストの一部のみが現れてますか？

2）ImageとTextBlockをTemplateに入れてバインドするにはどうすればよいですか？

Answer 1

Textがクリップされる理由は、ContentPresenterのGrid.RowとGrid.Columnを指定しなかったためです。これにより、ボタンの内容は、ControlTemplateの0行目と0列目にデフォルト設定されます。余白と位置を合わせると、ボタン要素のテキストブロックが途切れることになります。私はこれがあなたの意図かもしれないと推測していますか？あなたのTextBlockが自分自身を表示するためのより多くの部屋を持っていますので、

<ContentPresenter x:Name="ContentArea" 
    Grid.Column="0" 
    Grid.ColumnSpan="2" 
    Grid.Row="0" 
    VerticalAlignment="Stretch" 
    HorizontalAlignment="Stretch" 
    Content="{Binding Path=Content, 
      RelativeSource={RelativeSourceTemplatedParent}}" /> 

今ContentPresenterは、ControlTemplateのグリッド上で両方の列にまたがるます。それを行うにはHow do I put the Image and Textblock in the template and just bind to them?

一つの方法は、Buttonクラスをサブクラス化例えばMyImageButtonそれを呼び出す、2つの新しい依存関係プロパティを実装することで、あなたの2番目の質問に答えるために

は、この新しいクラスでImageとTextと呼ばれます。次に、<Image>と<TextBlock>をコントロールテンプレートに移動し、新しいImageとTextのプロパティにバインドすることができます。 MyImageButtonをインスタンス化し、新しいプロパティを使用してボタンのイメージとテキストを設定できます。