XAML or HTML

012. 컨버터(Value Converter)

XAML 뽀개기

StringEmptyToVisibilityConverter.cs : 컨버터

 

1
2
3
4
5
6
7
8
9
10
11
12
public class StringEmptyToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return string.IsNullOrEmpty(value.ToString()) ? Visibility.Visible : Visibility.Collapsed;
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value;
    }
}
cs

 

IValueConverter 인터페이스를 상속 받아 StringEmptyToVisibilityConverter를 작성합니다. 들어오는 value null 또는 empty 판단해 Visibiliy 타입으로 컨버팅하는 간단한 ValueConverter입니다.

 

1
xmlns:cvt="clr-namespace:Sample.Converter"
cs

 

XAML에서 컨버터를 사용하려면 네임스페이스를 미리 선언합니다.

 

1
<cvt:StringEmptyToVisibilityConverter x:Key="StringEmptyToVisibilityConverter"/>
cs

 

앞서 작성한 벨류 컨버터는 리소스에 Key명과 함께 선언합니다.

 

1
2
3
4
5
6
7
8
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
    <Grid>
        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
 
        <Label x:Name="PART_GuideText" Content="{TemplateBinding GuideText}" Foreground="Red"
               Visibility="{Binding Text, Converter={StaticResource StringEmptyToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctr:GuideTextBox}}}"/>
    </Grid>
</Border>
cs

 

가이드 문구의 역할을 하는 Label Visibility 속성을 StringEmptyToVisibilityConverter 컨버터를 이용해 변경합니다. 여기서는 Text 속성을 이용하려고 합니다. 템플릿 안에서 Text 속성을 바인딩 문법으로 접근하는 방법은 여러가지입니다.

 

1
Visibility="{Binding Text, Converter={StaticResource StringEmptyToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctr:GuideTextBox}}}"
cs

 

첫번째, 원형이 되는 타입을 지정해 찾는 방법이 있습니다.

 

1
Visibility="{Binding Text, Converter={StaticResource StringEmptyToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"
cs

 

두번째, 템플릿 부모에게서 찾는 방법이 있습니다. 이런 방법들은 템플릿 구성과 요구사항에 맞게 수정해서 접근하면 되겠습니다.

 



샘플 코드 : https://github.com/CharlesKwon/XamlSimplified