Question

我最近开始使用C＃WPF，因为它有更多选项来装饰控件。现在我想尝试制作一个带有图标的按钮，旁边有文字，经过一点点搜索后我发现a post that seemed helpfull。而且我认为我正确地得到了我想要的东西，但我无法弄清楚我是如何做到这一点所以我可以单独为每个按钮分配图标。

这是我目前用于按钮的代码：

<!-- Resource Dictionary-->
<Style TargetType="{x:Type Button}" x:Key="Test">
    <Setter Property="Background" Value="#373737" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="FontSize" Value="15" />
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border CornerRadius="4" Background="{TemplateBinding Background}">
                    <Grid>
                        <Canvas x:Name="ButtonImage" Width="40" Height="40" HorizontalAlignment="Left" Margin="10,0,0,0">
                            <Canvas.Background>
                                <ImageBrush ImageSource="F:\Deze Pc\Afbeeldingen\Icons\Steel Series\Documents.ico"/>
                            </Canvas.Background>
                        </Canvas>
                        <Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="20,0,0,0" />
                        <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="60,0,0,0" />
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#E59400" />
                        <Setter Property="Foreground" Value="White" />
                        <Setter TargetName="PathIcon" Property="Fill" Value="Black" />
                    </Trigger>

                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="OrangeRed" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!--Window Xaml -->
<Button Width="200" Height="50" VerticalAlignment="Top"  Grid.Row="2" Style="{StaticResource Test}" >
        <Button.Content>
            <StackPanel>
                <TextBlock Text="Button text here" FontSize="20" />
            </StackPanel>
        </Button.Content>
    </Button>

但现在是我的问题，我如何制作它，以便我可以在xaml窗口而不是在资源字典中设置图像，这样我就可以为不同的按钮提供不同的图标而无需制作样式对于他们每个人。

Answer 1

假设您尚未在模板中使用DataContext进行任何操作，我认为最简单的方法是绑定到该模板。即，在您的模板中：

<Canvas x:Name="ButtonImage" Width="40" Height="40" HorizontalAlignment="Left" Margin="10,0,0,0">
    <Canvas.Background>
        <ImageBrush ImageSource="{Binding}"/>
    </Canvas.Background>
</Canvas>

然后使用样式：

<Button Width="200" Height="50" VerticalAlignment="Top"
        Grid.Row="2" Style="{StaticResource Test}"
        DataContext="{StaticResource imageSource1}">
    <Button.Content>
        <StackPanel>
            <TextBlock Text="Button text here" FontSize="20" />
        </StackPanel>
    </Button.Content>
</Button>

当然，您已将适当的图像源声明为资源，例如：

<BitmapImage x:Key="imageSource1"
             UriSource="F:\Deze Pc\Afbeeldingen\Icons\Steel Series\Documents.ico"/>

替代方案包括：

出于同样目的使用Tag属性。在这种情况下，它有点复杂：您需要将Tag属性向下传递到Border元素，例如<Border x:Name="root" Tag="{TemplateBinding Tag}" ...>，然后在模板中将其引用为例如<ImageBrush ImageSource="{Binding Tag, ElementName=root}"/>
创建特定的数据结构以保存所需的属性值。在这种情况下，您仍然需要使用DataContext并通过{Binding PropertyName}语法访问属性，因此这并不比我上面的主要建议更好。如果您发现需要将多个值从客户端站点传递到模板，那么可以使用它。

Answer 2

我相信您需要使用DynamicResource，如下所示

<Image Source="{DynamicResource ResourceKey=Img}"/>

Referance

或使用RelativeSource

<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" />

资源字典中的Wpf数据绑定

2 个答案: