Skip to content

Latest commit

 

History

History
99 lines (67 loc) · 4.25 KB

collectionviewsource.md

File metadata and controls

99 lines (67 loc) · 4.25 KB
Raw
-api-id -api-type
T:Microsoft.UI.Xaml.Data.CollectionViewSource
winrt class

Microsoft.UI.Xaml.Data.CollectionViewSource

-description

Provides a data source that adds grouping and current-item support to collection classes.

-xaml-syntax

<CollectionViewSource .../>

-remarks

Use CollectionViewSource when you want to bind list controls to collections, but you want to display those collections in groups and maintain a current item independent from the list control. This is particularly useful when you want to bind multiple controls to the same collection and you want the current item in one control to change the current item in the other bound controls. You typically define a CollectionViewSource as a XAML resource and bind to it using the {StaticResource} markup extension. You can then set its Source property in code-behind to a supported collection type.

Any controls that you bind to the same CollectionViewSource will always have the same current item. You can access the current item programmatically through the ICollectionView.CurrentItem property of the CollectionViewSource.View property value.

If the items in the collection are collections themselves, or are objects that contain collections, you can display the collections as groups within the larger collection. To do this, set the IsSourceGrouped property to true. If the items contain collections but are not collections themselves, you must also set the ItemsPath property to the name of the collection property.

Note

Setting the Source property to another CollectionViewSource instance is not supported.

-examples

Tip

For more info, design guidance, and code examples, see Semantic zoom.

[!div class="nextstepaction"] Open the WinUI 3 Gallery app and see the SemanticZoom in action.

The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

The following code example demonstrates how to bind a ListBox control to the results of a grouping LINQ query. In this example, a collection of teams is grouped by city and displayed with the city name as the group headers. For the complete code listing, see the XAML data binding sample.

<Grid>

  <Grid.Resources>
    <CollectionViewSource x:Name="groupInfoCVS" IsSourceGrouped="true"/>
  </Grid.Resources>

  <ListBox x:Name="lbGroupInfoCVS" 
    ItemsSource="{Binding Source={StaticResource groupInfoCVS}}">

    <ListBox.GroupStyle>
      <GroupStyle>
        <GroupStyle.HeaderTemplate>
          <DataTemplate>

            <TextBlock Text="{Binding Key}"/>

          </DataTemplate>
        </GroupStyle.HeaderTemplate>
      </GroupStyle>
    </ListBox.GroupStyle>

    <ListBox.ItemTemplate>
      <DataTemplate>

        <Border Background="{Binding Color}" 
          Width="200" CornerRadius="10" HorizontalAlignment="Left">

          <TextBlock Text="{Binding Name}" 
            Style="{StaticResource DescriptionTextStyle}" 
            HorizontalAlignment="Center" FontWeight="Bold"/>

        </Border>
      </DataTemplate>
    </ListBox.ItemTemplate>

  </ListBox>

</Grid>

Teams teams = new Teams();
var result = 
    from t in teams 
    group t by t.City into g 
    orderby g.Key 
    select g;
groupInfoCVS.Source = result;

-see-also

Binding, Data binding in depth, XAML data binding sample