Dot-Net

如何給 WPF 元素一個矩形平面 3D 邊框?

  • March 3, 2022

我想為我的一個控制項模板創建一個矩形“平面 3D”外觀。在最簡單的版本中,這意味著底部的線比頂部的線更暗,左右線之間也可能存在一些變化。

更複雜的版本將允許我提供一個或多個畫筆,以便可以應用漸變。

WPF 中的預設<Border>元素允許您為每個邊緣指定不同的厚度,但我找不到指定多個畫筆的方法。

那麼,如何才能盡可能簡單地產生我想要的效果呢?

編輯有人建議我發布一個我想如何使用它的例子。就我個人而言,我很樂意擁有樣式或使用者控制項。使用者控制項可以這樣使用:

<FourSidedBorder LeftSideBrush="#00f" RightSideBrush="#0f0" ... />

或者甚至更簡單:

<FourSidedBorder BorderBrush="#00f,#0f0,#f00,#fff"
                BorderThickness="1,2,3,4" ... />

這些只是想法。歡迎任何明智、簡潔的解決方案。

這是我設計的一個解決方案,可以實現我想要的大部分功能。它不能獨立地完全控制所有四個邊,但它確實提供了我想要的矩形平面 3D 視圖。

這是它的外觀:

$$ ![ $$$$ 1 $$]$$ 1 $$ 將其粘貼到Kaxaml中以親自查看:

<Page
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 Background="#CCC">
 <Page.Resources>
   <!-- A brush for flat 3D panel borders -->
   <LinearGradientBrush x:Key="Flat3DBorderBrush"
                        StartPoint="0.499,0" EndPoint="0.501,1">
     <GradientStop Color="#FFF" Offset="0" />
     <GradientStop Color="#DDD" Offset="0.01" />
     <GradientStop Color="#AAA" Offset="0.99" />
     <GradientStop Color="#888" Offset="1" />
   </LinearGradientBrush>
 </Page.Resources>
 <Grid>  
   <!-- A flat 3D panel -->
   <Border
         HorizontalAlignment="Center" VerticalAlignment="Center"
         BorderBrush="{StaticResource Flat3DBorderBrush}"
         BorderThickness="1" Background="#BBB">

         <!-- some content here -->
         <Control Width="100" Height="100"/>

   </Border>  
 </Grid>
</Page>

希望能幫助別人。我仍在尋找解決此問題的創新解決方案,因此請繼續發帖,我會接受比這個更好的答案。

$$ 1 $$: https://i.stack.imgur.com/eMStF.png

引用自:https://stackoverflow.com/questions/581838