내보내기(0) 인쇄
모두 확장
정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

XAML UI 공유

2014-06-18

적용 대상: Windows Phone 8 및 Windows Phone Silverlight 8.1 | Windows 8

 

이 섹션에서는 Windows Phone 8 앱과 Windows 스토어 앱 사이에서 XAML UI를 공유하는 방법에 대해 설명합니다. 앱의 이 계층에서 공유하는 것이 앱 논리 공유보다 덜 효과적인 이유를 간략하게 설명하고 사용자 컨트롤을 사용하여 앱 간에 일부 UI를 공유하는 방법에 대해 설명합니다. 지침은 각 앱에 대한 UI를 개별적으로 빌드하여 각각에 대한 디자인 지침을 포함하고 사용자에게 가능한 최상의 환경을 전달하는 것입니다. XAML 앱의 UI를 빌드하는 데 사용되는 빌딩 블록에는 유사성이 있습니다. 이러한 내용은 Windows Phone 8과 Windows 8 간 XAML 컨트롤 비교에 설명되어 있습니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

다음 요소를 통해 앱 사이에 XAML UI를 공유할 수 있습니다.

  • Windows Phone 8 의 XAML 및 Windows 8 의 XAML은 이진 호환되지 않습니다. 앞서 설명한 대로 각 플랫폼에서 UI를 빌드하는 데 사용할 컨트롤은 비슷합니다. 컨트롤은 이름, 동작 및 프로그래밍 인터페이스나 노출하는 구문이 비슷합니다. 그러나 컨트롤은 각 플랫폼에 대해 구체적으로 구현됩니다.

  • Windows Phone 8 의 XAML 및 Windows 8 의 XAML에서 네임스페이스 접두사는 서로 다릅니다. 이는 처음부터 만들 때 기본 페이지에 포함된 네임스페이스를 보면 확인할 수 있습니다.

    Windows Phone 8 

    
    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"
    
    

    Windows 8 

    
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:Win8App"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    

    이러한 네임스페이스 가져오기를 비교하면 네임스페이스를 가져오는 방법에서 미묘하지만 중요한 차이를 확인할 수 있습니다. Windows Phone 8 에서 가져온 네임스페이스의 접두사는 clr-namespace:으로 지정됩니다. Windows 8 에서 가져온 네임스페이스의 접두사는 using:으로 지정됩니다. 이렇게 하면 같은 구문을 사용하여 네임스페이스를 가져올 수 있는 경우가 아니면 같은 XAML을 사용하기 어렵습니다.

  • XAML은 조건부 컴파일을 지원하지 않습니다. 전처리기 지시문을 사용한 조건부 컴파일에 표시된 대로 조건부 컴파일은 특정 플랫폼에서 사용될 코드 경로에서 컴파일하고 다른 플랫폼에 대해 컴파일할 경우 다른 코드 경로에서 컴파일하여 플랫폼 차이를 처리하기 위한 유용한 기술입니다. Windows Phone 8 에 대해 clr-namespace를 사용하고 Windows 8 에 대해 using:을 사용하는 네임스페이스 가져오기에서는 조건부로 컴파일하여 이전 문제를 해결할 수 없으므로 이 기술을 사용하면 두 가지 플랫폼 사이에서 XAML 페이지를 공유하기 어렵습니다.

이는 Windows Phone 8 과 Windows 8 사이에서 공유에 대한 완전한 장애물로 보이면 안 됩니다. 분명한 지침은 각 플랫폼에 대해 개별적으로 UI를 디자인 및 빌드하여 각 플랫폼에 대한 디자인 지침을 포함하는 것입니다. 이러한 장애물을 기술적으로 피할 수 있습니다. 코드에서 페이지를 초기화하는 동안 UI를 만들 수 있습니다. 런타임에 리소스에서 플랫폼 특정 XAML을 로드하고 페이지에 문자열로 삽입할 수 있습니다. 그러나 이러한 기술은 크기가 조정되지 않고 핵심 자산 생성(앱이 사용자에게 의존하는 방식)을 지루하고 오류가 발생하기 쉬운 작업으로 만듭니다. 코드 공유 투자는 앱 논리, 데이터 모델, 뷰 모델 등을 공유하여 앱 스택에 훨씬 더 큰 수익을 제공합니다.

