CODEWITHSUNDEEP
c#xamlwin-universal-app
Bart Calixto
Bart Calixto

Reputation: 19725

How to bind visibility to Frame.CanGoForward

I'm new to xaml or wpf and I'm trying Windows 10 Universal App.

What I want to do is simple.

I found there's a property of Frame called CanGoForward. I want to make a button visible if that property is true and collapse if it's false.

I created a converter like this :

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (parameter != null && parameter.ToString() == "Collapsed")
            return Visibility.Collapsed;
        if (parameter != null && parameter.ToString() == "invert") value = !((bool)value);
        return (value is bool && (bool)value) ? Visibility.Visible : Visibility.Collapsed;

    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        if (parameter != null && parameter.ToString() == "Collapsed")
            return false;
        var result = value is Visibility && (Visibility)value == Visibility.Visible;
        if (parameter != null && parameter.ToString() == "invert") result = !result;

        return result;

    }
}

defined on page resources like :

<Page.Resources>
    <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Page.Resources>

and the xaml for the button is :

<Button x:Name="button" 
                Visibility="{Binding CanGoForward, Converter={StaticResource BooleanToVisibilityConverter}}"
                Content="Button" HorizontalAlignment="Left" Margin="59,142,0,0" VerticalAlignment="Top" Click="button_Click" />

But this does nothing, the button is always visible. This is my first time with xaml so I'm sure I'm doing some weird stuff and some concepts are missing.

If there's (maybe there isn't yet) some guidance/tutorial/introduction into Windows 10 Universal App programming you can point me to, that would be really welcome.

Already seen/read some tutorials about wpf on the web and on pluralsight but I found them different from Windows 10 UAP, I need something that explains the very basics.

Upvotes: 0

Views: 260

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21919

The Button's DataContext probably isn't the Frame, so you're binding to CanGoForward on some unknown (from the snippet) object. Your code looks like it should work if you set the DataContext to a control with a proper CanGoForward property.

That said, the typical way to do this would be to bind to a Command rather than managing the visibility directly. This is demonstrated for a back button in the Xaml UI Basics sample at https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_xamluibasics (the Windows 8.1 version of this code is generated with the Basic Page template and are included by default in the Grid App and Split App templates). The GoForewardCommand is defined in the Common/NavigationHelper.cs file and uses Common/RelayCommand.cs

<Button x:Name="forwardButton" Height="48" Width="48" FontSize="20" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" 
        Style="{StaticResource ForwardButtonStyle}" 
        Command="{x:Bind GoForwardCommand}" 
        AutomationProperties.Name="Forward" 
        AutomationProperties.AutomationId="ForwardButton" 
        AutomationProperties.ItemType="Navigation Button" 
/>

The default dims the back button when it is Disabled by the GoBackCommand returning false from CanExecute, but you can change that in your ForwardButtonStyle (copy from BackButtonStyle in app.xaml) by setting the Opacity in the Disabled state. Setting Opacity is a bit more efficient than collapsing the element, but you could do that instead. Opacity can also be animated.

<VisualState x:Name="Disabled">
    <VisualState.Setters>
        <Setter Target="ContentPresenter.Opacity" Value="0.0" />
    </VisualState.Setters>
</VisualState>

Upvotes: 1

Related Questions