Caliburn Micro: UserControl绑定

Question

我将Caliburn Micro用于我的WPF应用程序。我实现了一个小UserControl：

<UserControl Name="ImageButtonUserControl"
             x:Class="SportyMate.Utility.Controls.ImageButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
    <Grid>
        <Button>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ElementName=ImageButtonUserControl, Path=Image}" />
                <TextBlock Text="{Binding ElementName=ImageButtonUserControl, Path=Text}" />
            </StackPanel>
        </Button>
    </Grid>
</UserControl>

现在我想在我的视图中使用这些控件：

<uc:ImageButton Name="Cancel" Image="/Images/Icons/cancel_16x16.png" Text="Abbrechen" Margin="3" />

当我想要打开我的视图时(在我的例子中，它是作为一个对话框打开的)，它不工作。视图未打开端点。当我删除Name-Attribute时，一切都很好，但Button没有绑定到操作。有谁能告诉我要做什么才能得到正确的绑定？一个普通的按钮正常工作。

Answer 1

你走在一条完全错误的路上。你不应该为这样一个简单的修改创建一个用户控件。您需要创建一个DataTemplate并将其用于Button.ContentTemplate。首先，您需要为按钮内容定义一个助手类型：

public class ImageButtonContent
{
    public BitmapImage Image { get; set; }
    public string Label { get; set; }
}

之后，您可以将其用于DataTemplate：

<Window x:Class="Trys.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:Trys="clr-namespace:Trys"
            Title="MainWindow"
            Height="350"
            Width="525">
      <Window.Resources>
        <Trys:ImageButtonContent x:Key="YourImageButtonHere"
                                 Label="Your ImageButtonHere">
          <Trys:ImageButtonContent.Image>
            <BitmapImage UriSource="your-icon.png" />
          </Trys:ImageButtonContent.Image>
        </Trys:ImageButtonContent>
        <DataTemplate x:Key="ImageButton"
                      DataType="{x:Type Trys:ImageButtonContent}">
          <StackPanel Orientation="Horizontal">
            <Image Source="{Binding Image}"
                   Margin="5" />
            <TextBlock Text="{Binding Label}"
                       VerticalAlignment="Center"
                       Margin="10,0,0,0" />
          </StackPanel>
        </DataTemplate>
      </Window.Resources>
      <Grid>
        <Button ContentTemplate="{StaticResource ImageButton}"
                Content="{StaticResource YourImageButtonHere}"
                Height="50"
                Width="250" />
      </Grid>
</Window>

我为对象使用了资源，但您可以在ViewModel上使用属性。结果是：

​

​

这只是一个普通的按钮。您可以使用Caliburn.Micro约定的所有功能，如单击事件默认绑定。享受吧！