How to set Visibility of Label which is bound to Textbox?

Question

I have three TEXTBOX which are bound to LABEL. When I type something in TEXTBOX then TextBox text value is set to Label. Problem is i want to set Visiblity of LABEL to COLLAPSED when text box is blank and vice versa. how to do it using Visibility Convert in WPF?

in .XAML file:

<TextBox Name="txtEmail1" Grid.Column="1" Grid.Row="0" Text="Email" HorizontalAlignment="Stretch" Margin="2" VerticalAlignment="Stretch"/>
<TextBox Name="txtEmail2" Grid.Column="1" Grid.Row="0" Text="Email2" Visibility="Collapsed" Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBox Name="txtEmail3" Grid.Column="1" Grid.Row="0" Text="Email3" Visibility="Collapsed" Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>

<Label Name="lblContactEmail1" Content="{Binding Path=Text, ElementName=txtEmail1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Name="lblContactEmail2" Content="{Binding Path=Text, ElementName=txtEmail2, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Label Name="lblContactEmail3" Content="{Binding Path=Text, ElementName=txtEmail3, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

I have Tried as: Using below class StringToVisibilityConverter.cs

<UserControl xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"  x:Class="XtremeProcurementWPF.UserControls.usContactForm"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:cv="clr-namespace:MyWPF"
             mc:Ignorable="d">
<UserControl.Resources>
        <cv:StringToVisibilityConverter x:Key="visibilityconverter" />
    </UserControl.Resources>
<Grid>
<TextBox Name="txtEmail1" Grid.Column="1" Grid.Row="0"  Text="Email" HorizontalAlignment="Stretch" Margin="2" VerticalAlignment="Stretch" />
    <Label Name="lblContactEmail1" Content="{Binding Path=Text, ElementName=txtEmail1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged,Converter={StaticResource visibilityconverter}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</UserControl>

Issue: It displays the Text for LABEL as "Visible" and not the exact text that is entered in textbox.

Help Appreciated! Thanks!

Take a closer look at my example. You are **not** supposed to use the converter for the `Content` attribute, but for the `Visibility` attribute as my example shows. The `Content` should just be left as it was in your original example. — Klaus Byskov Pedersen, Jun 25 '13 at 09:34

Klaus Byskov Pedersen · Accepted Answer · 2013-06-25T09:36:33.120

Create your own implementation of the IValueConverter interface:

public class StringToVisibilityConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var s = value as string;

        if (string.IsNullOrWhiteSpace(s))
            return Visibility.Collapsed;

        return Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now somewhere in your resources you register your converter:

<converters:StringToVisibilityConverter x:Key="StringToVisibilityConverter" />

And finally, you use the converter on the element, like this:

<Label Name="lblContactEmail3" 
Visibility="{Binding Path=Text, ElementName=txtEmail3, Converter={StaticResource StringToVisibilityConverter}}" ... />

EDIT:

Here is the full code for the Label:

<Label Name="lblContactEmail1" Content="{Binding Path=Text, ElementName=txtEmail1, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Visibility="{Binding Path=Text, ElementName=txtEmail1, Converter={StaticResource visibilityconverter}}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>

Sorry @Klaus!but how to use it? i am new to wpf! – SHEKHAR SHETE Jun 25 '13 at 09:01 — SHEKHAR SHETE, Jun 25 '13 at 09:01

JeffRSon · Answer 2 · 2013-06-25T09:20:49.917

You may use a DataTrigger like this:

   <StackPanel>
      <StackPanel.Resources>
         <Style TargetType="{x:Type Label}">
            <Style.Triggers>
               <DataTrigger Binding="{Binding ElementName=txtEmail1, Path=Text}" Value="">
                  <Setter Property="Visibility" Value="Collapsed"/>
               </DataTrigger>
            </Style.Triggers>
         </Style>
      </StackPanel.Resources>

      <TextBox Name="txtEmail1" Text="Email" />
      <Label Name="lblContactEmail1" Background="Yellow" Content="{Binding Path=Text, ElementName=txtEmail1}" />
   </StackPanel>

No need for additional classes in this XAML only solution. Of course you have to adapt it to your needs (e.g. bindings). I omitted the unnecessary properties.

How to set Visibility of Label which is bound to Textbox?

2 Answers2

Linked

Related