我想创建一个矩'平3D'寻找我的一个控制模板。在这是最简单的版本,这意味着有一线底部是黑暗比的顶部,也许一些变化之间左右线。

一个更复杂的版本将允许我提供或更刷因此,梯度可能会加以应用。

默认的 <Border> 元素在WPF可用于指定一个不同的厚度的边缘,但是我不能找到一种方法指定多个刷子。

因此,如何才能产生效果,我希望尽可能简单?

编辑 它已经建议的,我的后如何我想用这个。我个人会有风格或用户的控制。用户的控制可能用这样的:

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

或许更简单:

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

这些只是想法。任何明智的、简洁的解决方案是值得欢迎的。

有帮助吗?

解决方案 2

下面是我设计了实现大多数的我想要的一个解决方案。它没有给出在所有四个侧面上独立完成的控制,但它确实给我想要的矩形形状的平坦的3D视图。

下面是它的外观:

粘贴到这个 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>

希望帮助别人了。我仍然在寻找这个问题的创新解决方案,所以要张贴,我会接受一个比这更好的答案。

其他提示

我刚刚通过直接在彼此顶部放置多个边框做了这样的事情。 E.g:

<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>

此提供的所有接壤provides--拐角半径和其他特征的附加优点,例如

老实说可能是最简单的方法是使用分层技术。例如创建这样的网格:

  <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>

你可以参考的 PresentationFramework.经典的 大会然后使用

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

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

我是用 这种技术对于寻找控制模板 看到默认的按钮风格

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top