WPF DataGrid: Größe der Spalten

Habe ich ein System.Windows.Controls.DataGrid-Eigenschaft CanUserResizeColumns zugeordnet zu Wahren. Jetzt kann ich passen Sie die Breite der Spalten durch ziehen mit der Maus klicken der linken Maustaste wird zwischen 2 Spaltenköpfen.

Aber ich möchte auch in der Lage sein zu ändern die Breite der Spalten in jeder Zeile des dataGrid-Steuerelements, nicht nur in den Spaltenüberschriften. Ist es möglich?

  • Diana, du solltest wirklich akzeptieren Antworten, sonst wird die community nicht motiviert werden, um Ihnen zu helfen.
  • NÖ. Das ist zu kryptisch. :(.
  • Ich denke, Sie meinte - Kann ich resize die Spaltenbreite durch ziehen der Zellen von Links\rechts Grenzen (wie das Verhalten der Spaltenüberschrift). Interessante Frage, es gibt kein solches Verhalten in Excel.
  • Ich das falsch verstanden vorher. Offenbar gibt es eine Lösung. 🙂
InformationsquelleAutor Diana | 2011-09-19
  1. 5

    In das dataGrid können Sie eine DataGridTemplate Spalte alogn mit einem GridSplitter um dies zu erreichen..

     <toolkit:DataGridTemplateColumn Header="Text" >
     <toolkit:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
           <Grid>
              <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="*"/>
                 <ColumnDefinition  Width="Auto"/>
              </Grid.ColumnDefinitions>
              <TextBlock Text="{Binding Text}"/>
              <GridSplitter Grid.Column="1" Width="3"
                            DragIncrement="1"
                            DragDelta="GridSplitter_DragDelta"
                            Tag="{Binding BindsDirectlyToSource=True,
                                    RelativeSource={RelativeSource
                                      AncestorType={x:Type toolkit:DataGridCell}}}"/>
           </Grid>
        </DataTemplate>
     </toolkit:DataGridTemplateColumn.CellTemplate>
 </toolkit:DataGridTemplateColumn>

    Dann in deinem code hinter... dies tun...

        private void GridSplitter_DragDelta(
         object sender,
         System.Windows.Controls.Primitives.DragDeltaEventArgs e)
    {
        var gridSplitter = sender as GridSplitter;

        if (gridSplitter != null)
        {
            ((DataGridCell) gridSplitter.Tag).Column.Width
                = ((DataGridCell) gridSplitter.Tag).Column.ActualWidth +
                  e.HorizontalChange;
        }
    }

    Diese Weise einen GridSplitter auf individueller Ebene der Zellen können die Größe Ihre gesamte Spalte.

    Wenn Sie mit MVVM dann die oben genannten event-handler, sollte in einem Angeschlossenen Verhalten

    • +1 von mir - Es funktioniert gut - für Spaß, entschied ich mich für deinen code in der beigefügten Verhalten und verfasst eine Antwort mit diesem.
    InformationsquelleAutor WPF-it
  2. 2

    Folgenden auf die von WPF-seine ausgezeichnete Antwort, hier ist, wie zu erreichen das gleiche Ergebnis mit angebrachten Verhalten:

    public static class SplitterOnGridCellBehaviour
{
    public static readonly DependencyProperty ChangeGridCellSizeOnDragProperty =
        DependencyProperty.RegisterAttached("ChangeGridCellSizeOnDrag", typeof (bool),
                                            typeof (SplitterOnGridCellBehaviour),
                                            new PropertyMetadata(false, OnChangeGridCellSizeOnDrag));

private static void OnChangeGridCellSizeOnDrag(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args)
{
    GridSplitter splitter = dependencyObject as GridSplitter;

    if(splitter == null)
    {
        throw new NotSupportedException("SplitterOnGridCellBehaviour can only be on a GridSplitter");
    }

    if((bool)args.NewValue)
    {
        splitter.DragDelta += SplitterOnDragDelta;
    }
    else
    {
        splitter.DragDelta -= SplitterOnDragDelta;
    }
}

private static void SplitterOnDragDelta(object sender, DragDeltaEventArgs args)
{
    GridSplitter splitter = (GridSplitter)sender;
    var containerCell = splitter.FindParent<DataGridCell>();
    containerCell.Column.Width = containerCell.Column.ActualWidth + args.HorizontalChange;
}


public static void SetChangeGridCellSizeOnDrag(UIElement element, bool value)
{
    element.SetValue(ChangeGridCellSizeOnDragProperty, value);
}

public static bool GetChangeGridCellSizeOnDrag(UIElement element)
{
    return (bool) element.GetValue(ChangeGridCellSizeOnDragProperty);
}

public static T FindParent<T>(this DependencyObject child)
   where T : DependencyObject
{
    DependencyObject parentObject = VisualTreeHelper.GetParent(child);

    if (parentObject == null) return null;

    var parent = parentObject as T;
    if (parent != null)
    {
        return parent;
    }
    return FindParent<T>(parentObject);
    }
}

    Alle Netz-Splitter erscheinen, wie man im DataGrid, ich angepasst die BorderThickness der DataGridCell auf 0, da sonst alle von den Netz-Splitter erschienen, als Striche (auf Windows 8 zumindest).

    Den XAML-Code für das Fenster sieht wie folgt aus:

    <Window x:Class="DataGridWithSplitter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataGridWithSplitter" Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <DataTemplate x:Key="CellWithSplitterTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition  Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Column1}"/>
                <GridSplitter Grid.Column="1" Width="3" Background="Black" local:SplitterOnGridCellBehaviour.ChangeGridCellSizeOnDrag="True" />
            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <DataGrid ItemsSource="{Binding SampleData}" GridLinesVisibility="None" HeadersVisibility="None" AutoGenerateColumns="False">
            <DataGrid.Resources>
                <!-- Makes the GridSplitters Solid -->
                <Style TargetType="DataGridCell">
                    <Setter Property="BorderThickness" Value="0" />
                </Style>
            </DataGrid.Resources>
            <DataGrid.Columns>
                <DataGridTemplateColumn Header="First Column" CellTemplate="{StaticResource CellWithSplitterTemplate}"  />
                <DataGridTextColumn Header="Other column" Binding="{Binding Column2}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

    Den rest ist es ziemlich offensichtlich, aber der Vollständigkeit halber die Windows DataContext gesetzt wurde, um eine Instanz der folgenden ViewModel-code:

    public class SampleData
{
    public string Column1 { get; set; }

