none
想要有类似win8带的那个照片app的例子代码 RRS feed

  • 问题

  • 特别是那个图片文件夹下的图片有个自适应最大值。(这个不会)

    还有点击某个图片后打开全屏(这个也想学)

    2012年8月14日 16:46

答案

  • 例子还是比较复杂的,不希望直接给到你然后你也无从下手,你可以先从简单的 How to http://msdn.microsoft.com/en-us/library/windows/apps/br229583.aspx 做起,学习基础的Controls, XAML 布局 属性等,然后理解下面你的两个问题的回复就会轻松一点。

    图片有个自适应最大值:

    Image控件设置其Stretch属性就可以改变其图片的填充方式

    Member Value Description
    None 0

    The content preserves its original size.

    Fill 1

    The content is resized to fill the destination dimensions. The aspect ratio is not preserved.

    Uniform 2

    The content is resized to fit in the destination dimensions while it preserves its native aspect ratio.

    UniformToFill 3

    The content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

    例如:<Image Stretch="Fill" Source="...."/>

    点击某个图片后打开全屏:

    Win8 图片应用用的是FlipView作为全屏的呈现的,如下代码:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <FlipView ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Stretch="Uniform" Source="{Binding uri}"/>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </Grid>

    C#:

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<ImageItem> items = new List<ImageItem>()
                {
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img1.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img2.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img3.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img4.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img5.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img6.jpg")}
                };
                this.DataContext = items;
            }
        }
        public class ImageItem
        {
            public Uri uri { get; set; }
        }

    这个简单例子下载:https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211075

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 jin.yan 2012年8月15日 12:56
    2012年8月15日 5:39
    版主

全部回复

  • 例子还是比较复杂的,不希望直接给到你然后你也无从下手,你可以先从简单的 How to http://msdn.microsoft.com/en-us/library/windows/apps/br229583.aspx 做起,学习基础的Controls, XAML 布局 属性等,然后理解下面你的两个问题的回复就会轻松一点。

    图片有个自适应最大值:

    Image控件设置其Stretch属性就可以改变其图片的填充方式

    Member Value Description
    None 0

    The content preserves its original size.

    Fill 1

    The content is resized to fill the destination dimensions. The aspect ratio is not preserved.

    Uniform 2

    The content is resized to fit in the destination dimensions while it preserves its native aspect ratio.

    UniformToFill 3

    The content is resized to fill the destination dimensions while it preserves its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.

    例如:<Image Stretch="Fill" Source="...."/>

    点击某个图片后打开全屏:

    Win8 图片应用用的是FlipView作为全屏的呈现的,如下代码:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <FlipView ItemsSource="{Binding}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Image Stretch="Uniform" Source="{Binding uri}"/>
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>
        </Grid>

    C#:

        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                List<ImageItem> items = new List<ImageItem>()
                {
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img1.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img2.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img3.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img4.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img5.jpg")},
                    new ImageItem(){uri = new Uri(@"ms-appx:///Assets/img6.jpg")}
                };
                this.DataContext = items;
            }
        }
        public class ImageItem
        {
            public Uri uri { get; set; }
        }

    这个简单例子下载:https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%211075

    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 jin.yan 2012年8月15日 12:56
    2012年8月15日 5:39
    版主
  • 太感谢了~
    2012年8月15日 12:56