CODEWITHSUNDEEP
c#wpfmvvmdatagrid
IgorStack
IgorStack

Reputation: 869

Dynamically align width of WPF DataGrid columns

There is a WPF DataGrid with functionality to dynamically change FontSize on Ctrl+MouseWheel event.
It's implemented using Caliburn's cal:Message.Attach functionality: 

<!-- xaml -->
cal:Message.Attach="[Event PreviewMouseWheel] = [Action ChangeDataGridFont($eventArgs)]"

C# ViewModel:

public void ChangeDataGridFont(MouseWheelEventArgs args)
{
    if (Keyboard.Modifiers == ModifierKeys.Control && args != null)
    {
        DataGridFontSize += Math.Sign(args.Delta) * 2;
        args.Handled = true;
    }
}

DataGridFontSize is a VM property that is bound to CellStyle of DataGrid.

Upon load widths of columns are aligned with content - Ok:
enter image description here

If user increases font size then columns width automatically adjusted - Ok:
enter image description here

However when font size is decreased - columns are not adjusted. See white spaces:
enter image description here

Is there any way to overcome this effect (in scope of MvvM, if possible)?

Update: looks like we need to update Columns width manually when we change FontSize. I can bind Width of column in corresponding Style: 

<Style x:Key="IdCellStyle" TargetType="{x:Type DataGridCell}" >
    <Setter Property="Width" Value="{Binding DataContext.ColWidth, Mode=TwoWay, 
                                    RelativeSource={RelativeSource AncestorType=UserControl}}" />
    ....
</Style>

And define property: 

public double ColWidth
{
    get => _colWidth;
    set
    {
        _colWidth = value;
        NotifyOfPropertyChange();
    }
}

What should I set ColWidth to in DataGridFontSize setter?

Upvotes: 0

Views: 1142

Answers (1)

Abin
Abin

Reputation: 2956

I just added the Width for the DataGridColumn looks like that works. Try it out.

enter image description here

<Window.Resources>
    <XmlDataProvider x:Key="MockList"   XPath="/MockObjects/*" >
        <x:XData >
            <MockObjects xmlns="">
                <MockObject  Name="Louis" Type="TTTT" Number="1" />
                <MockObject Name="Joseph" Type="TTTT" Number="2" />
                <MockObject Name="Papineau" Type="ZZZZ" Number="3" />
            </MockObjects>
        </x:XData>
    </XmlDataProvider>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource MockList}}" >
    <DataGrid HorizontalAlignment="Stretch" Margin="10" VerticalAlignment="Stretch" 
              ItemsSource="{Binding Mode=Default, XPath=/MockObjects/MockObject}" 
              AutoGenerateColumns="False" PreviewMouseWheel="UIElement_OnPreviewMouseWheel">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Name" Binding="{Binding XPath=@Name}" Width="*"></DataGridTextColumn>
            <DataGridTextColumn Header="Type" Binding="{Binding XPath=@Type}" Width="*"></DataGridTextColumn>
            <DataGridTextColumn Header="Number" Binding="{Binding XPath=@Number}" Width="*"></DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

Upvotes: 2

Related Questions