WPF TextBox - how to stop width change with value

Question

I have a problem setting my TextBox exactly as I need. I was reading similar questions here, but none of them have same requirements as me.

Basicaly I need text box with some MaxWidth to always try to fit the MaxWidth property. If user changes size of the window, it should shrink if needed, or grow up to the MaxWidth. But at the same time, I need it to be alignet to the left, to create this look:

But when I set HorizontalAlignment to "Left" - the text box change width based on inner value. When I set HorizontalAlignment to "Stretch" - then the text box is in middle of the screen, not by left side next to the buttons.

I need some combination of these two properties, but I have no idea how I should do it.

I do not use GridColumns as my layout, as there are other problems, thanks to which I am not able to create my desired result.

Here is example of my ButtonEdit - which is TextBox with buttons:

 <dxe:ButtonEdit 
        x:Name="SearchPanel"
        Margin="52,4,0,0"            
        HorizontalAlignment="Left"       
        VerticalAlignment="Top"      
        NullText="Zadejte hledaný text.."
        Height="23" MaxWidth="200" AllowDefaultButton="False"
        Grid.Row="0">
        <dxe:ButtonEdit.Buttons>
            <dxe:ButtonInfo
                ...
            </dxe:ButtonInfo>
            <dxe:ButtonInfo
                ...
            </dxe:ButtonInfo>
        </dxe:ButtonEdit.Buttons>
    </dxe:ButtonEdit>

Can someone help me please?

Thank you.

Magnus · Answer 1 · 2021-11-28T12:19:29.983

You should be able to use the solution in https://stackoverflow.com/a/280402/19496 and wrap it in a single cell grid with a max column width.

That is, something like this:

<Grid Grid.Row="0" VerticalAlignment="Top">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" MaxWidth="200"/>
    </Grid.ColumnDefinitions>    
    <dxe:ButtonEdit 
        x:Name="SearchPanel"
        Margin="52,4,0,0"
        NullText="Zadejte hledaný text.."
        Height="23" AllowDefaultButton="False">
        <dxe:ButtonEdit.Buttons>
            <dxe:ButtonInfo
                ...
            </dxe:ButtonInfo>
            <dxe:ButtonInfo
                ...
            </dxe:ButtonInfo>
        </dxe:ButtonEdit.Buttons>
    </dxe:ButtonEdit>
</Grid>

The problem is that HorizontalAlignment="Stretch" always implies centering for a control (as far as I know). Doesn't matter most of the time, except, e.g., when combined with MaxWidth.

A Grid column behaves slightly different and stays left aligned in the grid even when told to take up all available space (i.e., stretch) with Width="*".

Thank you for answer, but that was not the trick, I would need to use 3 colums to create view as shown in question, but then it is impossible to make 2 auto width columns and both of them different size. The trick was to calculate actual width of the control in runtime, by bindings. — David Bašta, Nov 29 '21 at 07:05
Ok, good you got it to work. To clarify, the grid that wraps the ButtonEdit must be single cell, and then put as a whole in one of the three columns in your parent grid (or in a DockPanel or whatever parent panel you are using). You can't add columns to the wrapping grid directly, that won't work. — Magnus, Nov 29 '21 at 17:10

score 0 · Accepted Answer · answered Nov 29 '21 at 07:08

Ok, I managed to solve this, the trick is to calculate With in runtime using bindings. As I use DevExpress controls, this is the solution:

Width="{DXBinding '@a($Grid).ActualWidth - 50'}"

Or without DevExpress - this should work too:

{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}, Converter={local:WidthConverter}}

WPF TextBox - how to stop width change with value

2 Answers2