FlipView 在XMAL 中使用

< ![CDATA[

FlipView  类似 原来看到jquery 图片切换。而且带描述等。

如：

或者这种。

 

 

发现微软官方只提供了 html&js的FlipView 使用。就搜索了下XAML的用法

 

  <FlipView x:Name="heroFlipView" ItemsSource="{Binding Heroes}">
                <FlipView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                             <Grid.RowDefinitions>
                                 <!--行的属性，不然，行间距太乱，name和描述会在一起-->
                                <RowDefinition Height="auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions> 
                            <Grid.ColumnDefinitions>
                                <!--2行，左右分开-->
                                <ColumnDefinition Width="2*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding Image}"
                                   Grid.Column="0"
                                   Grid.Row="0"
                                   Grid.RowSpan="2"
                                   Stretch="UniformToFill" />
                            <TextBlock Text="{Binding Name}"
                                       Grid.Column="1"
                                       Grid.Row="0"
                                       FontSize="36"
                                       Margin="12 0" />
                            <TextBlock Text="{Binding Description}"
                                       Grid.Column="1"
                                       Grid.Row="1"
                                       Margin="12 12 12 0"
                                       TextWrapping="Wrap"
                                       FontSize="18" />
                        </Grid>
                    </DataTemplate>
                </FlipView.ItemTemplate>
            </FlipView>

 

上面FlipView的ItemSource 绑定了 Heroes

而 Heroes只是这个：

      public ObservableCollection<BelgianSuperHero> Heroes
        {
            get
            {
                //ObservableCollection表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知
                return new ObservableCollection<BelgianSuperHero>() 
                    {
                        new BelgianSuperHero() {Name="Kapitein Zeppos", ImagePath="Assets/zeppos.jpg", Description="Vlaamse jeugd TV serie: Op een mooie dag komt er een vreemde ruiter het rustige dorpje Belder bvan 1965 tot 1969."}, 
                        new BelgianSuperHero() {Name="Keromar", ImagePath="Assets/keromar.jpg", Description="Vlaamse jeugd TV serie over de Kerten, een vredelievend volk dat iorlogszuchtige Bolten, onder."}, 
                        new BelgianSuperHero() {Name="De Kat", ImagePath="Assets/dekat.jpg", Description="Vlaamse jeugdserie over David De Kat een milieuactivist dieor de VRT."},  
                        new BelgianSuperHero() {Name="Merlina", ImagePath="Assets/merlina.jpg", Description="Vlaamse jeugd fantasie TV serie over de avonturen van detectivebureau Merlina n 80."}, 
                        new BelgianSuperHero() {Name="Mega Mindy", ImagePath="Assets/megamindy.jpg", Description="Vlaamse jeugd TV seie over een superwoman! Mega Mindy is in het echt Mieke, die dankzij een capsule in het geheime laboratorium van haar op."}, 
                        new BelgianSuperHero() {Name="ROX", ImagePath="Assets/rox.png", Description="Vlaamse Sonel en hij eindigt elke briefing met de dwingende woorden: falen is geen optie. 2012"} 
                    };
            }
        }

 

上图效果如下：

 

左右切换。有描述。

适合图片查看功能

 

 

 

搜索参考：http://blogs.u2u.be/diederik/post/2012/08/24/A-CXAML-FlipView-Context-Indicator-for-Windows-8.aspx

]]>