windows 8学习1---- gridview分组

像我这种脑子不好  有没有学习热情的人  ,技术不好是理所当然的    ,      我现在的状态时因为我的求知欲不强  ,没有对技术太多的渴求所致。

弱智般的从昨天下午搞到今天下午也没能把 gridview分组搞好  ,一直只显示分组头信息  不显示 每个组的每一项,终于问了一个朋友  才解决这个问题  惭愧```  下面吧 我的错误经验帖下来    反应之用:

 

之前的后台代码是

 

public class Citys   //数据源   
{
public string CityName { get; set; }
public ObservableCollection<string> df = new ObservableCollection<string>();

}

 

void MainPage_Loaded(object sender, RoutedEventArgs e)   //进行绑定
{
List<Citys> lt = new List<Citys>();
for (int n1 = 0; n1 < 100; n1++)
{
Citys ct1 = new Citys();
ct1.CityName = "上海";
for (int i = 0; i < 100; i++)
{
ct1.df.Add("sdfasdfasdfsdfsdf");
}

lt.Add(ct1);
}
InfoList.Source = lt;
}

<Page.Resources>

<CollectionViewSource x:Name="InfoList" IsSourceGrouped="True" ItemsPath="df"></CollectionViewSource>

<!--
此页所显示的分组项的集合,绑定到完整
项列表的子集,因为无法虚拟化组中的项
-->


</Page.Resources>

 

<GridView Name="Gridviewone" HorizontalAlignment="Left" Margin="90,156,0,0"
VerticalAlignment="Top" Width="1065" Height="445" Background="#FF14B1D4"
ItemsSource="{Binding Source={StaticResource InfoList}}">

<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>

<Button Content="{Binding CityName }"></Button>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<!--<VariableSizedWrapGrid/>-->
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>

</GroupStyle>

</GridView.GroupStyle>

<GridView.ItemTemplate> <!--m每一个具体项显示的数据模版-->
<DataTemplate>

<TextBlock Width="200" Height="200" Text="{Binding}" Foreground="Black"></TextBlock>

</DataTemplate>
</GridView.ItemTemplate>





</GridView>

 

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

下面是正确的  

public class Citys
{
public string CityName { get; set; }
public ObservableCollection<State> States { get; set; }
}

public class State
{
public string Name { set; get; }
}

void MainPage_Loaded(object sender, RoutedEventArgs e)//  绑定数据
{
ObservableCollection<Citys> lt = new ObservableCollection<Citys>();
for (int n1 = 0; n1 < 10; n1++)
{
Citys ct = new Citys();
ct.CityName = "上海";
ct.States = new ObservableCollection<State>();
for (int i = 0; i < 10; i++)
{
ct.States.Add(new State() { Name = "fjhfgjfgjfgjhfgj" });
}
lt.Add(ct);
}
InfoList.Source = lt;
}

<CollectionViewSource
x:Name="InfoList"
IsSourceGrouped="True" ItemsPath="States"></CollectionViewSource>
<!--
此页所显示的分组项的集合,绑定到完整
项列表的子集,因为无法虚拟化组中的项
-->
</Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<GridView Height="800"
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource InfoList}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CityName}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,10,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>

 

 

 

 

 

1<GridView.ItemsPanel>                                                                     ItemsPanl  是用来布局  组与组  之间的排列方向      目前的排列时  水平排列   就 是说第一组合  第二组之间  是水平排列的
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>

 

 

2<GridView.ItemTemplate>                                                             ItemTemplate是用来布局   每一项 的(每组中每一个成员  fjhfgjf````那个)
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>

 

 

<GridView.GroupStyle>         //这是一个大分类      它用来布局  组 级别 的显示容器    总之他只管理  组内的 事务
<GroupStyle>
3.1  <GroupStyle.HeaderTemplate>            //这是定义头模版的     就是组的标题的样式  
<DataTemplate>
<Grid Margin="1,0,0,6">
<Button
AutomationProperties.Name="Group Title"
Style="{StaticResource TextPrimaryButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding CityName}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
3.2 <GroupStyle.Panel>                                 //这是定义每一组  的容器显示    比如上海这一分组  中 每一个项item改按照何种排列方式显示 
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,10,0"/>   //他是先上下 后左右   ,边界是一gridview的heiht 终结的
</ItemsPanelTemplate>
</GroupStyle.Panel>

 

 
<GroupStyle.ContainerStyle> //这个不知道是干吗用的
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>


</GroupStyle>
</GridView.GroupStyle>

 /////////////////////////////////////////////////////////////////////////////////////////////////////

最后总结  : 问题出来数据源上   public ObservableCollection<State> States { get; set; }     绑定的数据 必须用{get;set;}  而我既然犯了个底等错误  为了省事 用了new  导致 数据无法绑定上到gridview  实在是一个小错误  既然耽搁了 两天的时间  实在是太不应该了 ```

 

 

posted on 2012-12-04 17:24  Top@Gragon  阅读(343)  评论(1编辑  收藏  举报

导航