Caliburn Micro: UserControl Binding

Question

I use Caliburn Micro for my WPF application. I implemented a little 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>

Now I want to use these Control in my view:

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

When I want to open my view (in my case it's opened as a dialog) it doesn't work. The View does not openend. When I remove the Name-Attribute everthing is fine, but the Button have no binding to an action. Can anyone tell me what I have to do for a correct binding? A regular Button worked.

Answer 1

You are on a completely wrong way. You shouldn't create a user control for such a simple modification. You need to create a DataTemplate and use it for a Button.ContentTemplate. First you need to define a helper type for button content:

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

After that you can use it for 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>

I used a resource for an object, but you can use a property on your ViewModel. The result is:

And this just a normal button. You can use for it all power of Caliburn.Micro conventions like Click event default binding. Enjoy!