Nasıl yapılır: DataGrid Denetimine Satır Ayrıntıları Ekleme
DataGridDenetimi kullanırken, bir satır ayrıntıları bölümü ekleyerek veri sunumunu özelleştirebilirsiniz. Satır ayrıntıları bölümü eklemek, bazı verileri isteğe bağlı olarak görünür veya daraltılmış bir şablonda gruplandırmanızı sağlar. Örneğin, DataGrid yalnızca içindeki her bir satır için verilerin bir özetini sunan öğesine satır ayrıntıları ekleyebilirsiniz DataGrid , ancak kullanıcı bir satır seçtiğinde daha fazla veri alanı sunar. Özelliği içindeki satır ayrıntıları bölümünün şablonunu tanımlarsınız RowDetailsTemplate . Aşağıdaki çizimde, bir satır ayrıntıları Bölümü örneği gösterilmektedir.

Satır ayrıntıları şablonunu satır içi XAML veya kaynak olarak tanımlarsınız. Aşağıdaki yordamlarda her iki yaklaşım da gösterilmiştir. Kaynak olarak eklenen bir veri şablonu, şablonu yeniden oluşturmadan proje genelinde kullanılabilir. Satır içi XAML olarak eklenen bir veri şablonuna yalnızca tanımlandığı denetimden erişilebilir.
Satır içi XAML kullanarak satır ayrıntılarını görüntüleme
DataGridBir veri kaynağından verileri görüntüleyen bir oluştur.
DataGridÖğesinde, bir RowDetailsTemplate öğesi ekleyin.
DataTemplateSatır ayrıntıları bölümünün görünümünü tanımlayan bir oluştur.
Aşağıdaki XAML, DataGrid ve satır içi 'nin nasıl tanımlanacağını gösterir RowDetailsTemplate . DataGridHer satırda üç değer ve satır seçildiğinde üç daha fazla değer görüntüler.
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid> <DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" > <DataGrid.Columns> <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn> </DataGrid.Columns> <DataGrid.RowDetailsTemplate> <DataTemplate> <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </Border> </DataTemplate> </DataGrid.RowDetailsTemplate> </DataGrid> </Grid> </Window>Aşağıdaki kod, içinde görüntülenen verileri seçmek için kullanılan sorguyu gösterir DataGrid . Bu örnekte sorgu, müşteri bilgilerini içeren bir varlıktan veri seçer.
private void Window_Loaded(object sender, RoutedEventArgs e) { AdventureWorksLT2008Entities advenWorksEntities = new AdventureWorksLT2008Entities(); ObjectQuery<Customer> customers = advenWorksEntities.Customers; var query = from customer in customers orderby customer.CompanyName select new { customer.LastName, customer.FirstName, customer.CompanyName, customer.Title, customer.EmailAddress, customer.Phone, customer.SalesPerson }; dataGrid1.ItemsSource = query.ToList(); }Dim advenWorksEntities As AdventureWorksLT2008Entities = New AdventureWorksLT2008Entities Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Dim customers As ObjectQuery(Of Customer) = advenWorksEntities.Customers Dim query = _ From customer In customers _ Order By customer.CompanyName _ Select _ customer.LastName, _ customer.FirstName, _ customer.CompanyName, _ customer.Title, _ customer.EmailAddress, _ customer.Phone, _ customer.SalesPerson dataGrid1.ItemsSource = query.ToList() End Sub
Kaynak kullanarak satır ayrıntılarını görüntüleme
DataGridBir veri kaynağından verileri görüntüleyen bir oluştur.
Bir Resources Denetim veya denetim gibi kök öğeye bir öğe ekleyin WindowPage veya ResourcesApplication app. xaml (veya Application. xaml) dosyasındaki sınıfa bir öğe ekleyin.
Resources öğesinde, DataTemplate satır ayrıntıları bölümünün görünümünü tanımlayan bir oluştur.
Aşağıdaki XAML, RowDetailsTemplate sınıfında tanımlanan öğesini gösterir Application .
<Application.Resources> <DataTemplate x:Key="CustomerDetail"> <Border BorderThickness="0" Background="BlanchedAlmond" Padding="10"> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Email: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding EmailAddress}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Phone: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding Phone}" VerticalAlignment="Center" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="12" Text="Sales Person: " VerticalAlignment="Center" /> <TextBlock FontSize="16" Foreground="MidnightBlue" Text="{Binding SalesPerson}" VerticalAlignment="Center" /> </StackPanel> </StackPanel> </Border> </DataTemplate> </Application.Resources>Üzerinde DataTemplate , DataTemplate veri şablonunu benzersiz bir şekilde tanımlayan bir değere ayarlayın.
DataGridÖğesinde, RowDetailsTemplate özelliğini önceki adımlarda tanımlanan kaynak olarak ayarlayın. Kaynağı bir statik kaynak olarak atayın.
Aşağıdaki XAML, RowDetailsTemplate önceki örnekteki kaynak olarak ayarlanan özelliği gösterir.
<DataGrid Name="dataGrid1" IsReadOnly="True" AutoGenerateColumns="False" RowDetailsTemplate="{StaticResource CustomerDetail}" > <DataGrid.Columns> <DataGridTextColumn Header="Company Name" Binding="{Binding CompanyName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact First Name" Binding="{Binding FirstName}"></DataGridTextColumn> <DataGridTextColumn Header="Contact Last Name" Binding="{Binding LastName}"></DataGridTextColumn> </DataGrid.Columns> </DataGrid>
Görünürlük ayarlamak ve satır ayrıntıları için yatay kaydırmayı engellemek için
Gerekirse, RowDetailsVisibilityMode özelliği bir değer olarak ayarlayın DataGridRowDetailsVisibilityMode .
Varsayılan olarak, değeri olarak ayarlanır VisibleWhenSelected . Tüm Visible satırların ayrıntılarını gösterecek şekilde veya Collapsed tüm satırların ayrıntılarını gizleyecek şekilde ayarlayabilirsiniz.
Gerekirse, AreRowDetailsFrozen
truesatır ayrıntıları bölümünün yatay olarak kaymasını engellemek için özelliğini olarak ayarlayın.