Мне нужно создать многоступенчатый градиент вдоль кругового пути, как показано на следующем изображении:
Есть ли у кого-нибудь идеи о том, как это можно сделать в XAML, а не в коде? Можно ли использовать существующие градиентные кисти или как-то их собрать для достижения этого эффекта?
Вы можете получить кросс-радиальный эффект, используя неаффинное преобразование, такое как преобразование перспективы. Я использовал идеи в этой статье Чарльза Петцольда:
чтобы создать только кольцевую область XAML с поперечным градиентом. Вот разметка:
<Canvas x:Name="LayoutRoot">
<Canvas.Resources>
<x:Array x:Key="sampleData" Type="sys:Object">
<x:Array Type="sys:Object">
<sys:Double>0</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>90</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Green" Offset="0.5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>180</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Yellow" Offset="0.5"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</x:Array>
<x:Array Type="sys:Object">
<sys:Double>270</sys:Double>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Blue" Offset="0"/>
<GradientStop Color="Green" Offset="0.5"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</x:Array>
</x:Array>
</Canvas.Resources>
<ItemsControl ItemsSource="{StaticResource sampleData}">
<ItemsControl.OpacityMask>
<RadialGradientBrush>
<GradientStop Color="Transparent" Offset="0.95"/>
<GradientStop Color="White" Offset="0.949"/>
<GradientStop Color="White" Offset="0.501"/>
<GradientStop Color="Transparent" Offset="0.5"/>
</RadialGradientBrush>
</ItemsControl.OpacityMask>
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<ItemsPresenter/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas Width="1" Height="1">
<Canvas.RenderTransform>
<RotateTransform Angle="{Binding [0]}" CenterX="124" CenterY="124"/>
</Canvas.RenderTransform>
<Viewport3D Width="250" Height="250">
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0 0 0, 0 1 0, 1 0 0, 1 1 0" TextureCoordinates="0 1, 0 0, 1 1, 1 0" TriangleIndices="0 2 1, 2 3 1"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="{Binding [1]}"/>
</GeometryModel3D.Material>
<GeometryModel3D.Transform>
<MatrixTransform3D Matrix="0.002,0,0,0,-0.499,-0.498,0,-0.998,0,0,1,0,0.499,0.5,0,1"/>
</GeometryModel3D.Transform>
</GeometryModel3D>
<AmbientLight Color="White" />
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<Viewport3D.Camera>
<OrthographicCamera Position="0.5 0.5 1" LookDirection="0 0 -1" UpDirection="0 1 0" Width="1"/>
</Viewport3D.Camera>
</Viewport3D>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Canvas>
и вот визуальный результат:
Эффект использует коллекцию источника данных с элементами, которые имеют два свойства: угол и кисть. Он рисует четыре квадранта (вверх, вправо, вниз и влево), используя другую кисть для каждого квадранта. Затем все это привязано к кольцевой области с маской непрозрачности.
В GDI +/Winforms вы можете использовать PathGradientBrush для этого:
http://www.bobpowell.net/pgb.htm
http://msdn.microsoft.com/en-us/library/system.drawing.drawing2d.pathgradientbrush.aspx
К сожалению, поддержка WPG PathGradientBrush в WPF отсутствует, но несколько человек попросили его здесь:
(может быть, стоит также отдать свой голос!)
Из-за отсутствия поддержки вы не можете сделать это непосредственно в XAML, однако вы можете использовать код GDI + для создания изображения, а затем использовать изображение в своем XAML. Это может дать вам лучшую производительность, чем использование неаффинной трансформации.
Взгляните на Shazzam Вы можете написать пиксельный элемент, который отображает этот градиент.
Я думаю, что в конечном итоге это будет проще, чем объединение линейных градиентов. Другой вариант - просто нарисовать растровое изображение и использовать его.