如何给予WPF元素一个矩形平面3D边框?

ttcibm8c  于 2023-10-22  发布在  其他
关注(0)|答案(7)|浏览(136)

我想创建一个矩形'平面三维'看我的控制模板之一。在最简单的版本中,这意味着在底部有一条比顶部更暗的线,并且可能在左右线之间也有一些变化。
一个更复杂的版本将允许我提供一个或更多的画笔,以便梯度可以应用。
WPF中的默认<Border>元素允许您为每条边指定不同的厚度,但我找不到指定多个画笔的方法。
那么,如何才能尽可能简单地产生我想要的效果呢?

编辑有人建议我发布一个我想如何使用它的例子。就我个人而言,我很高兴有一个风格或用户控制。用户控件可以这样使用:

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

或者更简单:

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

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

zzwlnbp8

zzwlnbp81#

这是我设计的一个解决方案,它实现了我想要的大部分内容。它并不能给予对所有四个侧面的完全控制,但它确实能给予我想要的矩形平面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

gojuced7

gojuced72#

我已经做了类似的事情,只是把多个边界直接放在另一个之上。例如:

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

这提供了border提供的所有其他特性的额外优点--拐角半径等。

wb1gzix0

wb1gzix03#

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

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

wztqucjr4#

您可以引用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>

我使用this technique for looking at control templates来查看默认按钮的样式

rqenqsqc

rqenqsqc5#

需要一个经典的3D“插入”边界。根据@GregD的回答(谢谢!):

<Border BorderThickness="0,0,1,1" BorderBrush="{x:Static SystemColors.ControlLightLightBrush}">
        <Border BorderThickness="1,1,0,0" BorderBrush="{x:Static SystemColors.ControlDarkBrush}">
            <Border BorderThickness="0,0,1,1" BorderBrush="{x:Static SystemColors.ControlLightBrush}">
                <Border BorderThickness="1,1,0,0" BorderBrush="{x:Static SystemColors.ControlDarkDarkBrush}">
                ..
                </Border>
            </Border>
        </Border>
    </Border>

要使其成为“outset”,请恢复第一和第二元素对的顺序。

ltqd579y

ltqd579y6#

我的两分钱酷的方法,我喜欢-使用阴影太(作为一种风格,所以你可以在任何地方使用它):

<Style x:Key="border_style" TargetType="{x:Type Border}">
        <Style.Resources>
            <DropShadowEffect x:Key="dropShadowEffect" BlurRadius="8" ShadowDepth="1" Color="#FF2686AA" RenderingBias="Quality"/>
         </Style.Resources>

        <Setter Property="CornerRadius" Value="2" />
        <Setter Property="Effect" Value="{StaticResource dropShadowEffect}"/>
        <Setter Property="BorderBrush" Value="Gray"/>
        <Setter Property="BorderThickness" Value="1.2,1.2,0.3,0.3"/>
    </Style>

用法(注册样式时):

<Border Style="{StaticResource border_style}">

 </Border>

3D边界效果的位置是用BorderThickness完成的。你可以玩颜色,阴影深度,模糊半径,角落半径等。

ubof19bj

ubof19bj7#

<Style x:Key="CustomButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="#F0F0F0"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" x:Name="Border" >
                        <Grid>
                            <Border BorderThickness="1 1 0 0" BorderBrush="White"/>
                            <Border BorderThickness="0 0 1 1" BorderBrush="#696969"/>
                            <Border BorderThickness="1 1 0 0" BorderBrush="#E3E3E3" Margin="1"/>
                            <Border BorderThickness="0 0 1 1" BorderBrush="#A0A0A0" Margin="1"/>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Border" Property="BorderBrush" Value="DimGray"/>
                            <Setter TargetName="Border" Property="BorderThickness" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

相关问题