How to have WPF Grid columns width="*" but also have a dynamic minimum width so content doesn't get cropped

Question

I have a 3 columns in wpf grid which needs to be proportional

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" Background="Yellow"></Border>
    <Border Grid.Column="2" Background="Yellow">
    </Border>
        <Border  Grid.Column="1" Background="Green">
            <Label Content="This is the Green Cell"></Label>
        </Border>
</Grid>

The Result is

The issue is The text in green column is cropped. I can solve the issue by setting MinWidth = "150". But, the green column content will be dynamic, so I can't use value of 150. How can I fix this issue?

kennyzx · Answer 1 · 2017-06-23T04:28:45.930

1

If you want to wrap the text, use TextBlock instead of Label. Label does not support Text Wrapping.

<Border Grid.Column="1" Background="Green">
    <TextBlock TextWrapping="Wrap" Text="This is the Green CellThis is the Green CellThis is the Green CellThis is the Green Cell"/>
</Border>

edited Jun 23 '17 at 04:28

answered Jun 23 '17 at 03:44

kennyzx

12,845
6
39
83

thanks, but my content won't be text in real life and wrapping won't help. Assume, it has to be a single line. Thanks. – prabhat Jun 23 '17 at 12:26
Then you may need to define the 2nd column width as Auto. – kennyzx Jun 23 '17 at 12:31
Well, if I do so I won't be able to expand the green column width. – prabhat Jun 23 '17 at 14:51
Sounds contradictory: it has to take up as much space as possible, but there is no constraint to the other two columns. I would suggest to use databinding and converter, to calculate the width of the 2nd column from the actual width of the content of each column. – kennyzx Jun 23 '17 at 15:17

score 1 · Accepted Answer · answered Jun 23 '17 at 15:44

1

I think this does what you want: The Label is how horizontally aligned inside its border, so it sizes naturally to whatever it wants to be instead of stretching to its parent. I gave it a semi-transparent background so you can see which portion of its parent it actually occupies.

Then we bind Column 1's MinWidth to the ActualWidth of the Label. Column 1 can go as wide as it likes, but it can't get any narrower than the Label.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition 
            Width="2*" 
            MinWidth="{Binding ActualWidth, ElementName=FixedContent}" 
            />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Border Grid.Column="0" Background="Yellow" />
    <Border Grid.Column="2" Background="Yellow" />
    <Border  Grid.Column="1" Background="Green">
        <Label 
            x:Name="FixedContent"
            HorizontalAlignment="Left"
            Content="This is the Green Cell" 
            Background="#882266aa"
            />
    </Border>
</Grid>

answered Jun 23 '17 at 15:44

15ee8f99-57ff-4f92-890c-b56153

36,786
7
62
114

This works, however there's an issue. When i increase width of the window by dragging with mouse, the min width of green column also increases and as a result if I shrink the window again, the green area doesn't shrink to original min width. This is frustrating wpf doesn't have something inbuilt to handle this like in web application – prabhat Jun 26 '17 at 20:05
@Emzi You left out `HorizontalAlignment="Left"` (or RIght or Center) on the content within the green cell. It must be explicitly Left, Right, or Center to prevent what you're describing. – 15ee8f99-57ff-4f92-890c-b56153 Jun 26 '17 at 20:12
@Emzi The Border in column 1 must size proportionally to the grid, but the content *within* that border must be auto-sized, not stretched. If your layout can't work with that requirement, you'll have to do something painful in codebehind. – 15ee8f99-57ff-4f92-890c-b56153 Jun 26 '17 at 20:14
Thanks for your help. I was able to achieve expected result using HorizontalAlingment = "Left" which I missed out. Also I guess, I could use width for 1 and 3rd column to be "Auto". Thanks again! – prabhat Jun 27 '17 at 00:24
I don't know why the same thing doesn't work with telerik gridViewColumn, any suggestion? – prabhat Jun 28 '17 at 01:30
I don't have the Telerik controls so I can't test anything with them, and their GridViewColumn is a very different control from the WPF Grid, but if you show me your actual XAML I might hazard a guess. – 15ee8f99-57ff-4f92-890c-b56153 Jun 28 '17 at 01:32

How to have WPF Grid columns width="*" but also have a dynamic minimum width so content doesn't get cropped

2 Answers2