none
ContentControl using DataTriggers - UserControl content displays in one row, but removes content from another row RRS feed

  • Question

  • 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 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 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.

    Any suggestions would be greatly appreciated.  Thanks!


    • Edited by KSR14 Tuesday, September 17, 2019 10:18 PM
    Tuesday, September 17, 2019 9:20 PM

Answers

  • Hi KSR14,

    It's strange why a UserControl with the same key can't appear on the page at the same time, provide a workaround for you by adding the following code under your Windows.Resource

            <local:OneLayout x:Key="OneLayout2" />

            <local:TwoLayout x:Key="TwoLayout2" />

            <local:ThreeLayout x:Key="ThreeLayout2" />

    And updating your second ContentControl like this:

    <ContentControl Grid.Row="3" Grid.RowSpan="3" Grid.Column="2" x:Name="layout2">

                <ContentControl.Style>

                    <Style TargetType="{ x:Type ContentControl }" >

                        <Setter Property="Content" Value="{DynamicResource ResourceKey=OneLayout}" />

                        <Style.Triggers>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="One">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=OneLayout2}" />

                            </DataTrigger>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="Two">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=TwoLayout2}" />

                            </DataTrigger>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="Three">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=ThreeLayout2}" />

                            </DataTrigger>

                        </Style.Triggers>

                    </Style>

                </ContentControl.Style>

            </ContentControl>

    So there's no interaction result:

    Best regards

    Daisy Tian


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by KSR14 Thursday, September 19, 2019 3:53 PM
    Thursday, September 19, 2019 9:33 AM

All replies

  • Hi KSR14,

    >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.

    Do you set any style for Combo box in the ResourceDictionary without x:key? What the type of your LayoutTypes? Based on the code you provided, it is difficult for me to reproduce what you said about content appearing and disappearing. Could you provide me a simple small sample which can run and reproduce to analyze?

    >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

    How does the user control associate with the combo box? Could you give a more detailed description about the requirement?

    Best regards

    Daisy  Tian


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, September 18, 2019 8:06 AM
  • Hello Daisy,

    Thanks for the reply!  I have created a test application.  You can find it here....

    https://github.com/krazak/WPF-TestApplication

    To reproduce.... Start up the application and for the input source combo boxes select "Two" for both rows and observe that the first row initially displays a user control, but after selecting "Two" from the second combo box, the user control disappears from the first row and appears in the second row.  If you make two different combo box selections, then both user controls show up.

    Thanks.

    Wednesday, September 18, 2019 4:09 PM
  • Hi KSR14,

    It's strange why a UserControl with the same key can't appear on the page at the same time, provide a workaround for you by adding the following code under your Windows.Resource

            <local:OneLayout x:Key="OneLayout2" />

            <local:TwoLayout x:Key="TwoLayout2" />

            <local:ThreeLayout x:Key="ThreeLayout2" />

    And updating your second ContentControl like this:

    <ContentControl Grid.Row="3" Grid.RowSpan="3" Grid.Column="2" x:Name="layout2">

                <ContentControl.Style>

                    <Style TargetType="{ x:Type ContentControl }" >

                        <Setter Property="Content" Value="{DynamicResource ResourceKey=OneLayout}" />

                        <Style.Triggers>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="One">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=OneLayout2}" />

                            </DataTrigger>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="Two">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=TwoLayout2}" />

                            </DataTrigger>

                            <DataTrigger Binding="{Binding SelectedItem.LayoutType, ElementName=Layout2}" Value="Three">

                                <Setter Property="Content" Value="{DynamicResource ResourceKey=ThreeLayout2}" />

                            </DataTrigger>

                        </Style.Triggers>

                    </Style>

                </ContentControl.Style>

            </ContentControl>

    So there's no interaction result:

    Best regards

    Daisy Tian


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by KSR14 Thursday, September 19, 2019 3:53 PM
    Thursday, September 19, 2019 9:33 AM
  • Hello Daisy,

    Thank you very much. 

    I guess it's just an inconvenience that I'll have to add as many keys as there are combo boxes (in my case 16) on the page, but for now I will stick with it. 

    Thanks again.

    Thursday, September 19, 2019 4:02 PM