将图片显示为隐藏或可见

Question

Goal:
When user start typing text or characters in the textbox txtSearch the picture picEnlarger will be hidden and be replaced by picture picXmark. In default, the picEnlarger will always display until input data will be applied in the textbox txtSearch. In order word, no data in textbox then display picEnlarger and hide picXmark.

Problem:
Having problem to display the picture picXmark and hide the picture picEnlarger when the user start typing characters in the textbox named txtSearch.

When I tried coding in C# to gain this functionality no effect would occur in the run time.

I tried using the code:

picEnlarger = new Image();  
picXmark = new Image();

But no effect has happened.

---

XAML code from Stock.xaml:

<Canvas Height="39.667" Margin="8,0,215.397,0" VerticalAlignment="Top">
    <Button x:Name="btnNewProduct" Content="New" Width="75" Click="btnNewProduct_Click" Height="20.277" RenderTransformOrigin="0.667,1.726" d:LayoutOverrides="VerticalAlignment, Margin" Canvas.Left="0.001" Canvas.Top="18.723" />
    <Button x:Name="btnAddDelivery" Content="Add quantity" Width="75" Click="btnAddDelivery_Click" d:LayoutOverrides="VerticalAlignment, Margin" Height="20.277" Canvas.Left="79.001" Canvas.Top="18.723" />
    <Button x:Name="btnDeleteProduct" Content="Delete" Width="75" RenderTransformOrigin="0.107,1.843" Click="btnDeleteProduct_Click" Height="20.277" Canvas.Left="158.001" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment, Width" Canvas.Top="18.723" />
    <Button x:Name="btnEdit" Content="Edit" Canvas.Left="237.001" Width="75" Canvas.Top="18.723" Click="btnEdit_Click" />
    <TextBox Name="txtSearch" Canvas.Left="391.36" TextWrapping="Wrap" Canvas.Top="18.723" Width="143.243" TextChanged="txtSearch_TextChanged" Text=" Search article" PreviewMouseLeftButtonDown="txtSearch_PreviewMouseLeftButtonDown" TextInput="txtSearch_TextInput">            
        </TextBox>

        <Label Content="Advanced Search" HorizontalAlignment="Left" Canvas.Left="444.289"/>
        <Image x:Name="picXmark" Height="8" Source="/MediaStore;component/Bilder/search_xmark.gif" Stretch="Fill" Width="8" Canvas.Left="519.853" Canvas.Top="24.167" Visibility="Hidden" />
    <Image x:Name="picEnlarger" Height="14" Canvas.Left="513.75" Source="/MediaStore;component/Bilder/search_enlarger2.gif" Stretch="Fill" Canvas.Top="21.527" Width="14" Visibility="Hidden" ImageFailed="picEnlarger_ImageFailed" />

</Canvas>

---

Class Stock

private void txtSearch_TextChanged(object sender, TextChangedEventArgs e)
{

    picEnlarger = new Image();
    picXmark = new Image();

    if (txtSearch.Text != "")
    {


        picEnlarger.Visibility = Visibility.Collapsed;
        picXmark.Visibility = Visibility.Visible;



        RegularSearch myRegularSearch = new RegularSearch();

        myRegularSearch.Test(txtSearch.Text);

    }
    else
    {
        picEnlarger.Visibility = Visibility.Visible;
        picXmark.Visibility = Visibility.Hidden;                
    }

}


    private void txtSearch_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        txtSearch.Text = "";
    }

Answer 1

In theory you should be able to just use triggers for that, eg

<TextBox Name="txtSearch" />
<Image Name="ImageOne">
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Visibility" Value="Visible" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Text, ElementName=txtSearch}"
                             Value="">
                    <Setter Property="Visibility" Value="Hidden" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>
<Image Name="ImageOne">
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Visibility" Value="Hidden" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Text, ElementName=txtSearch}"
                             Value="">
                    <Setter Property="Visibility" Value="Visible" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

When text is entered one image will become visible while the other one will be hidden.