CODEWITHSUNDEEP
wpfimagemvvmresourcedictionary
BrianKE
BrianKE

Reputation: 4185

UserControl update image based on datatype

I have a program that displays either customer, company or employee info. I would like to display an icon next to this image with the icon changing based on the type of info I am displaying (customer, company or employee).

I have the following setup in my resource dictionary to specify the images:

<ImageSource x:Key="CompanyIcon">../Images/companies_32.png</ImageSource>
<ImageSource x:Key="EmployeeIcon">../Images/employee_32.png</ImageSource>
<ImageSource x:Key="CustomerIcon">../Images/customer_32.png</ImageSource>

In my viewmodel I would like to assign the image based on what data type I am working with. For instance if I am viewing a company's info (a DBContext of type 'Company' using EF 4.5) I want to set the image to that of 'CompanyIcon'.

How would I assign the image with the viewmodel (and change it as I change between a 'Company', 'Employee' or 'Customer' DBContext type) and then bind this image to a placeholder in the view (it will be displayed within a grid column).

Upvotes: 1

Views: 786

Answers (2)

Rachel
Rachel

Reputation: 132568

I would use a DataTrigger that sets the Image.Source based on the object type, and use a Converter that returns the typeof(value) for getting the type

<Style x:Key="MyStyle" TargetType="{x:Type Image}">
    <!-- Default Value -->
    <Setter Property="Source" Value="{StaticResource CompanyIcon}" />

    <Style.Triggers>
        <DataTrigger Binding="{Binding Converter={StaticResource ObjectToTypeConverter}}" 
                     Value="{x:Type local:Employee}">
            <Setter Property="Source" Value="{StaticResource EmployeeIcon}" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Converter={StaticResource ObjectToTypeConverter}}" 
                     Value="{x:Type local:Customer}">
            <Setter Property="Source" Value="{StaticResource CustomerIcon}" />
        </DataTrigger>
    </Style.Triggers>
</Style>

The converter I usually use just looks like this:

public class ObjectToTypeConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        return value.GetType();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

Upvotes: 3

Fede
Fede

Reputation: 44038

What I did was to have a string property in the VM pointing to the image location (don't know if it's the best approach, but it worked quite well for me):

private string _imageSource;
public string ImageSource 
{
   get
   {
     return _imageSource;
   }
   set
   {
      _imageSource = value;
      NotifyPropertyChanged(() => ImageSource);
   }

}

public void SetImage()
{
    If (customer)
        ImageSource = "../Images/companies_32.png";
    ...
}

in XAML:

<Image Source="{Binding ImageSource}" .../>

Upvotes: 0

Related Questions