image resource & color

Image contents from resources

자바스크립트로 데이터바인딩을 통해 이미지 로딩하는 것과 이미지 소스로부터 불러오는 방법

<FileImageSource ux:Key="pic2" File="Images/Image2.jpg" />
<StackPanel>
    <JavaScript>
        module.exports = {
            imageResource: "pic2",
            url: "http://somewhereontheinternet/Cute-Cat.jpg"
        }
    </JavaScript>
    <Image File="Images/Image1.jpg" />
    <Image Source="{DataToResource imageResource}" />
    <Image Url="{url}" />
</StackPanel>

Image Color

<Image File="WhiteIcon.png" Color="#f00" />

이미지에 컬러값을 부여한다. 위 코드는 하얀 이미지를 완전한 빨간색으로 만든다.

이미지 표현을 위한 프로퍼티는 아래와 같다. 이 부분은 원문 그대로 복사.

StretchMode

When added to a container, an Image will by default try to show as much of itself as possible. If the image isn't the same aspect as its container, there will be parts of the container that will not be covered.

There are a number of ways to address this issue. You can set the StretchMode-property on your Image to make it behave differently. Here are the different modes:

• Fill - Fill the available area in the container without necessarily preserving the aspect ratio.
• PixelPrecise - Use the pixels from the image as unit to make sure the image is crisp on all devices. This means that the image will be different sizes on different devices. It ignores the size of the Image container.
• PointPrecise - This uses the size of the image source as the Image in points, which guarantees that it will be the same on all devices. It ignores the size of the Image container. For example, if the image is 64x64 pixels in size, the resulting control will be 64x64 points
• PointPrefer - The PointPrefer stretch mode will prioritize getting image size correct using PointPrecisestretch mode, but in cases where PixelPrecise would create an on-screen image with approximately the right size, it will use PixelPrecise to increase the clarity of the image.
• Scale9 - If you use Scale9, the Image will be streched according to its Scale9Margin. This margin will decide which pixels will be streched and by how much. The margin divides the image into 9 areas, where the corners will retain their original aspect and the rest of the areas will be stretched to accomodate the desired size of the image.
• Uniform - This will make the picture as large as possible while preserving aspect ratio. This will often make the Image not cover the whole parent.
• UniformToFill - Fill the parent container while preserving aspect ratio. This will often mean that parts of the picture are left out, clipped by the parent

StretchDirection

You can set which directions you want the image to scale by setting the StretchDirection-property:

• Both - Allow both up- and downscaling
• UpOnly - Only upscale contents
• DownOnly - Only downscale contents

ContentAlignment

You can set an alignment on Image which will make the image align within its rectangle on screen if it fills more or less of the available space in its rectangle. Which might be common when using StretchDirection and StretchMode:

• Default
• Left
• HorizontalCenter
• Right
• Top
• VerticalCenter
• Bottom
• TopLeft
• TopCenter
• TopRight
• CenterLeft
• Center
• CenterRight
• BottomLeft
• BottomCenter
• BottomRight

Image sources

이미지 소스는 file이나 url로부터 직접적으로 데이터를 지정할 수 있으나, 이미지의 생명주기나 다른 부분에서 통제가 어려워질 수 있다.

<FileImageSource ux:Global="CloseIcon" File="close.png" Density="2" />

<Image Source="CloseIcon" />

현재 Fuse가 지원하는 이미지 소스 타입

• FileImageSource - 하나의 로컬 이미지와 밀도
• HttpImageSource - 하나의 Url 이미지와 밀도
• MultiDensityImageSource - 화면 조밀도에 따른 다양한 크기의(같은 이미지) 이미지 지정

• MemoryPolicy - 이미지를 사용하지 않을 때 얼마나 메모리에서 유지할 것인지 지정

MultiDensityImageSource

<Image StretchMode="PointPrefer">
    <MultiDensityImageSource>
        <FileImageSource File="Icon.png" Density="1"/>
        <FileImageSource File="Icon.png@2x.png" Density="2"/>
    </MultiDensityImageSource>
</Image>

Fuse는 자동으로 해상도에 가장 잘 맞는 이미지를 선택해서 출력한다.

HttpImageSource

HttpImageSource 비동기로 동작한다.

<Image>
    <MultiDensityImageSource>
        <HttpImageSource Url="{image_url_1x}" Density="1"/>
        <HttpImageSource Url="{image_url_2x}" Density="2"/>
    </MultiDensityImageSource>
</Image>

아래와 같이 사용하면 알맞는 밀도의 이미지를 선택

<Image Url="{image_url}" />