ToggleButtons in ItemsControl bound to an ObservableCollection

First of all i want to excuse my English.

What i want to achieve looks very simple but i'm a bit lost in the implementation.

Background: I have an ObservableCollection of Contacts. these contacts all have 1 or more ContactRoles. I bind the contacts to the itemssource of an ItemsControl and want a ToggleButton for every role in the contact to be displayed.

Question: My first question is how can i go from a list of contacts with roles to a lot of ToggleButtons on screen. The second question i have is If i click one ToggleButton all other buttons that have the same contact need to be checked as well. If i click another togglebutton which belong to another contact all checked buttons needs to be unchecked and the buttons belonging to the new contact needs to be checked.

What do i have now: What i have now is an itemscontrol in an itemscontrol and the internal itemscontrol it's itemtemplate is printing the ToggleButtons look an the code below:

<Button Content="Add" Width="72" Height="27" Command="{Binding Path=AddContact}" VerticalAlignment="Top"/>
            <ItemsControl ItemsSource="{Binding Path=Contacts}" IsTabStop="False" Name="Parent">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel  />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                    开发者_JS百科    <ItemsControl ItemsSource="{Binding ContactRoles}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel  />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <ToggleButton Content="{Binding}" CommandParameter="{Binding ElementName=Parent, Path=DataContext.Item}" Template="{StaticResource toggleButtonTemplateButtonBar}"
                                      Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ViewContact}" Height="27" MinWidth="100">

                                    </ToggleButton>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

This part of the code is showing. I hope someone can help me with this.

Some other questions i have is Do i need to make a Custom Control that inherits from ItemsControl or can this be done by templates and styles?

I you need more information let me know.

Thanks, Jordy

EDIT:

I'm sorry i was not so clear with formulating my questions. to come back on you comment. The ItemsSource of the first ItemsControl hold a list with unique contacts, the ItemsSource of the second hold a list of strings (roles) that belong to this contact. I want to show an ToggleButton for each role of all contacts. But i think you've guested that from my codeexample.

This image will show what i'm trying to do. I hope this makes thing more clear.

As Snowbear said please provide more inputs... From your questions I see ...

My first question is how can i go from a list of contacts with roles to a lot of ToggleButtons on screen.

What do you mean by GO? Are you asking that how are Contacts or Contact.Roles tranformed into ToggleButtons? Then that is what your ItemTemplate is doing. If you are asking that you want some property or data from Contact object to be held by the toggle button then you have already used Binding in your ItemTemplate.

        <ToggleButton Content="{Binding}" Tag="{Binding Roles}">
        </ToggleButton>

In the above example, Tag which is one of the non-visual properties of FrameworkElements in WPF, is bound to the list of Roles from the corresponding Contact object.

The second question i have is If i click one ToggleButton all other buttons that have the same contact need to be checked as well.

Are you saying that in your list of Contacts some Contact object is added multiple times in the list? If so that is a bad design and may cause blunders while using ItemsSource. If no, then this statement of yours all other buttons that have the **same contact** is confusing. Do you mean that you have Contacts which may repeat but they are not the same object by reference. Probably they share by some identifying value e.g. they have same Contact.Name or Contact.ID etc.

If some identifying value of contact is what is same among different contact objects then you will have to intelligently use the SelectedValue binding.

If i click another togglebutton which belong to another contact all checked buttons needs to be unchecked and the buttons belonging to the new contact needs to be checked.

Again this is possible once you decide what are you really trying to do i.e. are you adding same Contact object multiple time or you have different Contact objects having some value common.

Do i need to make a Custom Control that inherits from ItemsControl or can this be done by templates and styles?

in WPF, ANYTHING can be achieved using common templates and styles. They definitely eliminate need for creating a custom control for various visually similar looking controls.

BUT if you control has a behavior or functionality that you need to perform exactly the same in multiple places and you want it sealed and to limit itself performing that specific function, then creating a custom control makes sense.

So please rephrase your question and provide clearer inputs.