윈폰 매뉴얼

3-1-3.보이기 속성

UIElement 클래스의 Visibility 속성은 컨트롤의 보임 여부를 지정한다. 컨트롤을 일단 생성해 놓되 일시적으로 화면에서 숨기고 싶을 때 이 속성을 사용한다. 보임 여부라 하면 보임, 안 보임 둘 중 하나인 것이 상식적이지만 이 속성의 값은 상식과는 조금 다르다. 다음 두 가지 속성값 중 하나를 가진다.

속성값	설명
Visible	보인다.
Collapsed	숨겨지며 자리를 차지하지 않는다.

디폴트는 물론 보이는 Visible이며 이 속성을 바꾸지 않는 한 배치한 모든 컨트롤은 화면에 나타난다. 보이는 동안은 사용자로부터 입력을 받아들이며 포커스도 받을 수 있다. Collapsed일 때는 단순히 숨기만 하는 것이 아니라 자리도 차지하지 않아 완전히 사라진 것처럼 취급된다. 이 속성의 정확한 효과는 스택 패널에 있을 때 명확하게 나타난다. 다음 배치를 보자.

Visibility1

<phone:PhoneApplicationPage

x:Class="Visibility1.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

수직 스택 패널에 3개의 버튼을 배치하된 가운데 버튼의 보이기 상태를 Collapsed로 지정했다. 가운데 버튼이 잠시 숨기만 하는 것이 아니라 원래 없었던 것처럼 아예 사라져 버리며 아래쪽의 세 번째 버튼이 위로 올라와 빈 자리를 메운다. 실행 결과는 다음 왼쪽 그림과 같다.

스택 패널은 차일드를 차곡 차곡 배치하는데 Collapsed 상태의 컨트롤에게는 아예 자리를 배정하지 않고 완전히 무시해 버린다. 만약 오른쪽 그림처럼 가운데 버튼이 일시적으로 투명해진 것처럼 하고 싶다면 Visibility 속성으로 숨기는 것이 아니라 Opacity 속성으로 투명색으로 만들어야 한다. Opacity 속성은 컨트롤의 투명도를 지정하며 1이면 불투명이고 0이면 투명이며 0.5이면 반투명이다.

Visibility2

<phone:PhoneApplicationPage

x:Class="Visibility2.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

가운데 버튼의 Opacity 속성에 0을 대입하여 버튼을 완전히 투명하게 만들었다. 이렇게 하면 보이기는 하지만 투명하므로 화면에 나타나지는 않는다. 투명할 뿐 숨겨진 것은 아니므로 자리는 차지하며 333 버튼이 투명한 222 버튼 아래쪽에 배치된다.

그렇다면 투명한 상태일 때 사용자가 이 버튼을 클릭하면 어떤 일이 벌어질까. 버튼에 대한 이벤트 핸들러를 작성하여 버튼 클릭시 메시지 박스를 열어 보자. 디자인 뷰에서 가운데 버튼을 더블클릭하면 이벤트 핸들러가 생성되고 XAML 파일에 이벤트와 핸들러를 연결하는 구문이 작성된다. 빈 핸들러 메서드에 다음 코드를 작성한다.

private void Button_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("버튼을 클릭하였습니다.");

}

버튼 클릭시 메시지 박스를 열어라는 명령이다. 이벤트 핸들러 작성법에 대해서는 차후 자세히 배울 것이다. 코드를 작성한 후 실행해 보면 비록 투명해서 안 보이지만 클릭 입력에 반응하는 것을 알 수 있다. 111과 333 부근의 빈 영역을 클릭하면 화면 상단에 메시지 박스가 나타난다.

만약 투명하게 만들고 사용자의 입력도 받지 않으르면 IsHitTestVisible 속성을 사용한다. 이 속성에 false를 대입하면 보임 여부에 상관없이 사용자의 입력을 받지 않는다. 세 번째 예제를 만들어 이를 확인해 보자.

Visibility3

<phone:PhoneApplicationPage

x:Class="Visibility3.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

================================== CS =======================================

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace Visibility3

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

private void Button_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("버튼을 클릭하였습니다.");

}

참고로 소스 리스트의 가운데에 있는 ==CS== 줄은 XAML 파일과 CS 파일을 구분하는 역할을 한다. 구분선 위쪽이 MainPage.xaml이며 아래쪽은 MainPage.xaml.cs 파일을 덤프해 놓은 것이다. 이 둘은 파일은 다르지만 한 페이지의 모양과 동작을 표현한다는 면에서 관련성이 있는 파일이므로 한 리스트에 같이 덤프하기로 한다.

Visibility2 예제와 거의 동일하되 가운데 버튼의 IsHitTestVisible 속성이 False라는 점만 다르다. 이제 실행해 보면 가운데 버튼은 보이지 않고 클릭 입력에도 반응하지 않지만 자리는 차지한다. 배치는 그대로 유지한 채로 잠시 숨기고만 싶다면 이 예제와 같은 방법을 사용한다.

보임 여부, 자리 차지 여부, 사용자 입력 여부 등은 세 가지 속성을 잘 조합해서 표현해야 한다. 실버라이트의 슈퍼셋인 WPF에는 Visibility 속성에 일시적으로 숨기는 Hidden이라는 속성값이 있지만 모바일용 실버라이트에는 이 속성값이 없으므로 다소 복잡하다. 보다시피 WPF에 익숙한 사람이라도 윈도우폰에서는 어떤 점이 다른지를 잘 알아 두어야 한다.

UIElement에는 보이기 상태를 지정하는 Visibility 속성 외에도 현재 보이는 상태인지를 조사하는 IsVisible 이라는 읽기 전용의 속성도 있다. 이 두 속성은 비슷한 것 같지만 용도가 다르다. Visibility 속성은 컨트롤 그 자체가 보이는지를 가리킬 뿐이지만 IsVisible 속성은 부모의 상태까지 고려하여 보임 여부를 조사한다. 컨트롤 자체는 보이는 상태라도 부모가 숨겨지면 컨트톨도 같이 숨겨지는데 이때는 Visibility 속성과 IsVisible 속성이 달라질 수도 있다.