2011-10-05 24 views
1

創建板缺一角,我有一些代碼如何在WPF

   <Border BorderBrush="Black" BorderThickness="1" CornerRadius="8" Margin="0,0,5,0"> 
        <!--Background="#FDFFC1"--> 
        <Border.Background> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
          <GradientStop Color="#FFFFFFFD" /> 
          <GradientStop Color="#FEFD9A" Offset="1" /> 
         </LinearGradientBrush> 
        </Border.Background> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="*"/> 
         </Grid.RowDefinitions> 
         <Border Grid.Row="0" CornerRadius="10,10,0,0" Height="22" VerticalAlignment="Top"> 
          <Label Foreground="Black" FontSize="10" Margin="5,0,0,0" HorizontalAlignment="Left" 
            VerticalAlignment="Center" Content="Text" /> 
         </Border> 
         <Grid Grid.Row="1"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="5*"/> 
          </Grid.ColumnDefinitions> 
          <Border Grid.Column="0" Margin="5,2,0,2"> 
           <Image x:Name="tooltipImage" Width="18" Height="18"          
            Source="" 
            HorizontalAlignment="Center" VerticalAlignment="Center"/> 
          </Border> 
          <Border Grid.Column="1" Margin="5,5,5,5"> 
           <TextBlock 
            Foreground="Black" 
            Text="Test" FontSize="10" 
            VerticalAlignment="Center" xml:space="preserve" 
            HorizontalAlignment="Center" 
            TextAlignment="Justify" MaxWidth="200" 
            TextWrapping="Wrap"/> 
          </Border> 

對於這個邊界我想它的右下角是像是用剪刀或像一張紙,上面是拼切板缺。我想我需要使用Path或幾何圖形,但我不知道如何。

在此先感謝!

+0

這個例子http://social.msdn.microsoft.com/forums/en-US/wpf/thread/7f643ca4-1a47-4a51-9552-32f889bceee5/呈現一個crudly繪製的六角形按鈕..你的是類似的情況下,你的形狀不會是完美的**「正規」** hexagone。 –

回答

2

您可以使用邊境的剪輯屬性是這樣的:

<Border BorderBrush="Black" 
     BorderThickness="1" 
     CornerRadius="8" 
     Margin="0,0,5,0"> 
    <Border.Clip> 
     <PathGeometry> 
      <PathFigure StartPoint="0,0"> 
       <LineSegment Point="70,0" /> 
       <LineSegment Point="70,20" /> 
       <LineSegment Point="50,50" /> 
       <LineSegment Point="0,70" /> 
      </PathFigure> 
     </PathGeometry> 
    </Border.Clip> 

不幸的是,點的座標必須齊備,他們不會與規模邊界。爲了克服這個你可能要一個SizeChanged事件處理程序添加到邊境是這樣的:在使用了邊框的大小來修改的PathFigure的點的處理程序

<Border BorderBrush="Black" 
     BorderThickness="1" 
     CornerRadius="8" 
     Margin="0,0,5,0" SizeChanged="Border_SizeChanged" > 
    <Border.Clip> 
     <PathGeometry> 
      <PathFigure x:Name="BorderClipFigure" StartPoint="0,0"> 
       <LineSegment Point="70,0" /> 
       <LineSegment Point="70,20" /> 
       <LineSegment Point="50,50" /> 
       <LineSegment Point="0,70" /> 
      </PathFigure> 
     </PathGeometry> 
    </Border.Clip> 

並編寫代碼:

private void Border_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    double cutOff = 20; 
    var line = BorderClipFigure.Segments[0] as LineSegment; 
    line.Point = new Point(e.NewSize.Width, 0); 

    line = BorderClipFigure.Segments[1] as LineSegment; 
    line.Point = new Point(e.NewSize.Width, e.NewSize.Height - cutOff); 

    line = BorderClipFigure.Segments[2] as LineSegment; 
    line.Point = new Point(e.NewSize.Width - cutOff, e.NewSize.Height); 

    line = BorderClipFigure.Segments[3] as LineSegment; 
    line.Point = new Point(0, e.NewSize.Height); 
}