Nasıl yapılır: DataGrid Denetimine Satır Ayrıntıları Ekleme

Denetimi kullanırken DataGrid , satır ayrıntıları bölümü ekleyerek veri sunusunu özelleştirebilirsiniz. Satır ayrıntıları bölümü eklemek, isteğe bağlı olarak görünür veya daraltılmış bir şablondaki bazı verileri gruplandırmanıza olanak tanır. Örneğin, içindeki her satır için DataGrid verilerin yalnızca bir özetini sunan ancak kullanıcı bir satır seçtiğinde DataGriddaha fazla veri alanı sunan bir satır ayrıntıları ekleyebilirsiniz. Özelliğindeki satır ayrıntıları bölümü RowDetailsTemplate için şablonu tanımlarsınız. 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. Her iki yaklaşım da aşağıdaki yordamlarda gösterilmiştir. Kaynak olarak eklenen veri şablonu, şablonu yeniden oluşturmadan proje genelinde kullanılabilir. Satır içi XAML olarak eklenen veri şablonuna yalnızca tanımlandığı denetimden erişilebilir.

Satır içi XAML kullanarak satır ayrıntılarını görüntülemek için

1. DataGrid Bir veri kaynağındaki verileri görüntüleyen bir oluşturun.

2. DataGrid öğesine bir RowDetailsTemplate öğe ekleyin.

3. Satır ayrıntıları bölümünün görünümünü tanımlayan bir DataTemplate oluşturun.

   Aşağıdaki XAML, ve satır içi tanımlamayı RowDetailsTemplate gösterirDataGrid. her DataGrid satırda üç değer ve satır seçildiğinde üç değer daha 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 DataGridgösterir. Bu örnekte sorgu, müşteri bilgilerini içeren bir varlıktaki verileri 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ülemek için

1. DataGrid Bir veri kaynağındaki verileri görüntüleyen bir oluşturun.

2. Resources Kök öğeye denetim veya denetim gibi bir PageWindow öğe ekleyin ya da App.xaml (veya Application.xaml) dosyasında sınıfına bir Resources öğe Application ekleyin.

3. resources öğesinde, satır ayrıntıları bölümünün görünümünü tanımlayan bir DataTemplate oluşturun.

   Aşağıdaki XAML, sınıfında tanımlanan öğesini RowDetailsTemplateApplication gösterir.

   <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>
   

4. üzerindeDataTemplate, x:Key Yönergesi'ni veri şablonunu benzersiz olarak tanımlayan bir değere ayarlayın.

5. öğesinde DataGrid özelliğini önceki adımlarda tanımlanan kaynağa ayarlayın RowDetailsTemplate . Kaynağı statik kaynak olarak atayın.

   Aşağıdaki XAML, önceki örnekten kaynağa ayarlanan özelliği gösterir RowDetailsTemplate .

   <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>
   

Satır ayrıntıları için görünürlüğü ayarlamak ve yatay kaydırmayı önlemek için

1. Gerekirse özelliğini bir DataGridRowDetailsVisibilityMode değer olarak ayarlayınRowDetailsVisibilityMode.

   Varsayılan olarak, değer olarak VisibleWhenSelectedayarlanır. Tüm satırların ayrıntılarını gösterecek veya Collapsed tüm satırların ayrıntılarını gizleyecek şekilde ayarlayabilirsinizVisible.

2. Gerekirse, satır ayrıntıları bölümünün yatay olarak kaydırılmasını önlemek için özelliğini true olarak ayarlayınAreRowDetailsFrozen.