在wpf/xaml中只有邊框的邊框

Question

在一些xaml中，我想要一個邊框，每個邊角只有幾個像素。因此，沿着頂部，邊界將是，例如在左邊緣的5個像素的黑色，然後在頂部的其餘部分透明，直到右邊緣的5個像素，然後在邊緣的最後5個像素處右邊緣是黑色的。目的是爲選擇偶爾透明的東西提供一些指導;然而，在這個應用程序中，全部邊框的存在會干擾內容（以感知視覺的方式）。角落不圓形。

的東西，看起來像這樣：

--   -- 
|   | 




|   | 
--   -- 

我應該使用什麼類型的刷機來實現這種效果呢？

我已經嘗試了線性漸變，就像這樣：

<LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
    <GradientStop Color="Black" Offset="0" /> 
    <GradientStop Color="Black" Offset="0.01" /> 
    <GradientStop Color="Transparent" Offset="0.0101" /> 
    <GradientStop Color="Transparent" Offset="0.9899" /> 
    <GradientStop Color="Black" Offset="0.99" /> 
    <GradientStop Color="Black" Offset="1" /> 
</LinearGradientBrush> 

當然，這不僅會左上角和右下角。對於預期的應用來說這可能是合理的，但是如果邊界的區域是正方形（如果邊界區域是長矩形，那麼每個角落的線的大小是相同的，例如，邊界的區域沿着一個更遠一邊比另一邊）。

我確實注意到漸變畫筆上的「絕對」的MappingMode值。這對於左上角而不是其他角落很有效。

我也試過了一個RadialGradientBrush，認爲我可以得到一個環來打轉角，但是沒有成功地將它正確對中或者它沿着兩邊打等長。

這是ListBox中ItemContainerStyle的一部分，並且邊框用IsSelected的Trigger進行更改。出於這個原因，我也不能在邊界內進行邊界（在邊界內等）。

編輯＃2：我也嘗試過一個VisualBrush。我知道我可以在網格中獲得我想要的行爲（至少，拉伸行爲）。

<VisualBrush Stretch="Fill"> 
    <VisualBrush.Visual> 
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="10" MaxHeight="10" MinHeight="10" /> 
       <RowDefinition Height="*" /> 
       <RowDefinition Height="10" MaxHeight="10" MinHeight="10" /> 
      </Grid.RowDefinitions> 
      <Rectangle Grid.Column="0" Grid.Row="0" Fill="Black" /> 
      <Rectangle Grid.Column="1" Grid.Row="0" Fill="Transparent" /> 
      <Rectangle Grid.Column="2" Grid.Row="0" Fill="Black" /> 
      <Rectangle Grid.Column="0" Grid.Row="1" Fill="Transparent" /> 
      <Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" /> 
      <Rectangle Grid.Column="2" Grid.Row="1" Fill="Transparent" /> 
      <Rectangle Grid.Column="0" Grid.Row="2" Fill="Black" /> 
      <Rectangle Grid.Column="1" Grid.Row="2" Fill="Transparent" /> 
      <Rectangle Grid.Column="2" Grid.Row="2" Fill="Black" /> 
     </Grid> 
    </VisualBrush.Visual> 
</VisualBrush> 

但是，這也沒有解決。似乎尺寸不會以相同的方式在畫筆內發生。在這種情況下，VisualBrush中的網格大小最終爲20x20，中間透明部分不佔用空間。將Horizo​​ntalAlignment和VerticalAlignment設置爲Stretch也沒有幫助。 VisualBrush上的Stretch =「Fill」也沒有做任何事情。

編輯＃1：在更廣闊的背景：

