Search code examples
wpfbindinginterfacedatatemplate

ContentControl DataTemplate using Interface


I've got a wpf application which shows a list of users. clicking on a user will display the details of that user - much like the WaF book library example, etc.

I've done a bit of reading about binding to interfaces, and i can successfully bind a ListView to my interface, but using the same method with a ContentControl doesn't work.

here's what i've got:

domain model - USER (EF entity)

partial class USER : IUser
    {
    }



public interface IUser
    {
        String USERNAME { get; set; }
        String FIRST_NAME { get; set; }
        String SURNAME {get;set;}
        String EMAIL { get; set; }
    }

presentation layer

    public class UserMainContentModel 
    {
          public ICollectionView Users { get; private set; }
          public IUser SelectedUser { get; private set; }
          //...
          private void SelectedUserChanged(object sender, EventArgs e)
          {
            SelectedUser = Users.CurrentItem as IUser;
             NotifyPropertyChanged("SelectedUser");
          }
    }

view xaml

<UserControl x:Class="CQMS.Module.Users.Views.MainContent.UsersMainContentView"
             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" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:models="clr-namespace:CQMS.Module.Users.ViewModels"
             xmlns:interface="clr-namespace:CQMS.Framework.Model;assembly=CQMS.Framework"             
             mc:Ignorable="d" >
    <UserControl.Resources>
        <DataTemplate DataType="{x:Type interface:IUser}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Label AutomationProperties.AutomationId="UsernameLabel" Grid.Row="0" Grid.Column="0" Margin="0,0,0,10">Username</Label>
                <Label AutomationProperties.AutomationId="NameLabel" Grid.Row="0" Grid.Column="1">Name</Label>
                <Label AutomationProperties.AutomationId="EmailLabel" Grid.Row="0" Grid.Column="2">Email</Label>
                <TextBox AutomationProperties.AutomationId="UsernameTextBox" Grid.Row="1" Grid.Column="0" Text="{Binding interface:IUser.USERNAME}" />
                <TextBox AutomationProperties.AutomationId="NameTextBox" Grid.Row="1" Grid.Column="1" Text="{Binding interface:IUser.FIRST_NAME}" />
                <TextBox AutomationProperties.AutomationId="EmailTextBox" Grid.Row="1" Grid.Column="2" Text="{Binding interface:IUser.EMAIL}" />
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height=".4*"/>
            <RowDefinition Height=".6*"/>
        </Grid.RowDefinitions>
        <ListView Grid.Row="0" AutomationProperties.AutomationId="UserListView" ItemsSource="{Binding Users}"  SelectionMode="Single" Width="Auto" Height="Auto" >
            <ListView.ItemTemplate>
                <DataTemplate DataType="{x:Type interface:IUser}"/>
            </ListView.ItemTemplate>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Username" Width="80"
                         DisplayMemberBinding="{Binding Path=USERNAME}"/>
                    <GridViewColumn Header="First Name" Width="80"
                         DisplayMemberBinding="{Binding Path=FIRST_NAME}"/>
                    <GridViewColumn Header="Email" Width="80"
                         DisplayMemberBinding="{Binding Path=EMAIL}"/>
                </GridView>
            </ListView.View>
        </ListView>
        <Border Grid.Row="1" CornerRadius="4,4,4,4" BorderBrush="#193441" Background="#FCFFF5" BorderThickness="2,2,2,2" Margin="5" Padding="5">
            <ContentControl Content="{Binding SelectedUser}"  Width="Auto" Height="Auto"/>
        </Border>
    </Grid>
</UserControl>

When i select a user from the list, what i want is for the selected user's details to show in the content control, however, all i'm getting is the name of the concrete class being shown in this control. I don't want to expose my concrete class to my view, and i don't really want to have to wrap my IUser object in a Model object...is there a way to do this? have i implemented this correctly?


Solution

  • Are you sure that DataTemplates can be applied implicitly for interfaces instead of classes? Either way, in this case it would not hurt to give the template a key and to reference it in the ContentControl.ContentTemplate.

    Also i have never seen bindings like this, shouldn't the path simply be USERNAME instead of interface:IUser.USERNAME?