How to add IsVisible property to all WinRT UI elements

How to add IsVisible property to all WinRT UI elements

During several events, I’ve heard developers complain about the Visibility property of a UIElement cause it’s an enumeration and not a simple boolean.

Well, I understand this request, which can simplify the life of developers by avoiding large numbers of IValueConverter. But first, history!

Why Visibility isn’t a boolean?

This choice is inherited from WPF where a third value exists : ‘Hidden’. Hidden value allows to add the element to the visual tree but not displaying it (equivalent to a Opacity = 0 and Visibility = Visible). To sum up:

  • Visible: Display the element.
  • Hidden: Do not display the element, but reserve space for the element in layout.
  • Collapsed: Do not display the element, and do not reserve space for it in layout.

Having said that, I largely understand this need, being the first to grousing.

Here is a small class that will allow you to do more play with the Visibility property but with a custom attached property of type Boolean named IsVisible.

 

using System;
using Windows.UI.Xaml;

namespace Huyn
{
public class Extension : DependencyObject
{
public static readonly DependencyProperty IsVisibleProperty =
DependencyProperty.RegisterAttached(
"IsVisible",
typeof(bool),
typeof(Extension),
new PropertyMetadata(true,IsVisibleCallback)
);

private static void IsVisibleCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((UIElement) d).Visibility = (bool) e.NewValue ? Visibility.Visible : Visibility.Collapsed;
}

public static void SetIsVisible(UIElement element, bool value)
{
element.SetValue(IsVisibleProperty, value);
}

public static bool GetIsVisible(UIElement element)
{
return (bool)element.GetValue(IsVisibleProperty);
}
}

}

 

And it’s done, you can now use IsVisible on your XAML or your code-behind:

 

<Page
x:Class="IsVisibleSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ext="using:Huyn"
mc:Ignorable="d">

<Rectangle Height="100" Width="100" Fill="Red" x:Name="Rectangle"
ext:Extension.IsVisible="false"/>
</Page>

You can use bindings:

<CheckBox x:Name="MyCheckBox" IsChecked="True" Content="show rectangle"/>
<Rectangle Height="100" Width="100" Fill="Red" x:Name="Rectangle"
ext:Extension.IsVisible="{Binding IsChecked,ElementName=MyCheckBox}"/>

or use IsVisible as the source of a binding

<CheckBox IsChecked="{Binding (ext:Extension.IsVisible),ElementName=Rectangle}"
IsEnabled="False"
Content="rectangle is visible?"/>

One more thing, on code-behind:

var val=Extension.GetIsVisible(Rectangle);
Extension.SetIsVisible(Rectangle,true);

Download the sample here

Click me!

 

License

This work is free. You can redistribute it and/or modify it under the
terms of the Do What The Fuck You Want To Public License, Version 2. See http://www.wtfpl.net/ for more details.

Comments are closed.