title: WPF Datagrid with search bar and paging
body: <p>I am trying to create a reusable WPF datagrid control with search bar on top and paging buttons at bottom.
  How can I achieve this?</p>
  
  <p>In my unsuccessful attempt, I change the default control template of Datagrid. The paging buttons render over the grid. Can below be fixed? 
  Alternate solutions are welcome. Thank you.</p>
  
  <pre><code>&lt;Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}"&gt;
      &lt;Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/&gt;
      &lt;Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/&gt;
      &lt;Setter Property="BorderBrush" Value="#FF688CAF"/&gt;
      &lt;Setter Property="BorderThickness" Value="1"/&gt;
      &lt;Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/&gt;
      &lt;Setter Property="ScrollViewer.CanContentScroll" Value="true"/&gt;
      &lt;Setter Property="ScrollViewer.PanningMode" Value="Both"/&gt;
      &lt;Setter Property="Stylus.IsFlicksEnabled" Value="False"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type DataGrid}"&gt;
                  &lt;Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"&gt;
                      &lt;DockPanel&gt;             
                          &lt;ScrollViewer x:Name="DG_ScrollViewer" DockPanel.Dock="Top" Focusable="false"&gt;
                              &lt;ScrollViewer.Template&gt;
                                  &lt;ControlTemplate TargetType="{x:Type ScrollViewer}"&gt;
                                      &lt;Grid&gt;
                                          &lt;Grid.ColumnDefinitions&gt;
                                              &lt;ColumnDefinition Width="Auto"/&gt;
                                              &lt;ColumnDefinition Width="*"/&gt;
                                              &lt;ColumnDefinition Width="Auto"/&gt;
                                          &lt;/Grid.ColumnDefinitions&gt;
                                          &lt;Grid.RowDefinitions&gt;
                                              &lt;RowDefinition Height="Auto"/&gt;
                                              &lt;RowDefinition Height="*"/&gt;
                                              &lt;RowDefinition Height="Auto"/&gt;
                                          &lt;/Grid.RowDefinitions&gt;
                                          &lt;Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/&gt;
                                          &lt;DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/&gt;
                                          &lt;ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="1"/&gt;
                                          &lt;ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/&gt;
                                          &lt;Grid Grid.Column="1" Grid.Row="2"&gt;
                                              &lt;Grid.ColumnDefinitions&gt;
                                                  &lt;ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/&gt;
                                                  &lt;ColumnDefinition Width="*"/&gt;
                                              &lt;/Grid.ColumnDefinitions&gt;
                                              &lt;ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/&gt;
                                          &lt;/Grid&gt;
                                      &lt;/Grid&gt;
                                  &lt;/ControlTemplate&gt;
                              &lt;/ScrollViewer.Template&gt;
                              &lt;ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/&gt;
                          &lt;/ScrollViewer&gt;
                          &lt;StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" HorizontalAlignment="Center"&gt;
                                &lt;Button Name="btnFirstPage" Content="&amp;lt;&amp;lt;" Click="btnFirstPage_Click"/&gt;
                                &lt;Button Name="btnPreviousPage" Content="&amp;lt;" Click="btnPreviousPage_Click"/&gt;
                                &lt;Label Name="lblPageIndex" Content="{Binding ElementName=root,
                                          Path=PageIndex, UpdateSourceTrigger=PropertyChanged}" Width="Auto"/&gt;
                                &lt;Label Content="of"/&gt;
                                &lt;Label Name="lblNumberOfPages" Content="{Binding ElementName=root,
                                          Path=NumberOfPages, UpdateSourceTrigger=PropertyChanged}" Width="Auto"/&gt;
                                &lt;Button Name="btnNextPage" Content="&amp;gt;" Click="btnNextPage_Click"/&gt;
                                &lt;Button Name="btnLastPage" Content="&amp;gt;&amp;gt;" Click="btnLastPage_Click"/&gt;
                          &lt;/StackPanel&gt;
                      &lt;/DockPanel&gt;    
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
      &lt;Style.Triggers&gt;
          &lt;MultiTrigger&gt;
              &lt;MultiTrigger.Conditions&gt;
                  &lt;Condition Property="IsGrouping" Value="true"/&gt;
                  &lt;Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/&gt;
              &lt;/MultiTrigger.Conditions&gt;
              &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false"/&gt;
          &lt;/MultiTrigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>