CODEWITHSUNDEEP
c#wpfxamluser-controls
Phu Minh Pham
Phu Minh Pham

Reputation: 1055

How to set visibility to collapsed on image when one is visible

I have four images in XAML:

<Image Visibility="Collapsed" Name="LeftArrow" Height="20" Width="20"></Image>
<Image Visibility="Collapsed" Name="RightArrow" Height="20" Width="20"></Image>
<Image Visibility="Collapsed" Name="TopArrow" Height="20" Width="20"></Image>
<Image Visibility="Collapsed" Name="BottomArrow" Height="20" Width="20"></Image>

And in my code-behind I've a switch case that makes all the other images collapsed when one of them is visible like this:

switch (ElementInfoCollection[pos].ArrowDirection)
{
    case ArrowDirection.Left:
        LeftArrow.Visibility = Visibility.Visible;
        RightArrow.Visibility = Visibility.Collapsed;
        TopArrow.Visibility = Visibility.Collapsed;
        BottomArrow.Visibility = Visibility.Collapsed;
        break;
    case ArrowDirection.Right:
        LeftArrow.Visibility = Visibility.Collapsed;
        RightArrow.Visibility = Visibility.Visible;
        TopArrow.Visibility = Visibility.Collapsed;
        BottomArrow.Visibility = Visibility.Collapsed;
        break;
    case ArrowDirection.Top:
        LeftArrow.Visibility = Visibility.Collapsed;
        RightArrow.Visibility = Visibility.Collapsed;
        TopArrow.Visibility = Visibility.Visible;
        BottomArrow.Visibility = Visibility.Collapsed;
        break;
    case ArrowDirection.Bottom:
        LeftArrow.Visibility = Visibility.Collapsed;
        RightArrow.Visibility = Visibility.Collapsed;
        TopArrow.Visibility = Visibility.Collapsed;
        BottomArrow.Visibility = Visibility.Visible;
        break;
    default:
        LeftArrow.Visibility = Visibility.Collapsed;
        RightArrow.Visibility = Visibility.Collapsed;
        TopArrow.Visibility = Visibility.Collapsed;
        BottomArrow.Visibility = Visibility.Collapsed;
        break;
}

Obviously this is quite a dumb way to do it so I would like to know how I can make the images collapsed when one of them is set to visible in the code-behind? This is what i've come up with so far:

<UserControl.Resources>
    <Style x:Key="ArrowSwitch" TargetType="{x:Type Image}">
        <Style.Triggers>
            <DataTrigger >
                <Setter Property="Image.Visibility" Value="Collapsed"></Setter>
            </DataTrigger>
            <DataTrigger>
                <Setter Property="Image.Visibility" Value="Visible"></Setter>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

Upvotes: 0

Views: 2439

Answers (2)

Nico Schertler
Nico Schertler

Reputation: 32667

If you want to use data binding, you can utilize a converter that maps the ArrowDirection to a Visibility value:

public class DirectionVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        ArrowDirection target;
        ArrowDirection current;
        try
        {
            current = (ArrowDirection)value;
        }
        catch (Exception)
        {
            return null;
        }
        if (Enum.TryParse(parameter.ToString(), out target))
        {
            if (current == target)
                return Visibility.Visible;
            else
                return Visibility.Collapsed;
        }
        return null;
    }

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

And use it in XAML like:

<Window.Resources>
    <local:DirectionVisibilityConverter x:Key="VisibilityConverter"/>
</Window.Resources>
....
<Image Visibility="{Binding ArrowDirection, Converter={StaticResource VisibilityConverter}, ConverterParameter=Left}" .../>

where ArrowDirection specifies the binding path for the ElementInfoCollection[pos].ArrowDirection. If it implements INotifyPropertyChanged, you just need to set this value to the correct direction and the visibilities will be updated.

Upvotes: 1

Abbas
Abbas

Reputation: 14432

This is the same code but much shorter:

switch (ElementInfoCollection[pos].ArrowDirection)
{
    LeftArrow.Visibility = Visibility.Collapsed;
    RightArrow.Visibility = Visibility.Collapsed;
    TopArrow.Visibility = Visibility.Collapsed;
    BottomArrow.Visibility = Visibility.Collapsed;

    case ArrowDirection.Left: LeftArrow.Visibility = Visibility.Visible; break;
    case ArrowDirection.Right: RightArrow.Visibility = Visibility.Visible; break;
    case ArrowDirection.Top: TopArrow.Visibility = Visibility.Visible; break;
    case ArrowDirection.Bottom: BottomArrow.Visibility = Visibility.Visible; break;
    default: break;
}

Upvotes: 3

Related Questions