none
Metro风格如何基于Image控件创建一个ImageList控件 RRS feed

  • 问题

  • 刚下载了VS2011Bate版本,我看From的控件里有ImageList,但是Metro风格里没有这个控件,那我要显示并可能会同时更新20张图片怎么处理呢?我想创建一个

    类似From的ImageList控件,该控件要实现以下几个目的:

    1.可以放置20张图片

    2.可以控制这些图片的间距(横向和纵向的间距)

    请各位高手帮帮忙,先谢谢了

    2012年6月4日 2:49

答案

  • C++ version?

    Whatever, 我们都可以通过XAML, ListBox or ListView去构建一个列表控件 ,然后通过绑定和ItemTemplate去实现自定义的内容展现,这点与WPF/Silverlight相似,你可以先学习下关于WPF/SL相关概念,有助于你在Metro中开发过程中的对遇到的种种新概念的理解。

    XAML如下:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <ListView ItemsSource="{Binding}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Margin" Value="10,10,10,10"/>
                        <!-- 这里可控制修改边距 -->
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
        </Grid>

    C++:

    MainPage::MainPage()
    {
    	InitializeComponent();
    
    	images = ref new Platform::Collections::Vector<BitmapImage^>();
    
    	for(int i=1;i<=20;i++){		
    		BitmapImage^ bitmapImage =ref new BitmapImage();	
    		bitmapImage->UriSource =ref new Uri(Package::Current->InstalledLocation->Path + "/Images/" + i+ ".png");
    		images->Append (bitmapImage);
    	}
    
    	this->DataContext = images;
    }
    

    具体ListView等使用概念,参考 XAML ListView and GridView essentials sample:http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd

    完整的例子: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%21979


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

    • 已标记为答案 JJ李锋 2012年6月5日 9:46
    • 取消答案标记 JJ李锋 2012年6月7日 12:03
    • 已标记为答案 JJ李锋 2012年6月7日 12:04
    • 取消答案标记 JJ李锋 2012年6月7日 12:06
    • 已标记为答案 Jie BaoModerator 2012年6月12日 6:01
    2012年6月5日 8:33
    版主

全部回复

  • C++ version?

    Whatever, 我们都可以通过XAML, ListBox or ListView去构建一个列表控件 ,然后通过绑定和ItemTemplate去实现自定义的内容展现,这点与WPF/Silverlight相似,你可以先学习下关于WPF/SL相关概念,有助于你在Metro中开发过程中的对遇到的种种新概念的理解。

    XAML如下:

        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <ListView ItemsSource="{Binding}">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Margin" Value="10,10,10,10"/>
                        <!-- 这里可控制修改边距 -->
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
        </Grid>

    C++:

    MainPage::MainPage()
    {
    	InitializeComponent();
    
    	images = ref new Platform::Collections::Vector<BitmapImage^>();
    
    	for(int i=1;i<=20;i++){		
    		BitmapImage^ bitmapImage =ref new BitmapImage();	
    		bitmapImage->UriSource =ref new Uri(Package::Current->InstalledLocation->Path + "/Images/" + i+ ".png");
    		images->Append (bitmapImage);
    	}
    
    	this->DataContext = images;
    }
    

    具体ListView等使用概念,参考 XAML ListView and GridView essentials sample:http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd

    完整的例子: https://skydrive.live.com/#cid=51B2FDD068799D15&id=51B2FDD068799D15%21979


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

    • 已标记为答案 JJ李锋 2012年6月5日 9:46
    • 取消答案标记 JJ李锋 2012年6月7日 12:03
    • 已标记为答案 JJ李锋 2012年6月7日 12:04
    • 取消答案标记 JJ李锋 2012年6月7日 12:06
    • 已标记为答案 Jie BaoModerator 2012年6月12日 6:01
    2012年6月5日 8:33
    版主
  • 真的多谢BobBao,费心做了这个例程,我受益匪浅。ListView我看过那个sample,因为ListView特有的选中后右上角会出现“对勾”不符合我们设计的需求
    所以我想自己做个ImageList控件。实现选中某张图片时,该图片Y轴向上几十个像素,看了你的例程后我估计我应该可以做出这样的控件,最后真的感谢你的付出,谢谢!
    2012年6月5日 9:46
  • Bob Bao我在你给的例子里增加了ListView控件,也设置了ItemsSource为数据上下文 关联,怎么显示不出来图片呢?

    Xaml文件里以下代码是做什么用的呢?

     <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Image Width="100" Height="100" Source="{Binding}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemContainerStyle>

    2012年6月7日 12:06
  • 那个代码是指定ListView中排列每一个项的布局是WrapGrid,然后每一项用一个Image 来呈现,且每一项的样式中Margin属性需要设置一个值。

    我不清楚你是否和我写的是一样的代码,特别是C++后台代码是否一致,至少从你贴出的XAML中看,没有任何问题。或者你的其他XAML代码有问题,没有写全。


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

    2012年6月11日 2:25
    版主
  • 多谢BobBao,不要闲我烦啊,呵呵,我还有个问题,我现在用ListView实现多个图片显示,并且可以按键更新图片,但是遇到个问题如下图

      ListView.FlowDirection 属性只能是这2个选项,我想把这个属性置位空可以么,我不想要这个效果,

    看着晃眼。

    2012年6月11日 7:12
  • 多谢BobBao,不要闲我烦啊,呵呵,我还有个问题,我现在用ListView实现多个图片显示,并且可以按键更新图片,但是遇到个问题如下图

      ListView.FlowDirection 属性只能是这2个选项,我想把这个属性置位空可以么,我不想要这个效果,

    看着晃眼。

    参考: http://social.msdn.microsoft.com/Forums/zh-CN/metroappzhcn/thread/ebe6edda-3f98-4fe7-adf5-4aa8c741a140

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

    2012年6月11日 10:05
    版主