2016-04-05 17 views
0

内のテキストをブロックしている私が持っている私のボタンのテンプレートを作成しようとしています:スタイルWPF

  • ボーダーコーナー半径ホバー上
  • 勾配の変更境界線の色として
  • 背景を

これまでのところ、私はここに来た:

<Window.Resources> 
    <Style TargetType="Button" x:Key="aimDark"> 
     <Setter Property="VerticalAlignment" Value="Top" /> 
     <Setter Property="Margin" Value="5,5,5,0" /> 
     <Setter Property="Height" Value="20" /> 
     <Setter Property="Foreground" Value="#0e0e0e" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border 
         CornerRadius="4" 
         BorderBrush="#000000" 
         BorderThickness="1"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
           <GradientStop Color="#006d23" Offset="0" /> 
           <GradientStop Color="#006d23" Offset="0.05" /> 
           <GradientStop Color="#00c741" Offset="0.45" /> 
           <GradientStop Color="#00c741" Offset="1" /> 
          </LinearGradientBrush> 
         </Border.Background> 
         <RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
<Grid> 
    <Button Content="Test" Name="btn01" Style="{StaticResource aimDark}" /> 
</Grid> 

問題:

まず私のContentボタンが表示されないで、実際に私のボタンでレンダリングが行われたテキストされていません。

そして、私はホバーイベントでボーダーカラーだけを変更する方法を知らない。

答えて

0

ボタンの内容を表示するには、ContentPresenterが必要です。

<Style x:Key="mylayout" TargetType="Button"> 
    <Setter Property="VerticalAlignment" Value="Top" /> 
    <Setter Property="Margin" Value="5,5,5,0" /> 
    <Setter Property="Height" Value="20" /> 
    <Setter Property="Foreground" Value="#949494" /> 
    <Setter Property="Background" Value="the_gradient" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Border CornerRadius="4" BorderBrush="#000000" BorderThickness="1" Background="{TemplateBinding Background}" Name="border"> 
        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
       </Border> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="BorderBrush" TargetName="border" Value="#e9eceb" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
:あなたは ControlTemplate>Borderに名前を定義する場合、アクションは、このようなトリガーであるとき

はまた、あなたはそれを変更することができます

1

ControlTemplateには、のContentを表示するには、ContentPresenterを指定する必要があります。

<Window.Resources> 
    <Style TargetType="Button" x:Key="aimDark"> 
     <Setter Property="VerticalAlignment" Value="Top" /> 
     <Setter Property="Margin" Value="5,5,5,0" /> 
     <Setter Property="Height" Value="20" /> 
     <Setter Property="Foreground" Value="#0e0e0e" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Border 
        CornerRadius="4" 
        BorderBrush="#000000" 
        BorderThickness="1"> 
         <Border.Background> 
          <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
           <GradientStop Color="#006d23" Offset="0" /> 
           <GradientStop Color="#006d23" Offset="0.05" /> 
           <GradientStop Color="#00c741" Offset="0.45" /> 
           <GradientStop Color="#00c741" Offset="1" /> 
          </LinearGradientBrush>         
         </Border.Background> 
         <RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode> 
         <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 
1

作成したテンプレートは、ContentPresenterを持っていない、そしてそれは、コンテンツ(テキストまたは他の)を示すために必須です。 default Button templateから始めて、必要に応じて変更することをお勧めします。

関連する問題