일부 환경에서 사용할 수 있는 한 가지 UI 공유 기술은 UI의 부분을 사용자 컨트롤로 격리하고 부분을 공유하는 것입니다. Windows Phone 8 및 Windows 8 에서는 둘 다 XAML 사용자 컨트롤을 지원합니다. UserControl은 개발자가 정의하고 기존 UI 요소로 구성되며 자체 논리가 포함된 UI 컨트롤입니다. 플랫폼에서 사용 가능한 다른 컨트롤을 배치하는 것과 같이 정의한 컨트롤을 UI에 배치할 수 있습니다. Windows Phone 8 의 UserControl 클래스에 대한 자세한 내용은 System.Windows.Controls.UserControl을 참조하세요. Windows 8 의 UserControl 클래스에 대한 자세한 내용은 Windows.UI.Xaml.Controls.UserControl을 참조하세요.

다음 표에서는 새 UserControl을 Windows Phone 8 앱에 추가할 때 만들어지는 XAML 및 새 UserControl을 Windows 스토어 앱에 추가할 때 만들어지는 XAML을 보여 줍니다. Windows 8 컨트롤에서 로컬 네임스페이스를 생략하면 가져온 네임스페이스가 동일합니다. 컨트롤에서 로컬 리소스를 참조하지 않은 경우 이렇게 할 수 있습니다. Windows Phone 8 컨트롤은 컨트롤에 대한 글꼴, 백그라운드포그라운드 속성을 정의합니다. 이러한 속성은 Windows Phone과 함께 제공되는 스타일에서 가져온 값으로 설정됩니다. 또한 제거되거나 보다 일반적인 값으로 바뀔 수 있습니다. 이러한 속성을 단순하게 코드 숨김으로 설정할 수도 있습니다.

Windows Phone 8 


<UserControl x:Class="MyApp.Controls.WP8.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">

    </Grid>
</UserControl>

Windows 8 


<UserControl
    x:Class="MyApp.Controls.Win8.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.Controls.Win8"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>

    </Grid>
</UserControl>

이러한 XAML 예제에서 플랫폼 특정 기능을 제거하면 다음과 같이 표시됩니다.


<UserControl
    x:Class="MyApp.Controls.Shared.MyControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    
    <Grid>

    </Grid>
</UserControl>

