WPF DataGrid.GroupStyle与MVVM

我尝试列出应在三个不同的群体进行可视化的几个数据项：WPF DataGrid.GroupStyle与MVVM

仪表板
家政
科学

与MVVM工作（Model-View-ViewModel）设计模式，我制作了两个模型类：

DataGroup.cs

public class DataGroup 
{ 
    public String Name { get; set; } 
}

DataItem.cs

public class DataItem 
{ 
    public String Name { get; set; } 
    public String Format { get; set; } 
    public DataGroup Group { get; set; } 
}

...一个ViewModel类： DataListViewModel.cs

class DataListViewModel : ViewModelBase 
{ 
    public List<Models.DataGroup> GroupList { get; set; } 
    public List<Models.DataItem> DataList { get; set; } 

    public DataListViewModel() 
    { 
     var GroupList = new List<Models.DataGroup> 
     { 
      new Models.DataGroup 
      { 
       Name = "Dashboard" 
      }, 
      new Models.DataGroup 
      { 
       Name = "Housekeeping" 
      }, 
      new Models.DataGroup 
      { 
       Name = "Science" 
      } 
     }; 

     var DataList = new List<Models.DataItem> 
     { 
      new Models.DataItem 
      { 
       Name = "Panel A", 
       Format = "N/A", 
       Group = GroupList[0], 
      }, 
      new Models.DataItem 
      { 
       Name = "Panel B", 
       Format = "N/A", 
       Group = GroupList[0], 
      }, 
      new Models.DataItem 
      { 
       Name = "Panel C", 
       Format = "N/A", 
       Group = GroupList[0], 
      }, 
      new Models.DataItem 
      { 
       Name = "+3.4 V", 
       Format = "TBD", 
       Group = GroupList[1], 
      }, 
      new Models.DataItem 
      { 
       Name = "+5.3 V", 
       Format = "TBD", 
       Group = GroupList[1],

etc.

这里的XAML代码DataList.xaml

<ListView Name="PersonListView" 
         ItemsSource="{Binding DataList}" 
         IsSynchronizedWithCurrentItem="True" 
         SelectedItem="{Binding SelectedDataItem}"> 
     <ListView.ItemContainerStyle> 
      <Style TargetType="ListViewItem"> 
       <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
      </Style> 
     </ListView.ItemContainerStyle> 
     <ListView.View> 
      <GridView> 
       <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/> 
      </GridView> 
     </ListView.View> 
    </ListView> 

    <!-- DataList --> 
    <DataGrid BorderBrush="Black" 
       ItemsSource="{Binding DataList}" 
       SelectedItem="{Binding SelectedDataItem}" 
       IsSynchronizedWithCurrentItem="True" 
       AutoGenerateColumns="False" 
       IsReadOnly="True" SelectionMode="Single"> 
     <DataGrid.Style> 
      <Style TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}"> 
       <Setter Property="AlternatingRowBackground" Value="{DynamicResource AccentColorBrush4}"/> 
      </Style> 
     </DataGrid.Style> 

     <!--GroupStyle to group data--> 
     <DataGrid.GroupStyle> 
      <GroupStyle> 

       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <StackPanel> 
          <TextBlock Text="{Binding GroupList, IsAsync=True}"/> 
         </StackPanel> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 

       <!--Group DataItems into DataGroup--> 
       <GroupStyle.ContainerStyle> 
        <Style TargetType="{x:Type GroupItem}"> 
         <Setter Property="Template"> 
          <Setter.Value> 
           <ControlTemplate TargetType="{x:Type GroupItem}"> 
            <Expander IsExpanded="True" Background="{StaticResource HighlightBrush}"> 
             <Expander.Header > 
              <StackPanel Orientation="Horizontal"> 
               <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Foreground="{DynamicResource WhiteBrush}"/> 
               <TextBlock Text=" - " Foreground="{DynamicResource WhiteBrush}"/> 
               <TextBlock Text="{Binding Path=ItemCount}" Foreground="{DynamicResource WhiteBrush}"/> 
              </StackPanel> 
             </Expander.Header> 
             <ItemsPresenter/> 
            </Expander> 
           </ControlTemplate> 
          </Setter.Value> 
         </Setter> 
        </Style> 
       </GroupStyle.ContainerStyle> 

      </GroupStyle> 
     </DataGrid.GroupStyle> 


     <DataGrid.Columns> 
      <DataGridTextColumn Header="Name" Binding="{Binding Name}"/> 
      <DataGridTextColumn Header="Format" Binding="{Binding Format}" ElementStyle="{StaticResource DataGridTextColumnRightAlignStyle}"/> 
      <!--<DataGridTextColumn Header="SID" Binding="{Binding Sid}" ElementStyle="{StaticResource DataGridTextColumnRightAlignStyle}"/>--> 

     </DataGrid.Columns> 
    </DataGrid>

我能够以可视化的DataList控件，但gouping他们没有工作。我该如何更改DataListViewModel中的代码？

来源

2015-10-05 Kevin

要将这样的列表分组，您需要使用CollectionViewSource。直接

<CollectionViewSource x:Key="GroupedDataList" Source="{Binding DataList}"> 
     <CollectionViewSource.GroupDescriptions> 
      <PropertyGroupDescription PropertyName="Group" /> 
     </CollectionViewSource.GroupDescriptions> 
    </CollectionViewSource>

并绑定到而不是到DataList：

它的地方添加到您的资源，像这样

<DataGrid BorderBrush="Black" 
      ItemsSource="{Binding Source={StaticResource GroupedDataList}}"

的GroupStyle显示器也有点过 - 你不你需要HeaderTemplate那里你已经应用ContainerStyle。另外，你要第一TextBlock存在的Binding更改为Name.Name：

<StackPanel Orientation="Horizontal"> 
    <TextBlock Text="{Binding Path=Name.Name}" FontWeight="Bold" Foreground="{DynamicResource WhiteBrush}"/> 
    <TextBlock Text=" - " Foreground="{DynamicResource WhiteBrush}"/> 
    <TextBlock Text="{Binding Path=ItemCount}" Foreground="{DynamicResource WhiteBrush}"/> 
</StackPanel>

但是你可以玩的绑定和展示位置，制定出最适合你。

哦，我做的最后一件事就是删除顶部的ListView，它在我做的示例应用程序中完全被掩盖了。取决于你包含的XAML，尽管你可能不是这种情况。

希望这会有所帮助！

来源

2015-10-06 18:02:30

WPF DataGrid.GroupStyle与MVVM

回答

相关问题