none
ComboBox DataTemplate

    Question

  • Hi all,

    I have a ComboBox with has DataTamplate for displaying business object, as the following :

    <ComboBox SelectionChanged="comboFromLocations_SelectionChanged" ItemsSource="{Binding}" DataContext="{Binding Path=SelectedItem}" SelectedValuePath="id" IsSynchronizedWithCurrentItem="True">
     <ComboBox.ItemTemplate>
            <DataTemplate>
                <WrapPanel  Orientation="Horizontal">
                    <Image Width="16" Height="16" Source="{Binding Path=ImageURL}"/>
                    <TextBlock Text="{Binding Path=screenName}" Padding="10,0,0,0"/>
                    <Image  Source="{Binding Path=Image2URL}"HorizontalAlignment="Center" VerticalAlignment="Center"  Margin="0,0,0,0" Stretch="None" Visibility="Collapsed"/>
                </WrapPanel>
            <DataTemplate>
    </ComboBox.ItemTemplate>
    </ComboBox>

    I need to set the datatemplate programatically , for example change the viability for the second image to visable for some of the items in the combobox.
    Because my combobox is bounded to a collection of objects,when i use the Items collecyion I find it is an object, but I need the DataTemplate object.

    Please help...

    Friday, February 20, 2009 1:47 PM

Answers

  • What you could do is having a bool property in your items called "HasError". Then, you add this triggers to the template:

     <ComboBox.ItemTemplate> 
            <DataTemplate> 
                <WrapPanel x:Name="comboItemPanel" Orientation="Horizontal"
                    <Image x:Name="firstImg" Width="16" Height="16" Source="{Binding Path=ImageURL}"/> 
                    <TextBlock Text="{Binding Path=screenName}" Padding="10,0,0,0"/> 
                    <Image x:Name="secondImg" Source="{Binding Path=Image2URL}" HorizontalAlignment="Center" VerticalAlignment="Center"  Margin="0,0,0,0" Stretch="None" Visibility="Collapsed"/> 
                </WrapPanel> 
                <DataTemplate.Triggers> 
                    <Trigger Property="HasError" Value="True"
                        <Setter Property="Background" TargetName="comboItemPanel" Value="Red"/> 
                        <Setter Property="Visibility" TargetName="firstImg" Value="Collapsed"/> 
                        <Setter Property="Visibility" TargetName="secondImg" Value="Visible"/> 
                    </Trigger> 
                </DataTemplate.Triggers> 
            <DataTemplate> 
     </ComboBox.ItemTemplate> 
     

    Of course, you need to implement INotifyPropertyChanged on your class and raise the propertyChanged event for the new property.

    Hope this helps,
    -Sergi Díaz


    Friday, February 20, 2009 4:03 PM

All replies

  • Do you have different types in the collection? If so, you can define a additional DataTemplete for the other type. You can also look at the DataTempleteSelector class.
    Friday, February 20, 2009 2:20 PM
  • Or you can bind the Visibility property of the second image to something in the item that tells whether it must be visible.
    Friday, February 20, 2009 2:27 PM
  • I thought about the binding solution , but I need to change the background property if the WrapPanel in the DataTemplate. Is there a quick solution to dothat.

    Thanks...
    Friday, February 20, 2009 2:46 PM
  • You can bind to the background property too. Or define it differently in a trigger. It depends on your needs, I'm sure that if you tell us some more info on the conditions that produce different looks we can help you.
    Friday, February 20, 2009 3:07 PM
  • OK,

    My case is as the following :

    I have a ComboBox with items looks like the DataTemplate I wrote above. The normal appearnce of the Items is the first image and the test.
    When an error occured , I have to put a graphics indication on the combo that an error occured, So if the error occured , I have to set the background of each item has this error to red , and visiable the second image , so users when open the combo can see the items that has errors in their source object.

    Hope my explanation is obviouse.

    Thanks...
    Friday, February 20, 2009 3:22 PM
  • What you could do is having a bool property in your items called "HasError". Then, you add this triggers to the template:

     <ComboBox.ItemTemplate> 
            <DataTemplate> 
                <WrapPanel x:Name="comboItemPanel" Orientation="Horizontal"
                    <Image x:Name="firstImg" Width="16" Height="16" Source="{Binding Path=ImageURL}"/> 
                    <TextBlock Text="{Binding Path=screenName}" Padding="10,0,0,0"/> 
                    <Image x:Name="secondImg" Source="{Binding Path=Image2URL}" HorizontalAlignment="Center" VerticalAlignment="Center"  Margin="0,0,0,0" Stretch="None" Visibility="Collapsed"/> 
                </WrapPanel> 
                <DataTemplate.Triggers> 
                    <Trigger Property="HasError" Value="True"
                        <Setter Property="Background" TargetName="comboItemPanel" Value="Red"/> 
                        <Setter Property="Visibility" TargetName="firstImg" Value="Collapsed"/> 
                        <Setter Property="Visibility" TargetName="secondImg" Value="Visible"/> 
                    </Trigger> 
                </DataTemplate.Triggers> 
            <DataTemplate> 
     </ComboBox.ItemTemplate> 
     

    Of course, you need to implement INotifyPropertyChanged on your class and raise the propertyChanged event for the new property.

    Hope this helps,
    -Sergi Díaz


    Friday, February 20, 2009 4:03 PM