WPF ListBox binding with conditional display

Question

I have a WPF ListBox that I am binding to a collection of Contact objects, similar to

public class Contact
{
    int ContactId { get; set; }
    int ContactType { get; set; }   // 1 = phone number, 2 = email address
    string Value { get; set; }
}

My current ListBox binding is

<ListBox Name="ContactsListBox"
    ItemsSource="{Binding Contacts, Mode=Oneway}"
    SelectedValuePath="ContactId"
    DisplayMemberPath="Value"
</ListBox>

I would like to display the phone numbers as text and emails as clickable "mailto:" type hyperlinks, but I'm unclear on how to get the binding to work the way I need.

Alex · Accepted Answer · 2016-12-14 16:49:01Z

What you need is conditional binding for your ListBox.

First you define two DateTemplates each for one contact type:

<ListBox.Resources>
    <DataTemplate x:Key="PhoneTemplate">
        <TextBlock Text="{Binding Value}" />
    </DataTemplate>
    <DataTemplate x:Key="MailTemplate">
        <TextBlock>
            <Hyperlink NavigateUri="{Binding Value}">
                <TextBlock Text="{Binding Value}" />
            </Hyperlink>
        </TextBlock>
    </DataTemplate>
</ListBox.Resources>

And then you define ItemTemplate with DataTrigger bounded to ContactType property:

<ListBox.ItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ContactType}" Value="1">
                            <Setter Property="ContentTemplate" Value="{StaticResource PhoneTemplate}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding ContactType}" Value="2">
                            <Setter Property="ContentTemplate" Value="{StaticResource MailTemplate}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
</ListBox.ItemTemplate>

Remember to remove DisplayMemberPath from your ListBox because you cannot use it if you set ItemTemplate.

leapold · Accepted Answer · 2016-12-14 16:15:07Z

1

You need to write your ItemTemplate for ListBox.

<Window.Resources>
<DataTemplate  x:Key="MyTemplate">

     <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Value }"></TextBlock>
            <TextBlock>           
                <Hyperlink NavigateUri="{Binding YourString}" RequestNavigate="OnNavigate">Click here</Hyperlink>
            </TextBlock>
     </StackPanel>

<ListBox Name="ContactsListBox"
         ItemsSource="{Binding Contacts}"
         ItemTemplate="{StaticResource MyTemplate}"
</ListBox>

edited Dec 14, 2016 at 16:15

answered Dec 14, 2016 at 15:48

leapold

1431 silver badge10 bronze badges

1 Comment

leapold Over a year ago

How to navigate:stackoverflow.com/questions/23020377/…

Community · Accepted Answer · 2017-05-23 10:30:42Z

Define an ItemTemplate with a DataTrigger that binds to the ContactType property:

<ListBox Name="ContactsListBox" ItemsSource="{Binding Contacts, Mode=Oneway}" SelectedValuePath="ContactId">
<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid>
            <TextBlock x:Name="phone" Text="{Binding Value}" />
            <TextBlock x:Name="email" Visibility="Collapsed">
                        <Hyperlink NavigateUri="{Binding Value}">
                            <Run Text="{Binding Value}" />
                        </Hyperlink>
            </TextBlock>
        </Grid>
        <DataTemplate.Triggers>
            <DataTrigger Binding="{Binding ContactType}" Value="2">
                <Setter TargetName="email" Property="Visibility" Value="Visible" />
            </DataTrigger>
        </DataTemplate.Triggers>
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

If you want the link to be opened in a web browser you should handle the RequestNavigate event of the Hyperlink as suggested here: Example using Hyperlink in WPF.

Also make sure that you define your properties as public:

public class Contact
{
    public int ContactId { get; set; }
    public int ContactType { get; set; }  // 1 = phone number, 2 = email address
    public string Value { get; set; }
}

Collectives™ on Stack Overflow

WPF ListBox binding with conditional display

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related