【问题标题】:wpf gradient brush that spans multiple elements跨越多个元素的wpf渐变画笔
【发布时间】:2013-01-29 08:12:49
【问题描述】:

假设有一个形状不规则的元素,由任意嵌套的其他元素组成:

<Window.Resources>
  <RadialGradientBrush x:Key="brush">
    <GradientStop Color="Black" Offset="0" />
    <GradientStop Color="White" Offset="1" />
  </RadialGradientBrush>
</Window.Resources>

<StackPanel Name="element">
  <StackPanel.Effect>
    <DropShadowEffect ShadowDepth="0" BlurRadius="10" />
  </StackPanel.Effect>
  <Rectangle Name="child1" Height="100" Margin="10" Stroke="Black" Fill="{StaticResource brush}" />
  <Grid>
    <Rectangle Name="child2" Height="100" Margin="10" Stroke="Black" Fill="{StaticResource brush}" />
  </Grid>
</StackPanel>

所有部分都是交互式的(即一个孩子可以是一个真正的控制)。

如何使用跨越所有孩子的单个径向渐变来填充孩子的背景(应该看起来好像它的大小为element)。

更新:StackPanel 有一个阴影,应该在孩子周围绘制。

一种可能的解决方案是生成渐变,其中 Radius 和 Origin/Center 绑定到 elementchild 的属性并进行适当的转换,但这种方法会相当复杂和昂贵。

【问题讨论】:

  • 你能自己制作实际的控件Transparent并将它们放在背景上吗?
  • 什么意思?或许可以举个例子。
  • 所以你可以用你的渐变背景创建一个DockPanel,然后把你的控件放在DockPanel里面(作为孩子)。
  • 但我需要“切掉”控件之间的空白空间。
  • 我想你可能会,这就是我问的原因。你可以假装那个切口,但这可能不是你的最佳解决方案。

标签: wpf background gradient radial-gradients


【解决方案1】:

最后,我使用了转换后的渐变路线,除了绑定和转换器之外,我能够通过在子元素的 ArrangeOverride 中创建背景 Transformation 并通过依赖属性公开它来优雅地解决它。 实际的RadialGradientBrush 通过搜索具有匹配类型的祖先,将其Transform 绑定到BackgroundTransform

这假设一个人可以修改/包装子类,这在我的情况下是正确的。它可以通过附加的属性和更多的工作变得更加灵活。

实际代码在this gist

【讨论】:

    最近更新 更多