Search code examples
c#wpfdatatriggercontentcontrol

ComboBox selection displaying usercontrol content based on defined data trigger style in one row but removing content from another row


I have multiple combo boxes in a view, each on its own row and bound to the same ItemsSource. They have an element name to distinguish them from one another. In my view, under window.resources, I have a list of seven user controls defined as data templates. What I would like to do is when a user selects an item from a combo box, it displays the contents of one of the seven user controls in the column adjacent to the corresponding combo box based on the combo box selection. I have done this using data triggers defined within a ContentControl.style tag. The issue is when I make a selection in one combo box that happens to be the same selection as that of another combo box, the content appears adjacent to the most recent selected combo box, but disappears from the other one.

I have defined a content control with a style and data triggers and I can see that the content is updating correctly as long as I have only one combo box. However, it does not work with more than one combo box. I don't understand how even though I have the DataTrigger Binding elementname set to the name of a specific combo box, making a selection on that combo box affects the content of another row which is tied to a different element name and combo box.

 <Window.Resources>
 <local:OneLayout x:Key="OneLayout" />
 <DataTemplate DataType="{x:Type local:OneLayout}"  >
 </DataTemplate>
 <local:TwoLayout x:Key="TwoLayout" />
 <DataTemplate DataType="{x:Type local:TwoLayout}"  >
 </DataTemplate> 
 ....

<ComboBox x:Name="Layout1" Margin="5" Grid.Row="0" Grid.Column="1" 
    ItemsSource="{Binding LayoutTypes }" DisplayMemberPath="Name"/>
<ContentControl Grid.Row="0" Grid.RowSpan="3" Grid.Column="2">
    <ContentControl.Style>
       <Style TargetType="{ x:Type ContentControl }" >
        <Setter Property="Content" Value=" 
              {StaticResource ResourceKey=OneLayout}" />
           <Style.Triggers>
               <DataTrigger Binding="{Binding 
                   SelectedItem.Layout, ElementName=Layout1}" 
                   Value="One">
                <Setter Property="Content" 
                  Value="{StaticResource ResourceKey=OneLayout}" />
               </DataTrigger>
               <DataTrigger Binding="{Binding 
                   SelectedItem.LayoutType, ElementName=Layout1}" 
                   Value="Two">
                <Setter Property="Content" 
                  Value="{StaticResource ResourceKey=TwoLayout}" />
               </DataTrigger>
               ......                         

<ComboBox x:Name="Layout2" Margin="5" Grid.Row="3" Grid.Column="1" 
         ItemsSource="{Binding LayoutTypes }" DisplayMemberPath="Name"/>
<ContentControl Grid.Row="3" Grid.RowSpan="3" Grid.Column="2" >
    ... //same as content control above except for    
        //ElementName="Layout2"

I expect to have the user control associated with the combo box selection appear adjacent to the combo box that was selected and not to affect the content in other rows.


Solution

  • The answer to this problem was provided by Daisy Tian and can be found here....

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/790c8348-6d9e-4c40-a0f1-8855b773d1c9/contentcontrol-using-datatriggers-usercontrol-content-displays-in-one-row-but-removes-content?forum=wpf#c54413a2-f1e3-4ab2-9bf9-cdd4f15f58c0