How to hide an element when it's on the phone?

Question

The idea is this, you are creating a WinRT-XAML Universal App in Visual Studio 2013 Update 2 for Windows 8.1-Update and Windows Phone 8.1. You are sharing the same XAML view between the phone and tablet platforms. You are using the converged CommandBar control to show buttons to your user. In your Windows App you have 5 Primary buttons, but the Windows Phone UI only supports 4. When you run your app in Windows Phone you realize the 5th button is removed, but it removes the end button and the middle button is the one you want to have removed. You don't want to reorder your buttons. What are your options to cause one UIElement to be hidden on Phone but visible on the tablet?

Answer 1

You can handle this a lot of ways. If you want a reliable and reusable approach you can use a converter on the visibility of the button you want to hide. The XAML would be something like this:

<Page.Resources>
    <Converters:HiddenWhenPhoneConverter x:Name="HidePhone" />
</Page.Resources>
<Button Visibility="{Binding, Converter={StaticResource PhoneHide}}" />

Then you would have a converter something like this:

public class HiddenWhenPhoneConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
#if WINDOWS_PHONE_APP
        return Visibility.Collapsed;
#else
        return Visibility.Visible;
#endif
    }
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

public class VisibleWhenPhoneConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
#if WINDOWS_PHONE_APP
        return Visibility.Visible;
#else
        return Visibility.Collapsed;
#endif
    }
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    { throw new NotImplementedException(); }
}

Remember: from a performance point of view, this will only execute when the view is loaded. So, it should be a minimal impact and give you the results you want. There's one more thing. If you have not set the Button or the Button's parent's DataContext with some value, the converter will not fire. You can solve this by setting DataContext="{x:Null}" on the Button or its parent. But, in most cases you are using MVVMand have already set the DataContext so this is moot.