Необходимо сделать подложку под текст бокс, у которой бы были края из градиента, плавно переходящего из цвета в прозрачность. Реализовал с помощью нескольких контролов, каждый из них отвечает за свой участок градиента. В дизайнере это смотрелось все очень красиво. Достаточно, заметны небольшие отклонения в градиенте, однако предполагается работа либо на белом фоне, где градиент вовсе не виден, т.к. совпадает с цветом градиента, либо над изображением, где неоднородность цветов позволит почти скрыть данный артефакт.
Скриншот из дизайнера:
Скриншот эмулятора (на реальном девайсе все 1 в 1, проверил):
Удавалось минимизировать заметность, играясь с высотой блока в пределах 200.0 - 200.3 и выключенным параметром UseLayoutRounding, помогало, но не полностью.
<Grid Height="200" UseLayoutRounding="False">
<Grid.Resources>
<system:Double x:Key="thValue">50</system:Double>
<system:Double x:Key="thValueX2">100</system:Double>
<system:Double x:Key="thValueLess">49</system:Double>
<RadialGradientBrush x:Key="cornerBrush">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Black"
Offset="1" />
</RadialGradientBrush>
<LinearGradientBrush x:Key="topBrush"
StartPoint="0,1"
EndPoint="0,0">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="leftBrush"
StartPoint="1,0"
EndPoint="0,0">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="rightBrush"
StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="bottomBrush"
StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Grid.Resources>
<!--<Ellipse HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
Fill="{StaticResource cornerBrush}" />-->
<es:Arc ArcThickness="1"
UseOptimizedManipulationRouting="True"
Margin="0 0 0 0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
EndAngle="0"
Stretch="None"
StartAngle="270"
UseLayoutRounding="True"
StrokeThickness="0"
ArcThicknessUnit="Percent">
<es:Arc.Fill>
<RadialGradientBrush GradientOrigin="1,1"
Center="1,1"
RadiusX="1"
RadiusY="1"
SpreadMethod="Reflect">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="0.98" />
</RadialGradientBrush>
</es:Arc.Fill>
</es:Arc>
<Ellipse HorizontalAlignment="Right"
VerticalAlignment="Top"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
Fill="{StaticResource cornerBrush}" />
<!--<Ellipse HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
Fill="{StaticResource cornerBrush}" />-->
<es:Arc ArcThickness="1"
UseOptimizedManipulationRouting="True"
Margin="0 0 0 0"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
EndAngle="270"
Stretch="None"
StartAngle="180"
UseLayoutRounding="False"
StrokeThickness="0"
ArcThicknessUnit="Percent">
<es:Arc.Fill>
<RadialGradientBrush GradientOrigin="1,0"
Center="1,0"
RadiusX="1"
RadiusY="1"
SpreadMethod="Reflect">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Transparent"
Offset="0.98" />
</RadialGradientBrush>
</es:Arc.Fill>
</es:Arc>
<Ellipse HorizontalAlignment="Right"
OpacityMask="Black"
VerticalAlignment="Bottom"
Width="{StaticResource thValueX2}"
Height="{StaticResource thValueX2}"
Fill="{StaticResource cornerBrush}" />
<!--Margin="50 0 50 0"-->
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Margin="50 0 50 0"
Height="{StaticResource thValue}"
Fill="{StaticResource topBrush}">
<!--<Rectangle.Margin>
<Thickness Left="{StaticResource thValue}"
Top="0"
Right="{StaticResource thValue}"
Bottom="0" />
</Rectangle.Margin>-->
</Rectangle>
<!--Margin="0 50 0 50"-->
<Rectangle HorizontalAlignment="Left"
VerticalAlignment="Stretch"
UseLayoutRounding="False"
UseOptimizedManipulationRouting="True"
Margin="0 50 0 50"
Width="{StaticResource thValue}"
Fill="{StaticResource leftBrush}" />
<!--Margin="0 50 0 50"-->
<Rectangle HorizontalAlignment="Right"
Margin="0 50 0 50"
VerticalAlignment="Stretch"
Width="{StaticResource thValue}"
Fill="{StaticResource rightBrush}" />
<!--Margin="50 0 50 0"-->
<Rectangle HorizontalAlignment="Stretch"
Opacity="1"
VerticalAlignment="Bottom"
Margin="50 0 50 0"
Height="{StaticResource thValue}"
Fill="{StaticResource bottomBrush}">
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0,1"
EndPoint="0,0">
<GradientStop Color="White"
Offset="0" />
<GradientStop Color="Black"
Offset="1" />
</LinearGradientBrush>
</Rectangle.OpacityMask>
<!--<Rectangle.Margin>
<Thickness Left="{StaticResource thValue}"
Top="0"
Right="{StaticResource thValue}"
Bottom="0" />
</Rectangle.Margin>-->
</Rectangle>
<Rectangle HorizontalAlignment="Stretch"
Margin="49"
VerticalAlignment="Stretch"
Fill="White">
<!--<Rectangle.Margin>
<Thickness Left="{StaticResource thValueLess}"
Top="{StaticResource thValueLess}"
Right="{StaticResource thValueLess}"
Bottom="{StaticResource thValueLess}" />
</Rectangle.Margin>-->
</Rectangle>
</Grid>
В чем проблема? Какие еще существуют способы реализовать задуманное?
