Change border color using a DataTrigger inside listview

Question

3.29/5 (3 votes)

See more:

First I add a border and tried to change the border color according a value.

<Border Height="49" Margin="11,0,0,48" Name="border1" VerticalAlignment="Bottom" Style="{StaticResource changeBorder}" HorizontalAlignment="Left" Width="121" />

XML

<Style TargetType="Border" x:Key="changeBorder">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="4" />
        <Style.Triggers >
            <DataTrigger Binding="{Binding Path=DisplayText}" Value="True">
                <Setter Property="BorderBrush" Value="Black" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

It worked fine it change the color according to the value of Displaytext.

then I add a listview and add a border to listview items and use the same style to change the border color. But Its not working

XML

<ListView Margin="167,56,70,39" ItemsSource="{Binding List}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Border Style="{StaticResource changeBorder}" >
                            <TextBlock Text="Binding List"/>
                        </Border>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

XML

<Style TargetType="Border" x:Key="changeBorder">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="4" />
        <Style.Triggers >
            <DataTrigger Binding="{Binding Path=DisplayText}" Value="True">
                <Setter Property="BorderBrush" Value="Black" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

Can someone ple tell we whats wrong with this. I want to change the border color of items in the listview at runtime.

Thanks

Posted 30-Apr-13 3:05am

Dhanushka Madushan lk

Add a Solution

Comments

stibee 30-Apr-13 15:16pm

<textblock text="Binding List"> ?
Please can you show your "List" class? Does the list element has a "DisplayText" property?
Do you have any binding errors in output window?

2 solutions

Solution 1

Probably need to do a TemplateBinding in the following:

XML

<Style TargetType="Border" x:Key="changeBorder">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="4" />
        <Style.Triggers >
            <DataTrigger Binding="{TemplateBinding Path=DisplayText}" Value="True">
                <Setter Property="BorderBrush" Value="Black" />
            </DataTrigger>

        </Style.Triggers>
    </Style>

However, I am not sure. Your code seems a bit strange.

Posted 1-May-13 10:34am

Clifford Nelson

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Shmuel Zang · Accepted Answer · 2013-05-01T19:03:00

It seems like in the first case, the DataContext of your Border is the class that contains the DisplayText property. But, in the second case the DataContext of your Border is the list's item (and it doesn't contain the DisplayText property).

Try to bind your DataTrigger to the DisplayText property of the DataContext of the ListView ancestor. Something like:

XML

<Style TargetType="Border" x:Key="changeBorder">
        <Setter Property="BorderBrush" Value="Green" />
        <Setter Property="BorderThickness" Value="4" />
        <Style.Triggers >
            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}, Path=DataContext.DisplayText}"
                         Value="True">
                <Setter Property="BorderBrush" Value="Black" />
            </DataTrigger>
 
        </Style.Triggers>
</Style>