<ListBox.ItemContainerStyle> 
    <Style TargetType="{x:Type ListBoxItem}"> 
     <Style.Resources> 
      <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> 
     </Style.Resources> 
     <Setter Property="Margin" Value="3" /> 
     <Style.Triggers> 
      <Trigger Property="IsSelected" Value="True"> 
       <Setter Property="BorderThickness" Value="5" /> 
       <Setter Property="Padding" Value="0" /> 
       <Setter Property="BorderBrush" Value="Fuchsia" /> 
      </Trigger> 
      <Trigger Property="IsSelected" Value="False"> 
       <Setter Property="BorderThickness" Value="1" /> 
       <Setter Property="Padding" Value="4" /> 
       <Setter Property="BorderBrush"> 
        <Setter.Value> 
         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
          <GradientStop Color="Black" Offset="0" /> 
          <GradientStop Color="Black" Offset="0.01" /> 
          <GradientStop Color="Transparent" Offset="0.0101" /> 
          <GradientStop Color="Transparent" Offset="0.9899" /> 
          <GradientStop Color="Black" Offset="0.99" /> 
          <GradientStop Color="Black" Offset="1" /> 
         </LinearGradientBrush> 
        </Setter.Value> 
       </Setter> 
      </Trigger> 
     </Style.Triggers> 
    </Style> 
</ListBox.ItemContainerStyle> 

Answer 1

你可以使用Path ...這將吸引類似的東西你正在尋找：

<Path Stroke="Black" Stretch="Fill" 
     Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10" 
     Height="100" Width="100" Margin="10" /> 

的完整代碼樣品：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Grid> 
     <Path Stroke="Black" Stretch="Fill" 
       Data="M0,0 l10,0 m80,0 l10,0 m0,0 l0,10 m0,80 l0,10 m0,0 l-10,0 m-80,0 l-10,0 m0,0 l0,-10 m0,-80 l0,-10" 
       Height="100" Width="100" Margin="10" /> 
    </Grid> 
</Window> 

Answer 2

徑向梯度bru sh可能會實現你正在尋找的東西。將放射狀筆刷的中心設置到您的框的中心。以透明中心顏色開始，從中心淡出到所需的「邊框顏色」（黑色），然後將半徑設置得足夠大，以使黑色只顯示在角落中。

確保將「漸變」設置得非常短 - 不要逐漸淡化它，但要使其變得銳利。

如果你確定它的大小，你會得到一個類似於下面（很差）說明的效果。紅色框表示您的內容。該盒子外的所有東西都可以說明你的角落會是什麼樣子使「透明」部分的半徑更大，以使黑角更小。

最後;這幾乎只用細邊界看起來不錯。如果你有一個很厚的邊框，它將在角刷的「提示」處看起來「有趣」。

更新：

下面是一些代碼的實際例子：

<Border BorderThickness="1" Height="100" Width="100"> 
    <Border.BorderBrush> 
     <RadialGradientBrush RadiusX="0.6" RadiusY="0.6"> 
      <GradientStop Color="Black" Offset="1"/> 
      <GradientStop Color="#00000000" Offset="0.99"/> 
     </RadialGradientBrush> 
    </Border.BorderBrush> 
    <Rectangle Fill="Red" /> 
</Border> 

，這裏是什麼樣子：

對於矩形形狀（即不是一個完美的正方形），爲了保持角的大小相同，您必須相應地縮放RadiusX和RadiusY的值。它們應該按照寬高比進行縮放。

Answer 3

這是一個有趣的問題，所以這裏有另一種可能性。我希望你們同意，這可以作爲一個完全獨立的答案，從我以前的答案...

你可以使用一組複雜的簡單形狀 - 包含在網格中 - 來實現你想要的效果。將您的「內容」框放在4個黑色矩形的頂部，每個黑色矩形位於網格的相應角落。

這是我的蹩腳的油漆插圖。再次，紅色框表示您的內容。除此之外的任何東西都是用戶將看到的邊框。

，及代碼現實生活中的例子：

<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="200"> 
    <!-- These rectangles will be the four corner "borders" --> 
    <Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
    <Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Bottom" /> 
    <Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Top" /> 
    <Rectangle Fill="Black" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Bottom" /> 

    <!-- Here is the content. The "margin" property will effectively be the thickness of your corner borders. --> 
    <Rectangle Fill="Red" Margin="2" />   
</Grid> 

它看起來像這樣：

這有縮放很好的好處;無論您的內容大小如何，角落邊框的大小始終相同。此外，邊界可以是任何你喜歡的厚度，不會像前面的徑向刷答案那樣看起來「怪異」。