Datagrid horizontal scrolling hides the content in WPF

I've tried to implement Zoom functionality in WPF application. While zooming, it should not affect default scrollviewer DataGrid. So, i used LayoutTransform in DataGridRow.

    <DataGrid Grid.Row="0" HeadersVisibility="None" SelectionMode="Extended" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Loaded="DataGrid_Loaded">
        <DataGrid.RowStyle>
            <Style TargetType="DataGridRow">
                <Setter Property="LayoutTransform">
                    <Setter.Value>
                        <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}" ScaleY="{Binding ElementName=slider, Path=Value}"/>
                    </Setter.Value>
                </Setter>
            </Style>
        </DataGrid.RowStyle>
    </DataGrid>
    <Slider Grid.Row="1" Minimum="0.5" Maximum="4" Value="1" Name="slider"/>

But, this code hides the DataGrid content after zoom and used Horizontal scrollviewer.

Before/After Zoom and scroll the Horizontal Scroll

And then, tried with Style for DataGridCell but the issue not resolved.

    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}" ScaleY="{Binding ElementName=slider, Path=Value}"/>
                </Setter.Value>
            </Setter>
        </Style>
    </DataGrid.CellStyle>

Did I missed any handling for this row elements hiding? Anyone please guide with this issue.

Updated for Full Code:

MainWindow.XAML:

<Window x:Class="DatagridSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="600">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>
        <DataGrid Grid.Row="0" HeadersVisibility="None" SelectionMode="Extended" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Loaded="DataGrid_Loaded">
            <DataGrid.RowStyle>
                <Style TargetType="DataGridRow">
                    <Setter Property="LayoutTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="{Binding ElementName=slider, Path=Value}" ScaleY="{Binding ElementName=slider, Path=Value}"/>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.RowStyle>
        </DataGrid>
        <Slider Grid.Row="1" Minimum="0.5" Maximum="4" Value="1" Name="slider"/>
    </Grid>
</Window>

MainWindow.xaml.cs:

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace DatagridSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void DataGrid_Loaded(object sender, RoutedEventArgs e)
        {
            var items = new List<Dog>();
            items.Add(new Dog("Fido", 10));
            int count = 25;

            while(count != 0)
            {
                items.Add(new Dog("Spark", 20));
                count--;
            }
            (sender as DataGrid).ItemsSource = items;
        }
    }

    class Dog
    {
        public string Name { get; set; }
        public string Name1 { get { return Name; } }
        public string Name2 { get { return Name; } }
        public string Name3 { get { return Name; } }
        public string Name4 { get { return Name; } }
        public string Name5 { get { return Name; } }
        public string Name6 { get { return Name; } }
        public string Name7 { get { return Name; } }
        public string Name8 { get { return Name; } }
        public string Name9 { get { return Name; } }
        public string Name10 { get { return Name; } }
        public string Name11 { get { return Name; } }
        public int Size { get; set; }

        public Dog(string name, int size)
        {
            this.Name = name;
            this.Size = size;
        }
    }
}

1 answer

  • answered 2020-06-02 09:57 Niklas

    Add the ScaleTransform to the parent of the DataGrid i.e. Grid. The best solution would be to add the transform on the MainWindow, since you want to zoom in the whole application and not just the DataGrid