Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use BooleanToVisibilityConverter in UWP

Tags:

c#

uwp

In order to make a hamburger button in a UWP application, I try to use BooleanToVisibilityConverter to change the state of the hamburger button, just like RSSReader Example.

The problem is, when I created BooleanToVisibilityConverter.cs in the folder Common and wrote:

using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace UWPTest.Common {
    public class BooleanToVisibilityConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, string language) =>
            (bool)value ^ (parameter as string ?? string.Empty).Equals("Reverse") ?
                Visibility.Visible : Visibility.Collapsed;

        public object ConvertBack(object value, Type targetType, object parameter, string language) =>
            (Visibility)value == Visibility.Visible ^ (parameter as string ?? string.Empty).Equals("Reverse");

    }
}

then import it into MainPage.xaml :

<Page
    x:Class="UWPTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPTest"
    xmlns:common="using:UWPTest.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </Page.Resources>
    <Grid Background="Transparent">
        <ToggleButton x:Name="TogglePaneButton"
            Visibility="{x:Bind ViewModel.IsInDetailsMode, Mode=OneWay, ConverterParameter=Reverse, Converter={StaticResource BooleanToVisibilityConverter}}"
            Margin="0"
            TabIndex="1" 
            Checked="{x:Bind CheckTogglePaneButtonSizeChanged}"
            Unchecked="{x:Bind CheckTogglePaneButtonSizeChanged}"
            IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}"
            AutomationProperties.Name="Menu" ToolTipService.ToolTip="Menu"
            Style="{StaticResource SplitViewTogglePaneButtonStyle}"/>
    </Grid>
</Page>

IntelliSense says The name "BooleanToVisibilityConverter" does not exist in the namespace "using:UWPTest.Common". I can't figure out the reason why the class is not found.

The picture of IntelliSense's words in Chinese:

enter image description here

like image 801
Thesharing Avatar asked Oct 03 '16 12:10

Thesharing


2 Answers

When you add BooleanToVisibilityConverter to resources you set it's Key to boolean:

<common:BooleanToVisibilityConverter x:Key="boolean" />

So binding should looks like:

Converter={StaticResource boolean}

Or you can change Key value to BooleanToVisibilityConverter as it's done in example.

like image 192
Andrey Tretyak Avatar answered Nov 10 '22 19:11

Andrey Tretyak


Acctually you don't need to implement your own converter. Just use the existing one provided by Micorsoft.

Complete list of the UWP converters is here.

XAML example

<Page
    x:Class="YourPageClass"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    xmlns:extensions="using:EtherClient.Extensions"      
    NavigationCacheMode="Enabled" VerticalAlignment="Stretch"
    mc:Ignorable="d"  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <converters:BoolToVisibilityConverter x:Key="MyBooleanToVisibilityConverter"/>
        
 <Border BorderBrush="LightGreen" BorderThickness="1" Visibility="{x:Bind YourBoolPropertyGoesHere, Mode=OneWay, Converter={StaticResource MyBooleanToVisibilityConverter}}" >
                        <FontIcon FontSize="12" Margin="2,0,2,0" FontFamily="Segoe MDL2 Assets"  Foreground="LightGreen" Glyph="&#xf003;"/>
                        
</Border>
...
like image 3
Friend Avatar answered Nov 10 '22 19:11

Friend