Wpf 使用画布作为具有可绑定颜色的图标
对于许多Wpf 使用画布作为具有可绑定颜色的图标,wpf,wpf-controls,resourcedictionary,wpf-4.0,visualbrush,Wpf,Wpf Controls,Resourcedictionary,Wpf 4.0,Visualbrush,对于许多WPFer,我使用此模式创建向量图标: 1-定义画布包含以下数据: 资源项目: 现在,如您所见,我必须在画布中获取路径,a填充值: <Path Fill="#FFFFFF00"> 我试着像下面那样使用它: <Path Fill="{Binding ui:UIElement.VisualIconForeground,RelativeSource={RelativeSource TemplatedParent}}"> 但它不起作用。你知道怎么做吗?我的意思是绑
WPF
er,我使用此模式创建向量图标:
1-定义画布
包含以下数据:
资源项目:
现在,如您所见,我必须在画布中获取路径
,a填充
值:
<Path Fill="#FFFFFF00">
我试着像下面那样使用它:
<Path Fill="{Binding ui:UIElement.VisualIconForeground,RelativeSource={RelativeSource TemplatedParent}}">
但它不起作用。你知道怎么做吗?我的意思是绑定资源项的某个属性以设置它们将在何处使用-糟糕的英语,我知道,对不起:(评论太长了,所以我会在这里写:
如果我理解正确,SubmitVisualIcon
是一个资源
。资源绑定
不支持,因此您不使用模板parent
进行绑定
,因为资源
不是可视化树的一部分,也不是模板的一部分。您可能需要寻找替代方法
或者,您可以使用应用程序支持的设置。在设置中设置颜色,并在资源中引用它,如下所示:
xmlns:properties="clr-namespace:MyNamespace.Properties"
<Path Fill="{Binding Source={x:Static properties:Settings.Default}, Path=SomeColor, Mode=TwoWay}" ... />
xmlns:properties=“clr namespace:MyNamespace.properties”
可以找到更多信息。最后,我找到了一个在这种情况下有效的解决方案。我应该使用Rectangle.OpacityMask
而不是Rectangle.Fill
:
资源:
<Canvas Width="256" Height="256" ClipToBounds="True" x:Key="SubmitVisualIcon">
<Path Fill="#FFFFFF00">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M44.436129,25.256006L54.222273,25.256006 75.259996,46.29286 70.368799,51.187792 54.094614,67.462006 44.561911,67.462006 44.436129,67.337162 62.016504,49.752106 15.633995,49.752106 15.633995,42.837337 62.016504,42.837337z M45,5.6100006C23.245507,5.6100006 5.6100006,23.245506 5.6100006,45 5.6100006,66.754498 23.245507,84.389999 45,84.389999 66.754499,84.389999 84.389997,66.754498 84.389997,45 84.389997,23.245506 66.754499,5.6100006 45,5.6100006z M45,0C69.852816,0 89.999998,20.147187 89.999998,45 89.999998,69.852814 69.852816,90.000004 45,90.000004 20.147188,90.000004 9.5367432E-07,69.852814 0,45 9.5367432E-07,20.147187 20.147188,0 45,0z"/>
</Path.Data>
</Path>
</Canvas>
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Border x:Name="root">
<Grid>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Width="32" Height="32"
Fill="{TemplateBinding ui:UIElement.VisualIconForeground}">
<!-- fill the rectangle with what color do you want, it also can be bounded to every thing -->
<!-- and then, use the Canvas as a OpacityMask on rectangle, just like this: -->
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Binding Path="(ui:UIElement.VisualIcon)"
RelativeSource="{RelativeSource TemplatedParent}"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
<!-- this will show the icon with color you defined in Rectangle.Fill -->
</Rectangle>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource AnotherVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
模板:
<Canvas Width="256" Height="256" ClipToBounds="True" x:Key="SubmitVisualIcon">
<Path Fill="#FFFFFF00">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M44.436129,25.256006L54.222273,25.256006 75.259996,46.29286 70.368799,51.187792 54.094614,67.462006 44.561911,67.462006 44.436129,67.337162 62.016504,49.752106 15.633995,49.752106 15.633995,42.837337 62.016504,42.837337z M45,5.6100006C23.245507,5.6100006 5.6100006,23.245506 5.6100006,45 5.6100006,66.754498 23.245507,84.389999 45,84.389999 66.754499,84.389999 84.389997,66.754498 84.389997,45 84.389997,23.245506 66.754499,5.6100006 45,5.6100006z M45,0C69.852816,0 89.999998,20.147187 89.999998,45 89.999998,69.852814 69.852816,90.000004 45,90.000004 20.147188,90.000004 9.5367432E-07,69.852814 0,45 9.5367432E-07,20.147187 20.147188,0 45,0z"/>
</Path.Data>
</Path>
</Canvas>
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Border x:Name="root">
<Grid>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Width="32" Height="32"
Fill="{TemplateBinding ui:UIElement.VisualIconForeground}">
<!-- fill the rectangle with what color do you want, it also can be bounded to every thing -->
<!-- and then, use the Canvas as a OpacityMask on rectangle, just like this: -->
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Binding Path="(ui:UIElement.VisualIcon)"
RelativeSource="{RelativeSource TemplatedParent}"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
<!-- this will show the icon with color you defined in Rectangle.Fill -->
</Rectangle>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource AnotherVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
用法:
<Canvas Width="256" Height="256" ClipToBounds="True" x:Key="SubmitVisualIcon">
<Path Fill="#FFFFFF00">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M44.436129,25.256006L54.222273,25.256006 75.259996,46.29286 70.368799,51.187792 54.094614,67.462006 44.561911,67.462006 44.436129,67.337162 62.016504,49.752106 15.633995,49.752106 15.633995,42.837337 62.016504,42.837337z M45,5.6100006C23.245507,5.6100006 5.6100006,23.245506 5.6100006,45 5.6100006,66.754498 23.245507,84.389999 45,84.389999 66.754499,84.389999 84.389997,66.754498 84.389997,45 84.389997,23.245506 66.754499,5.6100006 45,5.6100006z M45,0C69.852816,0 89.999998,20.147187 89.999998,45 89.999998,69.852814 69.852816,90.000004 45,90.000004 20.147188,90.000004 9.5367432E-07,69.852814 0,45 9.5367432E-07,20.147187 20.147188,0 45,0z"/>
</Path.Data>
</Path>
</Canvas>
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Border x:Name="root">
<Grid>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Width="32" Height="32"
Fill="{TemplateBinding ui:UIElement.VisualIconForeground}">
<!-- fill the rectangle with what color do you want, it also can be bounded to every thing -->
<!-- and then, use the Canvas as a OpacityMask on rectangle, just like this: -->
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Binding Path="(ui:UIElement.VisualIcon)"
RelativeSource="{RelativeSource TemplatedParent}"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
<!-- this will show the icon with color you defined in Rectangle.Fill -->
</Rectangle>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource AnotherVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
另一种用法:
<Canvas Width="256" Height="256" ClipToBounds="True" x:Key="SubmitVisualIcon">
<Path Fill="#FFFFFF00">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M44.436129,25.256006L54.222273,25.256006 75.259996,46.29286 70.368799,51.187792 54.094614,67.462006 44.561911,67.462006 44.436129,67.337162 62.016504,49.752106 15.633995,49.752106 15.633995,42.837337 62.016504,42.837337z M45,5.6100006C23.245507,5.6100006 5.6100006,23.245506 5.6100006,45 5.6100006,66.754498 23.245507,84.389999 45,84.389999 66.754499,84.389999 84.389997,66.754498 84.389997,45 84.389997,23.245506 66.754499,5.6100006 45,5.6100006z M45,0C69.852816,0 89.999998,20.147187 89.999998,45 89.999998,69.852814 69.852816,90.000004 45,90.000004 20.147188,90.000004 9.5367432E-07,69.852814 0,45 9.5367432E-07,20.147187 20.147188,0 45,0z"/>
</Path.Data>
</Path>
</Canvas>
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Border x:Name="root">
<Grid>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Width="32" Height="32"
Fill="{TemplateBinding ui:UIElement.VisualIconForeground}">
<!-- fill the rectangle with what color do you want, it also can be bounded to every thing -->
<!-- and then, use the Canvas as a OpacityMask on rectangle, just like this: -->
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Binding Path="(ui:UIElement.VisualIcon)"
RelativeSource="{RelativeSource TemplatedParent}"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
<!-- this will show the icon with color you defined in Rectangle.Fill -->
</Rectangle>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource AnotherVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
另一种用法2:
<Canvas Width="256" Height="256" ClipToBounds="True" x:Key="SubmitVisualIcon">
<Path Fill="#FFFFFF00">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M44.436129,25.256006L54.222273,25.256006 75.259996,46.29286 70.368799,51.187792 54.094614,67.462006 44.561911,67.462006 44.436129,67.337162 62.016504,49.752106 15.633995,49.752106 15.633995,42.837337 62.016504,42.837337z M45,5.6100006C23.245507,5.6100006 5.6100006,23.245506 5.6100006,45 5.6100006,66.754498 23.245507,84.389999 45,84.389999 66.754499,84.389999 84.389997,66.754498 84.389997,45 84.389997,23.245506 66.754499,5.6100006 45,5.6100006z M45,0C69.852816,0 89.999998,20.147187 89.999998,45 89.999998,69.852814 69.852816,90.000004 45,90.000004 20.147188,90.000004 9.5367432E-07,69.852814 0,45 9.5367432E-07,20.147187 20.147188,0 45,0z"/>
</Path.Data>
</Path>
</Canvas>
<ControlTemplate x:Key="MyButton" TargetType="{x:Type Button}">
<Border x:Name="root">
<Grid>
<Rectangle VerticalAlignment="Center" HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
Width="32" Height="32"
Fill="{TemplateBinding ui:UIElement.VisualIconForeground}">
<!-- fill the rectangle with what color do you want, it also can be bounded to every thing -->
<!-- and then, use the Canvas as a OpacityMask on rectangle, just like this: -->
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Binding Path="(ui:UIElement.VisualIcon)"
RelativeSource="{RelativeSource TemplatedParent}"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
<!-- this will show the icon with color you defined in Rectangle.Fill -->
</Rectangle>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource SubmitVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
<Button Content="Save" ui:UIElement.VisualIcon="{DynamicResource AnotherVisualIcon}"
ui:UIElement.VisualIconForeground="Some_Another_Brush">
因此,对于VisualIcon
来说,绑定效果很好,您想对VisualIcon前台
做同样的事情吗?是的,没错。我想Canvas.Path
从ControlTemplate
读取Fill
属性,如果我理解正确,SubmitVisualIcon
是一个资源。资源 绑定
不支持,因此您不能使用TemplatedParent
进行绑定
,因为资源不是可视化树的一部分,也不是模板的一部分。可能您必须寻找替代方法。+1请注意。但这不是答案,我希望能够更改路径。填充
属性在任何地方都可以使用。但是谢谢你的努力。干杯