데이터 바인딩을 사용해 UI와 UI를 연결한다 그 2 BooleanToVisibilityConverter편

토글 버튼을 사용하여 UI의 표시 상태를 전환해 본다.
대부분의 UI는 Visibility라는 속성으로 관리됩니다.Visible , Collapsed 의 두 가지 상태를 취한다.

한편으로 토글 버튼을 클릭하면 IsChecked 라는 프로퍼티의 상태가 True , False이것을 그대로 x:Bind 하려고 하면 컴파일러에 화난다.

MainPage.Xaml

<Page
    ...
    mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Visibility="{x:Bind toggleButton.IsChecked, Mode=OneWay}" HorizontalAlignment="Center" FontSize="32" Text="Show"/>
        <ToggleButton x:Name="toggleButton" Content="Change" FontSize="32" HorizontalAlignment="Center" />
    </StackPanel>
</Page>

1

형이 다르기 때문에 당연하지만 이대로는 곤란하므로, 그것을 변환해 주는 컨버터를 등록한다.

우선 이 클래스를 프로젝트에 추가한다.
이것이 컨버터다.

boolean2visibilityconverter.cs

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

namespace BindToCollectionData
{
    /// <summary>
    /// BooleanをVisibilityに変換する。
    /// </summary>
    public class Boolean2VisibilityConverter : IValueConverter
    {
        /// <summary>
        /// Trueをセットした場合、変換を逆転させる。TrueがCollapsedを返す。
        /// </summary>
        public bool IsReversed { get; set; }

        public object Convert(object value, Type typeName, object parameter, string language)
        {
            var val = System.Convert.ToBoolean(value);
            if (this.IsReversed)
            {
                val = !val;
            }
            if (val)
            {
                return Visibility.Visible;
            }
            return Visibility.Collapsed;
        }
        public object ConvertBack(object value, Type typeName, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

변환기는 IValueConverter 인터페이스를 상속하고,Convert 와 ConvertBack 를 구현해 주면 좋을 것 같다.
잘 모르기 때문에 변환 부분만 수정해 가면 좋을 것이다.

그리고 App.xaml 파일을 수정합니다. <Application.Resources> 다음이 추가되었습니다.

App.xaml

<Application
    x:Class="BindToCollectionData.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BindToCollectionData"
    RequestedTheme="Dark">

    <Application.Resources>
        <local:Boolean2VisibilityConverter x:Key="True2Visibility" IsReversed="False"/>
        <local:Boolean2VisibilityConverter x:Key="False2Visibility" IsReversed="True"/>
    </Application.Resources>

</Application>

Boolean2VisibilityConverter 에 x:Key 를 할당하여 이 이름으로 사용할 수 있게 된다.public 필드와 속성이있는 경우IsReversed="True" 와 같이 지정해 컨버터의 동작 상태를 변경하거나 할 수 있다.

만약 컨버터를 Common 폴더 등에 정리하고 있었던 경우(이번은 프로젝트명 MyProject 로서)Application 와 같이 XML 네임스페이스 을 선언하고,xmlns:hogehoge="MyProject.Common" 라고 선언하지 않으면 안 되는 것 같다.

그리고 <hogehoge:Boolean2VisibilityConverter x:Key="... 이다. x:Bind 라는 설명을 추가하고 있다.

MainPage.xaml

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

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Show" Visibility="{x:Bind toggleButton.IsChecked, Converter={StaticResource True2Visibility}, Mode=OneWay}" HorizontalAlignment="Center" FontSize="32" />
        <ToggleButton x:Name="toggleButton" Content="Change" FontSize="32" HorizontalAlignment="Center" />
    </StackPanel>
</Page>

이것을 실행해, 버튼을 누르면 이런 식으로 버튼의 상태에 맞추어 UI의 표시 상태가 바뀐다.

2



조금 응용해 햄버거 버튼( Converter={StaticResource True2Visibility}, 을 사용한 것)과 ToggleButton 를 조합하면 메뉴를 개폐하는 앱을 만들 수 있게 된다.

아무래도 Windows8의 무렵은 SplitView 폴더 3 안에 Common 라는 즈바리 그 자체가 존재하고 있었던 것 같지만, 지금은 없는 것 같다.

Windows 8.1 스토어 앱 템플릿 구조
4


참고: A BooleanToVisibilityConverter for WinRT
htp : // bg. 반찬. jp/엔트리/2013/09/21/224812
Thank you Diederik.

데이터 바인딩 개요
htp://bgs. 우2우. 베 / 썰매 k / 포스트 / 2011/11/14 / 젖. 아 spx




정확하게는 True, False, null의 3개의 상태를 취한다. htps : // msd 응. 미 c 로소 ft. 코 m / 자 jp / ぃ b 등 ry / 우동 ws / ps / ml / mt269383. 아 spx

↩  htps : // msd 응. 미 c 로소 ft. 코 m / 자 jp / ぃ b 등 ry / 우동 ws / 아 ps / ぁ ml / mt185594. 아 spx

나중에 햄버거 버튼의 예를 만들어 두고 싶다. ↩

스토어 앱 템플릿을 사용해 작성을 개시했을 경우, BooleanToVisibilityConverter.cs 폴더내에는 편리 상품, 원래 헬퍼 클래스나 컨버터가 들어가 있었던 것 같다. 어째서 UWP의 템플릿에는 없어… ↩