2009-11-25 70 views
30

我创建了一个静态资源,用于定义xaml中特定项目的边框,但我无法找到为每个边都定义唯一颜色的好方法!为每个角落使用不同刷子颜色的边框

XAML:

<Border Style="{StaticResource SidePanelBorder}"> 
     <!-- rest of the xaml --> 
</Border> 

静态资源:

<Style x:Key="SidePanelBorder"> 
    <Setter Property="Control.BorderBrush" Value="#FF363636" /> 
    <Setter Property="Control.BorderThickness" Value="1" /> 
</Style> 

但我想定义一个颜色的边界两侧,并最终也不同的边框厚度。

有没有这样做的好技术?

+0

我想创建一个使用边框的插入效果 – 2009-11-25 13:14:05

回答

49

似乎很哈克,但你可以边框中定义的边界,并只有1侧的厚度。例如,

<Border BorderThickness="0,0,0,10" BorderBrush="Green"> 
    <Border BorderThickness="0,0,10,0" BorderBrush="Blue"> 
     <Grid> 
      <Button>Hello</Button> 
     </Grid> 
    </Border> 
</Border> 

会在底部给出绿色边框,在右边给出蓝色边框。尽管Xaml并不是最漂亮的一块。

+0

这正是我发现的最好的解决方案。不应该有必要为这样简单的事情引入2个边界,但我想我必须去寻求解决方案!谢谢 – 2009-11-26 08:19:15

+5

这将工作与圆角? – eriksmith200 2010-10-12 13:48:38

2

有没有简单的方法来做到这一点,而无需编写自己的控制还是继承边框

+5

嗯,这是一个耻辱!应该像HTML和CSS那样容易,你有边框,边框等等! – 2009-11-25 13:17:20

9

你可以拥有一个DockPanel,并且可以将4个边界放入其中,每个边界都停靠在不同的一侧。 像:

<DockPanel LastChildFill="true"> 
    <Border DockPanel.Dock="Left" Background="Red"/> 
    <Border DockPanel.Dock="Top" Background ="Blue"/> 
    <Border DockPanel.Dock="Right" Background ="Yellow"/> 
    <Border DockPanel.Dock="Bottom" Background ="Green"/> 
    <Grid> 
    ...........your control here 
    </Grid> 
</DockPanel> 
+2

有趣的做法。 – Tower 2012-04-22 14:18:22

4

如果您使用网格,你可以有边框的彼此叠加来达到相同的效果。只需设置要显示和具有边框颜色的边框厚度其它边框厚度为0

<UserControl.Resources> 
     <Style x:Key="GreenBorder" TargetType="Border"> 
      <Setter Property="BorderBrush" Value="Green" /> 
      <Setter Property="BorderThickness" Value="1,1,1,0" />   
     </Style> 
     <Style x:Key="RedBorder" TargetType="Border"> 
      <Setter Property="BorderBrush" Value="Red" /> 
      <Setter Property="BorderThickness" Value="0,0,0,1" /> 
     </Style> 
    </UserControl.Resources> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource GreenBorder}"> 
      <!-- Content goes here --> 
     </Border> 
     <Border Grid.Column="0" Grid.Row="0" Style="{StaticResource RedBorder}"> 
     </Border> 
    </Grid> 

这会给一个绿色边框的左侧,顶部和右侧边框,而是一个红色边框的Grid单元格的底部边框。

20

使用一个边境和VisualBrush,允许设置边框的CornerRadius和了borderThickness,另一种解决方案:

<Border BorderThickness="10" CornerRadius="10" HorizontalAlignment="Right" Height="150" VerticalAlignment="Bottom" Width="150" Margin="0,0,92.666,42.667"> 
    <Border.BorderBrush> 
     <VisualBrush> 
      <VisualBrush.Visual> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition/> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 

        <Path x:Name="ColoredBorderLeft" Data="M0,0 L0,0 1,0.5 L1,0.5 0,1" Fill="Blue" Stretch="Fill" Grid.RowSpan="2"/> 
        <Path x:Name="ColoredBorderRight" Data="M1,0 L1,0 0,0.5 L0,0.5 1,1" Fill="Red" Stretch="Fill" Grid.Column="1" Grid.RowSpan="2"/> 
        <Path x:Name="ColoredBorderTop" Data="M0,0 L0,0 0.5,1 L0.5,1 1,0" Fill="Green" Stretch="Fill" Grid.ColumnSpan="2"/> 
        <Path x:Name="ColoredBorderBottom" Data="M0,1 L0,1 0.5,0 L0.5,0 1,1" Fill="Yellow" Stretch="Fill" Grid.Row="1" Grid.ColumnSpan="2"/> 
       </Grid> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </Border.BorderBrush> 
</Border> 
  • 需要的电网,以防止三角形路径的提示,以“通过推动”入边界。
  • Path.Name's可用于DataBinding或设置代码后面的颜色。
+0

非常好,并与圆角工作 – 2014-10-08 16:17:59