WPFの形状のボタン - Visaul Studio/Blend

Question

私は最近WPFの学習を始めましたが、小さな問題に遭遇しました。私はPhotoshopで作った自分のスタイルに合った基本的なボタンの形状（透明）を作成しようとしています。

ここは形状です（両側に三角形があるような形です）。 http://prntscr.com/g3esel

Blendで簡単に実行し、視覚的に実装することができれば、IDはどのように知っているのが大好きです。

ボタンのスタイル：

 <Style x:Key="Clicky" TargetType="Button"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type Button}"> 
        <StackPanel Orientation="Horizontal"> 
         <Grid Height="74" Width="284" Background="{TemplateBinding Background}"/> 
         <TextBlock Text="{TemplateBinding Content}" TextAlignment="Center" VerticalAlignment="Center"/> 
        </StackPanel> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Style.Triggers> 
      <Trigger Property="IsMouseOver" Value="True"> 
       <Setter Property="Cursor" Value="Hand" /> 
       <Setter Property="Button.Opacity" Value="10" /> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 

ありがとうございます！

Answer 1

ButtonにはControlTemplateを作成する必要があります。これは、BlendとVisual Studioの両方で実行できます。私はVS2015でやった。 あなたのコードは次のとおりです。

将来的に質問を投稿する前にsome work yourselfを実行してください。他の人が問題を再現できるだけの十分なコードを含めてください。これについては、Minimal, Complete, and Verifiable exampleの作成方法をお読みください。

<Grid Background="Red"> 
    <Button Height="52" Opacity="0.8"> 
     <Button.Style> 
      <Style TargetType="Button"> 
       <Setter Property="Background"> 
        <Setter.Value> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > 
          <GradientStop Color="#053755" Offset="0" /> 
          <GradientStop Color="#053755" Offset="0.5" /> 
          <GradientStop Color="#061F31" Offset="0.5" /> 
          <GradientStop Color="#061F31" Offset="1.0" /> 
         </LinearGradientBrush> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="Button"> 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="Auto"/> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <Border Margin="-1,0" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1"> 
            <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Content="{TemplateBinding Content}"/> 
           </Border> 
           <Path Fill="{TemplateBinding Background}" Data="M13,0 0,25 0,27 13,52 13,52" Stroke="{TemplateBinding BorderBrush}" Width="13" Stretch="Fill" ClipToBounds="True"/> 
           <Path Grid.Column="2" Data="M0,0 13,25 13,27 0,52" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Width="13" Stretch="Fill" ClipToBounds="True"/> 
          </Grid> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
      </Style> 
     </Button.Style> 
    </Button> 
</Grid>