Question

我的用户界面使用自定义的Button：它们包含Image和Label。

我通过将其内容设置为包含Button和Image的网格来手动自定义单个Label。但是，由于我需要有几个这样的Button s，具有不同的图像和标签，我想将这个模式“提取”成可重用的东西。基本上，我只需要一个可重用的对象，其中包含2个属性（Image和Text），我可以将其设置为多个Content的{{1}}。

我查看了ContentTemplates，但我不需要自定义Button控件本身的外观，只需定制其内容。

最合适的技术是什么？

Answer 1

最简单的方法是为此创建一个UserControl：

创建UserControl
为图像的BitmapSource类型的UserControl类添加“ImageSource”依赖项属性
将“Text”依赖项属性添加到string
对于您的UserControl XAML，请放置以下XAML（为简洁起见，您可以根据自己的布局需求进行更改）

用户控件的XAML：

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}" ...>
    <Button>
        <StackPanel Orientation="Horizontal">
           <Image Source="{Binding ImageSource}" />
           <TextBlock Text="{Binding Text}" />
        </StackPanel>
    </Button>
</UserControl>

现在，您可以在任何地方重复使用用户控件：

<myNS:MyUserControl ImageSource="MyImages/Foo.png" Text="Click here!" />

Answer 2

你可以：

从按钮派生一个类，添加两个属性并覆盖控件模板。使用包含按钮的usercontrol，您将被迫进行解决，例如将按钮作为属性公开。（附加命令，获取点击事件等。）
创建自己的具有两个属性的直接类，并将其设置为按钮内容，并为其创建数据模板，然后按钮保持为直接按钮。如果您希望从xaml设置这些属性，则从控件派生或允许依赖属性的东西

我会使用第二种方法，它简单快捷。

Answer 3

我会说控制模板编辑是最简单的选择。尝试使用以下控件模板来处理所有按钮。我假设Button.Content始终是Label和Button.Tag始终是图像源

     <ControlTemplate x:Key="ImageText_button" TargetType="{x:Type Button}">
        <Grid Background="Transparent">
            <Image Source="{TemplateBinding Tag}" Stretch="Fill"/>
            <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>

您的所有按钮XAML都将如下所示

<Button Content="MyLabel" Tag="\Image\abc.png" Template="{DynamicResource ImageText_button}" />

可重复使用的按钮自定义内容

3 个答案: