WPF绑定模板中的mahapps Metro图标 [英] WPF binding mahapps metro icons in template
问题描述
我想将此按钮代码转换为模板版本,并将其放入样式xaml文件中:
I would like to transform this button code into a template version and put it in a style xaml file:
<Button Background="Transparent" BorderBrush="Transparent" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="20" Foreground="White" Opacity="1">
<StackPanel Orientation="Horizontal">
<Rectangle Width="24" Height="24" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind=Face, Width=24, Height=24}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe" FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</Button>
直到现在我都拥有这个:
I have this until now:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Name="ButtonGrid" RenderTransformOrigin="0.5,0.5">
<Rectangle Width="48" Height="48" Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Path=(extensions:Icons.IconKind), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Rectangle.OpacityMask>
</Rectangle>
<iconPacks:PackIconSimpleIcons x:Name="btnIcon" Kind="{Binding Path=(**extensions:Icons.IconKind**), RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Width="48" Height="48" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}" />
<TextBlock x:Name="tButton" HorizontalAlignment="Center" VerticalAlignment="Bottom" Foreground="{TemplateBinding Foreground}" FontWeight="Bold" Text="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
<StackPanel.RenderTransform>
<ScaleTransform ScaleX="1.0" ScaleY="1.0" CenterX="0.5" CenterY="0.5"/>
</StackPanel.RenderTransform>
</StackPanel>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
在理想情况下,应在模板的visual属性中动态设置visual属性中指定的图标.
In a perfect world, the icon specified in the visual property should be set dynamically in the visual attribute of the template.
我想出了这个解决方案,但是没有用.绑定只能在DependencyProperty上完成.
I came up with this solution but it doesn't work. Binding can only be done on DependencyProperty.
<VisualBrush Stretch="Fill" Visual="{iconPacks:PackIconMaterial Kind={Binding Path=(extensions:Icons.IconKind)}, Width=48, Height=48}"/>
任何想法怎么做?我对模板表达式不是很好:/
Any idea how to do it? i'm not this good with template expressions :/
推荐答案
您可以定义带有VisualBrush
的Template
,该VisualBrush
绑定到Button
的Tag
属性:
You could define a Template
with a VisualBrush
that binds to the Tag
property of the Button
:
<Style x:Key="IconStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal"
DataContext="{Binding RelativeSource={RelativeSource AncestorType=Button}}">
<Rectangle Width="24" Height="24" Fill="{Binding Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{Binding Tag}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="10 0 10 0" VerticalAlignment="Center" Text="John Doe"
FontSize="24" FontWeight="Normal" FontFamily="Segoe UI Light" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...,然后将Tag
属性设置为图标:
...and then set the Tag
property to an icon:
<Button Style="{StaticResource IconStyle}" Foreground="Green">
<Button.Tag>
<iconPacks:PackIconMaterial Kind="Face" Width="24" Height="24" />
</Button.Tag>
</Button>
这篇关于WPF绑定模板中的mahapps Metro图标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!