一部の xaml では、各コーナーから数ピクセルだけの境界線が必要です。したがって、上部に沿って、境界線は、たとえば、左端の 5 ピクセルの黒になり、その後、右端の 5 ピクセルまで上部の残りの部分で透明になり、次に境界線の最後の 5 ピクセルが透明になります。右端は黒になります。その意図は、場合によっては透過的なものを選択するためのガイダンスを提供することです。ただし、このアプリケーションでは、完全な境界線が存在すると、(知覚的視覚的な意味で) コンテンツが妨げられます。角は丸くありません。
次のようになります。
-- --
| |
| |
-- --
この効果を得るには、どのタイプのブラシを使用すればよいですか?
次のように、線形グラデーションを試しました。
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="0.01" />
<GradientStop Color="Transparent" Offset="0.0101" />
<GradientStop Color="Transparent" Offset="0.9899" />
<GradientStop Color="Black" Offset="0.99" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
もちろん、これは左上と右下だけです。これは意図したアプリケーションでは妥当かもしれませんが、各コーナーの線のサイズは、境界領域が正方形の場合にのみ同じです (たとえば、境界領域が長い長方形の場合、境界のセクションは 1 つの領域に沿ってはるかに長くなります)。側よりも側)。
グラデーション ブラシの MappingMode 値が「Absolute」であることを確認しました。これは左上隅ではうまく機能しますが、他の隅では機能しません。
また、リングをコーナーに当てることができると考えて、RadialGradientBrush も試しましたが、リングを正しく中央に配置することも、辺に沿って等長にすることもできませんでした。
これは ListBox の ItemContainerStyle の一部であり、枠線は IsSelected のトリガーで変更されます。このため、ボーダー内（ボーダー内など）のボーダーもできません。
編集 #2: VisualBrush も試しました。グリッドで必要な動作 (少なくともストレッチ動作) が得られることはわかっていました。
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="10" MaxWidth="10" MinWidth="10" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
<RowDefinition Height="*" />
<RowDefinition Height="10" MaxHeight="10" MinHeight="10" />
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="1" Grid.Row="0" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="0" Fill="Black" />
<Rectangle Grid.Column="0" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="1" Fill="Transparent" />
<Rectangle Grid.Column="0" Grid.Row="2" Fill="Black" />
<Rectangle Grid.Column="1" Grid.Row="2" Fill="Transparent" />
<Rectangle Grid.Column="2" Grid.Row="2" Fill="Black" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
しかし、これもうまくいきません。ブラシ内で同じようにサイジングが行われないようです。この場合、VisualBrush のグリッドのサイズは最終的に 20x20 になり、中央の透明部分はスペースを占有しません。HorizontalAlignment と VerticalAlignment を Stretch に設定しても効果はありませんでした。VisualBrush の Stretch="Fill" も何もしませんでした。
編集＃1：より広い文脈：
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
<Setter Property="Margin" Value="3" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderThickness" Value="5" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderBrush" Value="Fuchsia" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="4" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Black" Offset="0.01" />
<GradientStop Color="Transparent" Offset="0.0101" />
<GradientStop Color="Transparent" Offset="0.9899" />
<GradientStop Color="Black" Offset="0.99" />
<GradientStop Color="Black" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
