各隅のブラシの色が異なる境界線のスタイル

Question

xaml内の特定の項目の境界を定義する静的リソースを作成しましたが、それぞれの側面に固有の色を定義する良い方法はありません。

XAML：

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

StaticResource：

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

しかし、私は1つの境界の両側の色、そして最終的にはまた異なる境界線の太さを定義します。

これを実行する優れた技術はありますか？

Answer 1

を独自のコントロールを書いたりサブクラス化せずにこれを行うための簡単な方法ません非常にハックようだが、あなたは境界内の境界を定義し、唯一の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の一番美しい作品ではありません。

Answer 2

が国境

Answer 3

あなたは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> 

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

これは左、上と右の境界線が、赤の国境に緑色の枠を与えることが、あなたが表示され、他の境界線の太さを持つようにしたい境界線の色の境界線の太さを設定しますグリッドセルの下の境界。

、1ボーダーやたVisualBrushを使用してボーダーのCornerRadiusとBorderThicknessを設定できるように別の解決策

Answer 5

：

<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は、DataBindingまたはコードの背後にある色を設定するために使用できます。