    public string Column2 { get; set; }
}

public class MainWindowViewModel
{
    public IEnumerable<SampleData> SampleData
    {
        get
        {
            return new List<SampleData>()
                       {
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                            new SampleData() {Column1 = "Hello", Column2 = "World"},
                       };
        }
    }
}
    InformationsquelleAutor RichardOD
  3. 0

    Hier ist eine alternative Lösung, die nicht belasten Ihre Daten raster Inhalt. Schicht eine Leinwand, auf der Oberseite des DataGrid, und in diesem Canvas-Bereich eine Linie gezogen werden kann, Links und rechts. Wenn gezogen, es aktualisiert die gewünschte Spaltenbreite.

    XAML:

    <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <DataGrid x:Name="grid" Grid.Row="0" /> <!-- This is your data grid -->
    <Canvas Grid.Row="0"> <!-- Canvas layerd over data grid -->
        <Line StrokeThickness="4" Stroke="Transparent" Cursor="SizeWE"
              X1="{Binding Columns[0].ActualWidth, ElementName=grid}"
              X2="{Binding X1, RelativeSource={RelativeSource Self}}"
              Y2="{Binding ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Canvas}}}"
              MouseLeftButtonDown="OnSplitLineMouseLeftButtonDown"
              MouseLeftButtonUp="OnSplitLineMouseLeftButtonUp"
              MouseMove="OnSplitLineMouseMove"/>
    </Canvas>
</Grid>

    C# - code-behind:

    #region SplitBarHandling
bool splitBarDragging = false;
double splitBarMouseLastX = 0;
private void OnSplitLineMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    e.Handled = true;
    splitBarDragging = true;
    splitBarMouseLastX = e.GetPosition(null).X;
    ((UIElement)sender).CaptureMouse();
}

private void OnSplitLineMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    e.Handled = true;
    splitBarDragging = false;
    ((UIElement)sender).ReleaseMouseCapture();
}

private void OnSplitLineMouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    if (splitBarDragging)
    {
        e.Handled = true;
        double newX = e.GetPosition(null).X;
        grid.Columns[0].Width = grid.Columns[0].ActualWidth + (newX - splitBarMouseLastX);
        splitBarMouseLastX = newX;
    }
}
#endregion

    Hinweis habe ich mich entschieden, die Linie durchsichtig, so dass der Letzte Benutzer nicht sehen. Das ist, weil ich schon auf die Daten zurückgreifen raster selbst zu zeigen, die vertikalen Linien zwischen den Spalten.
    Sie können auch wählen Sie die Linienstärke auf was auch immer Sie suchen, um benutzerfreundlich sein, ohne das layout der grid-Zellen. Ich wählte 4, da es macht es einfach, um die Abholung, obwohl das datagrid stellt die vertikale Rasterlinie als 1-pixel-Breite.

    Den Beispiel-code stammt aus meinem custom "PropertyGrid" - Steuerelement code-Basis, die hat nur zwei Spalten, also die hart-codierte Spalte 0. Für weitere Verallgemeinerung, würde ich diesen in eine angehängte Verhalten mit Unterstützung für so viele Spalten benötigt, oder sub-Klasse DataGrid selbst.

    Im Vergleich zur vorherigen Lösung, dieser fügt nur ein paar WPF-Elemente unterstützen, das Verhalten, unabhängig davon, wie viele Daten-grid-Zeilen, die Sie haben, so könnte es effizienter und skalierbar auf große Datenmengen.

    InformationsquelleAutor Wessam Bahnassi
Schreibe einen Kommentar