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 şablonda bazı verileri gruplandırmanıza olanak tanır. Örneğin, her satır için verilerin yalnızca bir özetini sunan DataGrid'deki DataGrid'a satır ayrıntıları ekleyebilir, ancak kullanıcı bir satır seçtiğinde daha fazla veri alanı gösterebilirsiniz. Ö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 araç 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, DataGrid ve RowDetailsTemplate'in satır içi tanımlanmasını gösterir. 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
   

Bir 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 araç oluşturun.

2. Resources kök öğesine bir Window denetimi veya bir Page denetimi gibi bir öğe ekleyin ya da App.xaml (veya Application.xaml) dosyasındaki Resources sınıfına bir Application öğe 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, RowDetailsTemplate öğesinin Application sınıfında tanımlandığını 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. Üzerinde DataTemplate, x:Key Yönergesi'ni veri şablonunu benzersiz olarak tanımlayan bir değer olarak 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 olarak ayarlanmış RowDetailsTemplate özelliğini 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>
   

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

1. Gerekirse RowDetailsVisibilityMode özelliğini bir DataGridRowDetailsVisibilityMode değeri olarak ayarlayın.

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

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