네임스페이스를 변경하여 이 컨트롤을 공유하도록 지정했습니다. 이 XAML은 Windows Phone 8 및 Windows 8 에서 모두 실행되고 네임스페이스와 컨트롤 이름이 동일한 경우 공유할 수 있습니다. 이는 공유된 사용자 컨트롤에서 구현할 수 있는 항목을 제한합니다. 다음은 Windows Phone 8 과 Windows 8 사이에서 UserControl을 공유하기 위해 수행해야 하는 방법입니다. 다음 단계에서는 UserControl을 사용하여 XAML UI를 공유하는 방법을 보여 줍니다.

  1. Visual Studio에서 새 UserControl을 프로젝트 중 하나에 추가합니다.

  2. 네임스페이스를 공유됨을 나타내는 네임스페이스로 변경합니다(예: MyApp.Shared.Controls). 또한 UserControl에 대한 XAML에서 Class 항목을 업데이트하여 이 새 네임스페이스로 이름을 한정해야 합니다.

  3. UserControl에 대한 XAML을 열고 이전 코드의 제거된 XAML과 같이 표시되도록 수정합니다.

  4. UI 요소를 컨트롤에 추가합니다. 이 예제에서는 TextBox, TextBlockButton을 추가합니다. 글꼴과 색은 간소화하기 위해 하드 코드됩니다. 업데이트된 XAML은 다음 조각과 같이 표시됩니다.

    
    <UserControl x:Class="MyApp.Shared.Controls.MyControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="480" d:DesignWidth="480">
        
        <Grid x:Name="LayoutRoot" Background="Black">
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <TextBox x:Name="InputText"/>
                <Button x:Name="SayHelloButton" Click="SayHelloButton_Click_1" Content="Say Hello!"/>
                <TextBlock x:Name="OutputText" FontSize="28" Foreground="White"/>
            </StackPanel>
        </Grid>
    </UserControl>
    
  5. 컨트롤을 앱의 페이지로 끌어서 놓아서 빌드 및 테스트합니다. 컨트롤을 사용하려면 선택한 네임스페이스를 가져와야 합니다. Windows Phone 8 앱에서 xmlns:sharecontrols="clr-namespace:MyApp.Shared.Controls"를 XAML 페이지의 <UserControl> 시작 태그에 추가하여 네임스페이스를 가져옵니다. 마찬가지로 Windows 스토어 앱의 경우 xmlns:sharecontrols="using:MyApp.Shared.Controls"를 XAML 페이지의 <UserControl> 시작 태그에 추가하여 네임스페이스를 가져옵니다.

  6. 이제 페이지에서 컨트롤을 사용합니다.

    
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <sharecontrols:MyControl />
            </Grid>
    
    

    이 시점에서 UserControl을 만들었습니다. 다음 단계에서는 두 개 프로젝트에서 컨트롤을 공유합니다.

  7. 솔루션 탐색기에서 UserControl을 마우스 오른쪽 버튼으로 클릭하고 프로젝트에서 제외를 선택합니다. 그러면 컨트롤이 프로젝트에서 제거되지만 디스크에는 남아 있습니다.

  8. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하여 컨트롤을 다시 프로젝트에 추가하고 추가 | 기존 항목을 선택합니다.

  9. 대화 상자에서 MyControl.xaml 및 MyControl.xaml.cs 파일 선택하고 링크로 추가를 선택합니다. 그러면 파일이 다시 프로젝트에 연결된 파일로 추가됩니다. 이전에 컨트롤을 삭제한 페이지가 작동하는지 다시 한 번 확인해야 합니다.

  10. 다른 프로젝트에 대해 이전 두 개 단계를 반복하여 컨트롤을 해당 프로젝트에 연결된 파일로 추가합니다.

  11. MyControl.xaml.cs 파일에는 플랫폼에 특정한 네임스페이스에 대한 참조가 포함되어 있으므로 이 프로젝트가 빌드되지 않습니다. 조건부 컴파일을 사용하여 이 프로젝트 형식에 대해 올바른 네임스페이스를 추가할 수 있습니다. 다음은 컨트롤이 Windows Phone 8 프로젝트 및 Windows 스토어 프로젝트에 추가되었을 때 표시되는 네임스페이스 선언 섹션의 예제입니다. 코드에는 버튼의 Click 이벤트 처리기 구현도 포함되어 있습니다.

    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    
    #if NETFX_CORE
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml;
    #else
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Navigation;
    using Microsoft.Phone.Controls;
    using Microsoft.Phone.Shell;
    #endif
    
    namespace MyApp.Shared.Controls
    {
        public partial class MyControl : UserControl
        {
            public MyControl()
            {
                InitializeComponent();
            }
    
            private void SayHelloButton_Click_1(object sender, RoutedEventArgs e)
            {
                OutputText.Text = String.Format("Hello {0}", InputText.Text);
            }
    
        }
    }
    
    
  12. 두 가지 앱을 모두 빌드, 실행 및 테스트하여 컨트롤이 두 앱에 대해 모두 작동하는지 확인합니다.

이전 코드 예제에서는 사용자 컨트롤이 Windows Phone 8 및 Windows 8 에 대해 모두 어떻게 빌드될 수 있는지를 보여 줍니다. 그러나 이 설명을 시작할 때 언급된 제한으로 인해 이 기술은 기본 사용자 컨트롤로 제한됩니다. 해당 제한 사항 이외에 항상 대상 플랫폼에 맞게 사용자 환경을 빌드하기 위한 지침을 고려해야 합니다. XAML 컨트롤을 공유할 수 있지만 제한적입니다. 이 공유 유형에 적절한 후보는 공유할 팝업 창 또는 기타 widget에 표시할 UI입니다. 이러한 항목은 일반적으로 복잡한 XAML이 없고 단순한 스타일 지정만 있는 기본 UI 요소로 구성되기 때문입니다.

Microsoft는 MSDN 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 MSDN 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?
표시:
© 2015 Microsoft