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

빠른 시작: Windows Phone의 이미지

2014-06-18

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

 

Windows Phone 에서는 사진 및 다이어그램과 같은 이미지를 표시할 수 있는 몇 가지 옵션을 제공합니다. 이 빠른 시작 항목에서는 이미지를 Windows Phone 앱에 통합하는 방법을 설명합니다.

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

 

이미지를 표시하려는 경우 Image 또는 ImageBrush 개체를 사용할 수 있습니다. 다음 예제에서는 Image 개체를 사용하여 licorice.jpg라는 이미지를 표시하는 방법을 보여 줍니다.

<Image Source="licorice.JPG" />

다음 그림은 에뮬레이터에서 실행 중인 예제를 보여 줍니다.

Image display

이 예제에서는 Source 속성이 표시할 이미지의 위치를 지정합니다. 절대 URL(예: http://contoso.com/myPicture.jpg)을 지정하거나 앱의 XAP 파일에 포함된 파일의 URL을 지정하여 Source를 설정할 수 있습니다. 앱에 이미지 파일을 추가하려면 Visual Studio에서 다음 작업을 수행합니다.

  1. 프로젝트 메뉴에서 기존 항목 추가를 선택합니다.

  2. 원하는 이미지 파일을 선택한 다음 추가를 클릭합니다.

  3. 솔루션 탐색기에서 추가된 이미지 파일을 선택합니다.

  4. 속성 창에서 빌드 작업 속성을 콘텐츠로 변경합니다.

앱이 빌드될 때 이미지 파일이 XAP에 포함됩니다.

참고참고:

Windows Phone 에서 모든 이미지 형식을 지원하지는 않습니다. BitmapImage 클래스를 사용하여 JPEG 및 PNG 파일 형식의 이미지를 참조할 수 있습니다. Image에 사용할 수 있는 형식과 이미지 소스 형식에 대한 자세한 내용은 BitmapImage를 참조하세요.

ImageBrush 개체를 사용하면 이미지를 사용하여 Brush 개체를 허용하는 영역을 그릴 수 있습니다. 예를 들어 ImageBrushPanel의 속성 Background 값으로 사용할 수 있습니다. Windows Phone 의 브러시에 대한 자세한 내용은 빠른 시작: Windows Phone의 브러시를 참조하세요.

다음 예제에서는 식물 이미지를 사용하여 텍스트 내부를 그리는 방법을 보여 줍니다.

<!-- TextBlock with an image brush applied to the text. -->
<TextBlock Margin="20"
    Text="LICORICE"
    FontFamily="Verdana"
    FontSize="80"
    FontWeight="Bold">
    <TextBlock.Foreground>
        <ImageBrush ImageSource="licorice.JPG"/>
    </TextBlock.Foreground>
</TextBlock>

다음 그림은 에뮬레이터에서 실행 중인 예제를 보여 줍니다.

Image display

SourceWidth 또는 Height 값을 설정하지 않으면 Image에 지정된 이미지의 크기로 표시됩니다. WidthHeight를 설정하면 이미지가 표시될 사각형 영역이 만들어집니다. Stretch 속성을 사용하여 이미지가 이 영역을 채우는 방식을 지정할 수 있습니다. Stretch 속성은 Stretch 열거형에서 정의하는 다음 값을 받아들입니다.

  • None: 출력 크기를 채우도록 이미지를 늘이지 않습니다.

  • Uniform: 출력 크기에 맞게 이미지 배율을 조정합니다. 그러나 콘텐츠의 가로 세로 비율은 유지됩니다. 기본값입니다.

  • UniformToFill: 출력 영역을 완전히 채우도록 이미지의 배율을 조정하지만 가로 세로 비율은 원래대로 유지됩니다.

  • Fill: 출력 크기에 맞게 이미지 배율을 조정합니다. 내용의 높이와 너비의 배율이 독립적으로 조정되기 때문에 이미지의 원래 가로 세로 비율이 유지되지 않을 수 있습니다. 즉, 출력 영역을 완전히 채우기 위해 이미지가 왜곡될 수 있습니다.

다음 그림에서는 여러 가지 Stretch 설정을 보여 줍니다.

Image Stretch enum

Clip 속성을 사용하여 Image 출력에서 영역을 자를 수 있습니다. Clip 속성을 Geometry로 설정합니다. 그러면 Image에서 타원, 선, 복합 경로와 같은 다양한 기하 도형을 자를 수 있습니다.

다음 예제에서는 EllipseGeometryImage의 클리핑 영역으로 사용하는 방법을 보여 줍니다. 이 예제에서 Image 개체는 이미지 파일로 설정된 Source 속성으로 정의됩니다. RadiusX 값이 125, RadiusY 값이 100, Center 값이 225,175EllipseGeometryImageClip 속성으로 설정되었습니다. 타원 영역 안에 있는 이미지 부분만 표시됩니다.

<Image Source="Licorice.JPG">
    <Image.Clip>
        <EllipseGeometry RadiusX="125" RadiusY="100" Center="225,175"/>
    </Image.Clip>
</Image>

다음 그림은 에뮬레이터에서 실행 중인 예제를 보여 줍니다.

Image Clipping

OpacityMaskImage에 적용하여 비녜트 효과와 같은 다양한 불투명도 관련 사진 마스킹 효과를 만들 수 있습니다.

다음예제에서는 가장자리가 희미해지도록(비녜트 효과) Image에 방사형 그라데이션을 적용하는 방법을 보여 줍니다.

<Image Source="licorice.jpg" >
    <Image.OpacityMask>
        <RadialGradientBrush GradientOrigin="0.5,0.5"
            Center="0.5,0.5"
            RadiusX="0.5"
            RadiusY="0.5">
            <!-- These Gradient Stop colors are only changing the
            alpha values so the image fades out toward the edges. -->
            <GradientStop Color="#ffffffff" Offset="0.5" />
            <GradientStop Color="#00ffffff" Offset="0.8" />
        </RadialGradientBrush>
    </Image.OpacityMask>
</Image>

다음 그림은 에뮬레이터에서 실행 중인 예제를 보여 줍니다.

Image OpacityMask
참고참고:

불투명 마스크에 대해 다양한 Brush 개체를 사용할 수 있습니다. Windows Phone 의 브러시에 대한 자세한 내용은 빠른 시작: Windows Phone의 브러시를 참조하세요.

WriteableBitmap은 수정할 수 있는 BitmapSource를 제공합니다. 따라서 이미지를 즉시 변경하고 업데이트된 이미지를 다시 렌더링할 수 있습니다.

BitmapSource, 새 비트맵의 크기 또는 UIElementWriteableBitmap 생성자에 전달할 수 있습니다. UIElement에 전달하면 시각적 요소의 비트맵 이미지가 만들어집니다. 예를 들어 전체 시각적 트리의 비트맵을 원하는 경우 루트 UIElement를 생성자로 전달하면 됩니다.

WriteableBitmapPixels 속성은 비트맵 2D 질감을 나타내는 배열입니다. 이 배열에서 픽셀 값을 변경하여 비트맵 이미지를 변경할 수 있습니다.

참고참고:

WriteableBitmap에서 사용하는 형식은 ARGB32(미리 곱한 RGB)입니다. 따라서 WriteableBitmap의 Pixel 배열에 있는 픽셀이 미리 곱해진 색으로 저장됩니다. 각 색 채널에는 알파 값이 미리 곱해집니다.

참고참고:

MediaElement 개체는 WriteableBitmap 캡처에 나타나지 않습니다. 그 이유는 MediaElement가 Windows Phone 에서 하드웨어적으로 완전히 렌더링되기 때문입니다.

다음 코드 샘플은 Image 개체에서 WriteableBitmap 이미지를 만드는 방법과 WriteableBitmap을 수정하는 방법을 보여 줍니다. WriteableBitmap을 만들기 위해 Image 개체의 Source 속성이 BitmapSource로 캐스팅되고 WriteableBitmap 생성자에 전달됩니다. Modify Pixels 버튼을 클릭하면 이벤트 처리기에서 비트맵의 Pixels 배열을 반복하면서 각 4번째 픽셀을 검은색으로 설정합니다. Image 개체가 수정된 비트맵으로 설정된 후 다시 렌더링됩니다.

<StackPanel>
    <Image Name="ImageToModify" Source="licorice.jpg" />
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="30" >
        <Button Name="ButtonModify" Content="Modify Pixels" Click="ButtonModify_Click" />
        <Button Name="ButtonReset" Content="Reset Image" Click="ButtonReset_Click" />
    </StackPanel>
</StackPanel>
Private Sub ButtonModify_Click(sender As Object, e As RoutedEventArgs)
    Dim pixelTarget As Integer = 4
    If ImageToModify.Source IsNot Nothing Then
        ' Get WriteableBitmap. ImageToModify is defined in MainPage.xaml
        Dim bitmap As New WriteableBitmap(TryCast(ImageToModify.Source, BitmapSource))
        ' Iterate through each pixel.
        For x As Integer = 0 To bitmap.Pixels.Length - 1
            ' Set every 4th pixel.
            If x Mod pixelTarget = 0 Then
                bitmap.Pixels(x) = 0
            End If
        Next
        ' Set Image object, defined in XAML, to the modified bitmap.
        ImageToModify.Source = bitmap
    End If
End Sub

Private Sub ButtonReset_Click(sender As Object, e As RoutedEventArgs)
    Dim licoriceImage As New BitmapImage(New Uri("licorice.jpg", UriKind.Relative))
    ImageToModify.Source = licoriceImage
End Sub

BitmapImageImageSource로 사용하면 이미지의 리소스 요구 사항 및 성능을 더 잘 제어할 수 있습니다.

이미지를 줄어든 크기로 로드하려면 로드하기 전에 이미지의 DecodePixelWidthDecodePixelHeight 속성을 설정하세요. 이 속성들을 사용하지 않으면 응용프로그램이 이미지를 더 작은 표시 크기가 아니라 원래 크기로 캐시하여 불필요한 리소스를 사용하게 됩니다. 화면 비율을 유지하려면 이 속성들을 둘 다가 아니라 하나만 설정하면 됩니다.

성능을 향상시키려면 UI 스레드를 차단하는 대신 백그라운드 스레드에서 이미지를 디코딩하도록 BackgroundCreation을 지정합니다.

표시:
© 2014 Microsoft