8

コントロール テンプレートの 1 つに、長方形の「フラット 3D」外観を作成したいと考えています。最も単純なバージョンでは、これは下部にある線が上部よりも暗いことを意味し、左右の線にも多少の違いがある可能性があります.

より複雑なバージョンでは、グラデーションを適用できるように 1 つ以上のブラシを提供できます。

WPFのデフォルト<Border>要素では、エッジごとに異なる太さを指定できますが、複数のブラシを指定する方法が見つかりません。

では、どうすれば自分が望む効果をできるだけ簡単に生み出すことができるでしょうか?

編集これをどのように使用したいかの例を投稿することが提案されています。個人的には、スタイルまたはユーザー コントロールがあればうれしいです。ユーザー コントロールは次のように使用できます。

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

または、もっと簡単に:

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

これらは単なるアイデアです。賢明で簡潔な解決策は大歓迎です。

4

6 に答える 6

15

これは、私が望むもののほとんどを達成するために私が考案したソリューションです。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

于 2009-02-24T16:23:37.787 に答える
14

複数の境界線を直接重ねて配置するだけで、このようなことを行いました。例えば：

<Border 
  x:Name="TopAndLeft" 
  BorderThickness="3,3,0,0" 
  BorderBrush="{x:Static SystemColors.ControlLightBrush}">
<Border 
  x:Name="BottomAndRight" 
  BorderThickness="0,0,3,3" 
  BorderBrush="{x:Static SystemColors.ControlDarkBrush}">
    <ContentPresenter ... />
</Border>
</Border>

これにより、ボーダーが提供する他のすべての機能 (角の半径など) の利点が追加されます。

于 2011-03-17T18:05:59.627 に答える
3

正直なところ、おそらく最も簡単な方法は、レイヤリング テクニックを使用することです。たとえば、次のようなグリッドを作成します。

  <Grid Width="50" Height="50">  
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
     </Grid.ColumnDefinitions>

     <!-- Top Border -->
     <Border Height="3" Background="LightGray" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />

     <!-- Right Border -->
     <Border Width="3" Background="DarkGray" Grid.Column="2" Grid.Row="0" Grid.RowSpan="3" />

     <!-- Content -->
     <Border Background="Gray" Grid.Row="1" Grid.Column="1" />

     <!-- Left Border -->
     <Border Width="3" Background="LightGray" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" />

     <!-- Bottom Border -->
     <Border Height="3" Background="DarkGray" Grid.Row="2" Grid.Column="1" />

  </Grid>

私はあなたがアイデアを得ると思います。これはおそらく最も簡単な方法です。これをテンプレートとして設定し、次のように使用できます。

<Template x:Key="My3DBorder" TargetType="ContentControl">
    <!-- Put the Grid definition in here from above -->
</Template>

<ContentControl Template="{StaticResource My3dBorder}">
   <!-- My Content Goes Here -->
</ContentControl>
于 2009-02-24T14:10:23.413 に答える
1

PresentationFramework.Classicアセンブリを参照してから使用できます

<Window xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic">
...

<Grid Width="50" Height="50">
    <mwt:ClassicBorderDecorator BorderThickness="3,3,3,3"/>
</Grid>

コントロールテンプレートを見て、デフォルトのボタンがどのようにスタイルされているかを確認するために、この手法を使用していました

于 2012-09-22T21:39:36.200 に答える