none
Using a datatrigger to show/hide an image

    Question

  • Hi!

    I'm trying to use a datatrigger to show and hide an image, but it doesn't work. I have made a small example of what I'm trying to do.

    Window1.xaml
    <Window x:Class="TriggersNotWorking.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Window1" Height="300" Width="300">  
        <Window.Resources> 
            <ResourceDictionary> 
                <ImageSource x:Key="GreenCom">Resources/Gprs_green.png</ImageSource> 
            </ResourceDictionary> 
        </Window.Resources> 
     
        <Grid> 
     
            <ListBox Margin="5" x:Name="_listBoxTransportOrders" Grid.Row="0" ItemsSource="{Binding}">  
                <ListBox.ItemTemplate> 
                    <DataTemplate> 
                        <Grid> 
                            <Grid.ColumnDefinitions> 
                                <ColumnDefinition/> 
                                <ColumnDefinition/> 
                            </Grid.ColumnDefinitions> 
     
     
                            <!-- Column 0 in listbox item --> 
                            <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">  
                                <TextBlock Text="{Binding Path=Name}" /> 
                            </StackPanel> 
     
                            <StackPanel x:Name="TestPanel" Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">  
                                <Image x:Name="testImage" Source="{StaticResource GreenCom}" /> 
                            </StackPanel> 
     
                        </Grid> 
     
                    </DataTemplate> 
     
                </ListBox.ItemTemplate> 
            </ListBox> 
              
        </Grid> 
          
    </Window> 
     

    Window1.xaml.cs
    using System.Collections.Generic;  
    using System.Windows;  
     
    namespace TriggersNotWorking  
    {  
        /// <summary> 
        /// Interaction logic for Window1.xaml  
        /// </summary> 
        public partial class Window1 : Window  
        {  
            public Window1()  
            {  
                InitializeComponent();  
     
                Person p = new Person();  
                p.IsGreen = false;  
                p.Name = "Eirin";  
     
                Person pp = new Person();  
                pp.IsGreen = true;  
                pp.Name = "Christer";  
     
                List<Person> persons = new List<Person>();  
     
                persons.Add(p);  
                persons.Add(pp);  
     
                _listBoxTransportOrders.DataContext = persons;  
            }  
     
        }  
    }  
     

    Person.cs
    namespace TriggersNotWorking  
    {  
        public class Person  
        {  
            public bool IsGreen { get; set; }  
            public string Name { get; set; }  
        }  

    App.xaml
    <Application x:Class="TriggersNotWorking.App" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        StartupUri="Window1.xaml">  
        <Application.Resources> 
     
            <Style x:Key="ListItemStyle" TargetType="{x:Type ListBoxItem}">  
       
                <Setter Property="Template">  
                    <Setter.Value> 
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">  
                            <Border         
                            x:Name="Border"            
                            CornerRadius="17"            
                            Background="#313C9C"          
                            BorderBrush="White"          
                            BorderThickness="1"         
                            Margin="5"         
                            Padding="8"        > 
                                <ContentPresenter  
                                    Name="Content" 
                                    TextBlock.Foreground="White" 
                                    TextBlock.FontSize="12" 
                                    /> 
                            </Border> 
                            <ControlTemplate.Triggers> 
     
     
                                <DataTrigger Binding="{Binding Path=IsGreen}" Value="false">  
                                    <Setter Property="Visibility" TargetName="testImage" Value="Hidden" /> 
                                </DataTrigger> 
                            </ControlTemplate.Triggers> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
     
            <!-- Listbox --> 
            <Style TargetType="{x:Type ListBox}">  
                <Setter Property="Background" Value="MidnightBlue" /> 
                <Setter Property="ItemContainerStyle" Value="{StaticResource ListItemStyle}" /> 
                <Setter Property="Template">  
                    <Setter.Value> 
                        <ControlTemplate TargetType="ListBox">  
                            <ScrollViewer Focusable="false">  
                                <StackPanel Width="200" HorizontalAlignment="Left" IsItemsHost="True" /> 
                            </ScrollViewer> 
                        </ControlTemplate> 
                    </Setter.Value> 
                </Setter> 
            </Style> 
        </Application.Resources> 
    </Application> 
     


    When I try to compile this code it gives me this error message:

    Cannot find the Trigger target 'testImage'. (The target must appear before any Setters, Triggers, or Conditions that use it.)

    Can anyone tell me how I can make testImage available to the datatrigger in App.xaml?

    Thanks!

    Eirin


    Tuesday, September 23, 2008 11:06 AM

Answers

  • Have you tried creating a DataTemplate for Person?

    <DataTemplate DataType="{x:Type local:Person}">  
                    <StackPanel Orientation="Horizontal">  
                        <TextBlock x:Name="textBoxIsGreen" Text="{Binding Path=IsGreen}"/>  
                        <TextBlock Text="{Binding Path=Name}"/>  
                    </StackPanel> 
                    <DataTemplate.Triggers> 
                        <DataTrigger Binding="{Binding Path=IsGreen}" Value="True">  
                            <Setter Property="Visibility" TargetName="textBoxIsGreen" Value="Hidden"/>  
                        </DataTrigger> 
                    </DataTemplate.Triggers> 
                </DataTemplate> 

    I have used a TextBlock instead of an Image, but the concept is the same.
    • Marked as answer by Marco Zhou Thursday, September 25, 2008 8:07 AM
    Tuesday, September 23, 2008 2:18 PM