二十八、不规则宫格布局及不同item对应不同模版
查看 连接：http://www.cnblogs.com/dagehaoshuang/archive/2012/08/22/2651064.html
第一步：自定义控件
public class VariableSizedGridView : GridView { public VariableSizedGridView() { this.DataTypes = new List<DataTemplate>(); } public static readonly DependencyProperty DataTemplateDataTagProperty = DependencyProperty.RegisterAttached("DataTemplateDataTag", typeof(int), typeof(VariableSizedGridView), new PropertyMetadata(0)); public static int GetDataTemplateDataTag(DataTemplate element) { return (int)element.GetValue(VariableSizedGridView.DataTemplateDataTagProperty); } public static void SetDataTemplateDataTag(DataTemplate element, int value) { element.SetValue(VariableSizedGridView.DataTemplateDataTagProperty, value); } public static readonly DependencyProperty DataTypesProperty = DependencyProperty.Register("DataTypes", typeof(List<DataTemplate>), typeof(VariableSizedGridView), null); public List<DataTemplate> DataTypes { get { return this.GetValue(VariableSizedGridView.DataTypesProperty) as List<DataTemplate>; } set { this.SetValue(VariableSizedGridView.DataTypesProperty, value); } } protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item) { IGridItemSize gridItemSize = item as IGridItemSize; ContentControl gridViewItem = element as ContentControl; if (gridItemSize != null) { //设置元素占用的列数和行数 VariableSizedWrapGrid.SetColumnSpan(gridViewItem, gridItemSize.ColSpan); VariableSizedWrapGrid.SetRowSpan(gridViewItem, gridItemSize.RowSpan); //如果tag不为0，那么表示需要使用默认模板以外的模版 if (gridItemSize.Tag == 0) { base.PrepareContainerForItemOverride(element, item); } else { //获取tag对应的模版 var a = this.DataTypes.FirstOrDefault(c => VariableSizedGridView.GetDataTemplateDataTag(c) == gridItemSize.Tag); if (a == null) { base.PrepareContainerForItemOverride(element, item); } else { base.PrepareContainerForItemOverride(element, item); //将模版赋值给gridViewItem gridViewItem.ContentTemplate = a; } } } else base.PrepareContainerForItemOverride(element, item); } }
第二步：定义一个接口类用来实现宫格所占的列数和行数，新建类IGridItemSize
public interface IGridItemSize { //占用列的数量 int ColSpan { get; set; } //占用行的数量 int RowSpan { get; set; } int Tag { get; set; } }
第三步：SampleDataItem类继承IGridItemSize接口
public class SampleDataItem : SampleDataCommon,IGridItemSize { ... ... public int ColSpan { get; set; } public int RowSpan { get; set; } public int Tag { get; set; } }
第四步：在类SampleDataSource的构造函数里给SampleDataItem的ColSpan或RowSpan属性赋值。
group1.Items.Add(new SampleDataItem(type + "$" + position,
"",
name,
SampleDataCommon.path + @"\\" + substr, operate,
description,
content, "images/xiao_changba.png", "#FF17C0DA",
group1) { RowSpan = 2, ColSpan = 2, Tag = 3 });
第五步：修改GroupedItemsPage的XAML代码
<common:LayoutAwarePage x:Name="pageRoot" x:Class="tianyi.GroupedItemsPage" DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:tianyi" xmlns:data="using:tianyi.Data" xmlns:common="using:tianyi.Common" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" > <!--<Page.Resources> <Storyboard x:Name="ItemImageAnimation"> </Storyboard> </Page.Resources>--> <Page.Transitions> <TransitionCollection> <AddDeleteThemeTransition></AddDeleteThemeTransition> </TransitionCollection> </Page.Transitions> <Page.Resources> <Storyboard x:Name="story1"> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="RotationX" From="0" To="90" Duration="00:00:02"> </DoubleAnimation> </Storyboard> <Storyboard x:Name="story2"> <DoubleAnimation Storyboard.TargetName="p0" Storyboard.TargetProperty="RotationX" From="90" To="0" Duration="00:00:02"> </DoubleAnimation> </Storyboard> <!-- 此页所显示的分组项的集合，绑定到完整 项列表的子集，因为无法虚拟化组中的项 --> <CollectionViewSource x:Name="groupedItemsViewSource" Source="{Binding Groups}" IsSourceGrouped="true" ItemsPath="TopItems" d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/> </Page.Resources> <!-- 此网格用作定义以下两行的页的根面板: * 第 0 行包含后退按钮和页标题 * 第 1 行包含页布局的其余部分 --> <Grid x:Name="GridLayout" Style="{StaticResource LayoutRootStyle}" Background="{StaticResource GridImageBrush}"> <Grid.RowDefinitions> <RowDefinition Height="140"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!-- 在大多数视图状态中使用的水平滚动网格--> <local:VariableSizedGridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Margin="0,-3,0,0" Padding="116,0,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick" RightTapped="itemGridView_RightTapped" > <GridView.ItemContainerStyle> <Style TargetType="GridViewItem"> <Setter Property="VerticalContentAlignment" Value="Stretch"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </GridView.ItemContainerStyle> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.ItemTemplate> <DataTemplate> <Grid x:Name="grid" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5"> <!--<Grid.RenderTransform> <CompositeTransform Rotation="45"/> </Grid.RenderTransform>--> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}" > </Image> </Border> <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="{Binding Color}" Opacity="0.9"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="10" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" FontSize="20" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> </StackPanel> <Image HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="{Binding SubImage}" Height="40"></Image> </Grid> </DataTemplate> </GridView.ItemTemplate> <local:VariableSizedGridView.DataTypes> <DataTemplate local:VariableSizedGridView.DataTemplateDataTag="1"> <Grid HorizontalAlignment="Left"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="{Binding Color}" Opacity="0.5"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="10" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" FontSize="20" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> </StackPanel> <Image HorizontalAlignment="Right" Height="40" VerticalAlignment="Bottom" Source="{Binding SubImage}"></Image> </Grid> </DataTemplate> <DataTemplate local:VariableSizedGridView.DataTemplateDataTag="2"> <Grid HorizontalAlignment="Left" > <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}"/> </Border> <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="{Binding Color}" Opacity="0.5"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="10" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" FontSize="20" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> </StackPanel> <Image HorizontalAlignment="Right" Height="40" VerticalAlignment="Bottom" Source="{Binding SubImage}"></Image> </Grid> </DataTemplate> <DataTemplate local:VariableSizedGridView.DataTemplateDataTag="3"> <Grid HorizontalAlignment="Left" > <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="Fill" AutomationProperties.Name="{Binding Title}"> <Image.Projection> <PlaneProjection x:Name="p0" > </PlaneProjection> </Image.Projection> </Image> </Border> <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="{Binding Color}" Opacity="0.7"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="10" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" FontSize="20" Foreground="{StaticResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontWeight="Bold"/> </StackPanel> <Image HorizontalAlignment="Right" Height="40" VerticalAlignment="Bottom" Source="{Binding SubImage}"></Image> </Grid> </DataTemplate> <!--<DataTemplate local:VariableSizedGridView.DataTemplateDataTag="4"> <Grid HorizontalAlignment="Left"> <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}"> <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" > </Image> </Border> <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Background="{Binding Color}"> <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="10" Margin="15,0,15,0"/> <TextBlock Text="{Binding Subtitle}" Foreground="#FF1B56F3" FontSize="20" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10" FontWeight="Bold"/> </StackPanel> <Image HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="{Binding SubImage}" Height="40"></Image> </Grid> </DataTemplate>--> </local:VariableSizedGridView.DataTypes> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button AutomationProperties.Name="Group Title" Click="Header_Click" Style="{StaticResource TextPrimaryButtonStyle}" > <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> </StackPanel> </Button> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel > <ItemsPanelTemplate > <VariableSizedWrapGrid ItemHeight="250" ItemWidth="250" Orientation="Vertical" Margin="0,0,80,0" RightTapped="VariableSizedWrapGrid_RightTapped_1" /> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </local:VariableSizedGridView> <!-- 垂直滚动列表仅在对齐后使用--> <ListView x:Name="itemListView" AutomationProperties.AutomationId="ItemListView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Visibility="Collapsed" Margin="0,-10,0,0" Padding="10,0,0,60" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource Standard80ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <ListView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="7,7,0,0"> <Button AutomationProperties.Name="Group Title" Click="Header_Click" Style="{StaticResource TextPrimaryButtonStyle}"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> </StackPanel> </Button> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle> </ListView> <!-- 后退按钮和页标题--> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/> <TextBlock x:Name="page" Text="昵称" Grid.Column="1" IsHitTestVisible="false" FontSize="40" Style="{StaticResource PageHeaderTextStyle}" Margin="956,0,-897,40" Height="47"/> <Button x:Name="user_image" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="1065,30,0,0" VerticalAlignment="Top" Width="100" Click="user_image_Click"> <Button.Background> <!-- <SolidColorBrush Color="Red"></SolidColorBrush> --> <ImageBrush ImageSource="images/user.png"></ImageBrush> </Button.Background> </Button> <!--<Button x:Name="settings" Content="设置" FontSize="30" Grid.Column="1" Background="Blue" Height="70" Margin="1128,653,0,-613" Width="100" Click="settings_Click" />--> </Grid> <VisualStateManager.VisualStateGroups> <!-- 视觉状态反映应用程序的视图状态--> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <!-- 整页采用较窄的 100 像素页边距约定(纵向)--> <VisualState x:Name="FullScreenPortrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <!-- 对齐后，后退按钮和标题的样式将有所不同，并且列表表示形式将被 所有视图状态中显示的网格所替代 --> <VisualState x:Name="Snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> <Page.BottomAppBar> <AppBar x:Name="bottomBar" > <Grid HorizontalAlignment="Left" Height="100" Width="1346"> <Grid.ColumnDefinitions> <ColumnDefinition Width="627*"/> <ColumnDefinition Width="46*"/> </Grid.ColumnDefinitions> <Button x:Name="leftAppBar" FontSize="15" Visibility="Collapsed" HorizontalAlignment="Left" Content="卸载" Margin="10,7,0,0" VerticalAlignment="Top" Style="{StaticResource DiscardAppBarButtonStyle}" Click="leftAppBar_Click"/> <Button x:Name="midAppBar" HorizontalAlignment="Left" Visibility="Collapsed" Margin="111,7,0,0" Style="{StaticResource MoreAppBarButtonStyle}" VerticalAlignment="Top" Click="midAppBar_Click"/> <Button Grid.Column="1" HorizontalAlignment="Left" Margin="1,7,0,0" VerticalAlignment="Top" Style="{StaticResource HomeAppBarButtonStyle}" Click="Button_Click_1" /> </Grid> </AppBar> </Page.BottomAppBar> </common:LayoutAwarePage>
posted on 2013-02-20 09:59 gentle_girl 阅读(1021) 评论(0) 编辑 收藏 举报
