Binding one ElementUI in XAML to 2 source

Question

  <ListBox>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Textblock Text={Binding Path=Content} Foreground={Binding Path=TextColor}/>
            </DataTemplate>
        <ListBox.ItemTemplate>
    </ListBox>

Hi, I'm developing a book reader application in WP8. I have a stoy with a list of paragraph which I use ListBox to display. Each paragraph content is binding to a textblock as you can see in my code. In Paragraph class, I define a field call TextColor to bind the foreground color of textblock to it. Now, each time user change the color, I have to loop through all paragraph in story and change the value of TextColor. Is there any way to separately bind 2 different property (ie. the Foreground and the Text) of a ListboxItem to different source> So I'll only have to change the Foreground one time. Thank

Answer 1

KooKiz solution is pretty good. However, if you don't want to include any properties to manage foreground colors, or any visual property for that matter, at all you can simply make it a static resource and bind to that instead where you can modify them independently of your model.

For example, you could define a ForegroundResouces class and add in different types of foregrounds your app needs.

In App.xaml

<Application.Resources>
  <local:ForegroundResouces xmlns:local="clr-namespace:YOUR-NAMESPACE" x:Key="ForegroundResouces" />
</Application.Resources>

Then define your class

public class ForegroundResouces {
  public static Brush TitleForeground { get; set; }
  public static Brush ContentForeground { get; set; }
  // ...
}

Then define your binding

<ListBox>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <Textblock 
        Text={Binding Path=Content} 
        Foreground={Binding Path=ContentForeground, Source={StaticResource ForegroundResouces} />
    </DataTemplate>
  <ListBox.ItemTemplate>
</ListBox>

Then you can simply change the foreground by modifying your static properties

ForegroundResources.ContentForeground = new SolidBrush(Colors.Red);

You could sort of make different set of themes but this solution is probably only worth it if you have more than one visual property to manage.

Answer 2

There is ways to specify a different source for your bindings. For instance, you can use ElementName to point at your listbox and retrieve its datacontext:

<ListBox x:Name="MyList" ItemsSource="{Binding Path=Paragraphs}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Textblock Text="{Binding Path=Content}" Foreground="{Binding Path=DataContext.TextColor, ElementName=MyList}"/>
        </DataTemplate>
    <ListBox.ItemTemplate>
</ListBox>

But in your case, it's probably easier to just set the Foreground property on the parent list. It will be automatically applies to all child controls:

<ListBox x:Name="MyList" ItemsSource="{Binding Path=Paragraphs}" Foreground="{Binding Path=TextColor}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Textblock Text="{Binding Path=Content}" />
        </DataTemplate>
    <ListBox.ItemTemplate>
</ListBox>