CODEWITHSUNDEEP
wpflayoutresizewidth
Ed Pavlov
Ed Pavlov

Reputation: 2508

Need tricky Wpf layout

Layout illustration

I need a layout that when I decrease window width by moving it's right edge, firstly gray part's width decreasing to 0, and only after that white part's width decreasing starts. I tried to do it using DockPanel and Grid but without success.

UPDATE: The width of the white part depends on user data and cannot be fixed.

Upvotes: 1

Views: 66

Answers (2)

Novitchi S
Novitchi S

Reputation: 3741

The last element in a DockPanel will span to available space. Not so tricky after all.

<Grid Background="LightGray">
    <DockPanel Background="White" HorizontalAlignment="Left">
        <TextBlock Text="Element 1"/>
        <TextBlock Text="Element 2"/>
        <TextBlock DockPanel.Dock="Right" Text="Element N" MinWidth="100"/>
        <TextBlock Text="Element with variable width, can be less than text"/>
    </DockPanel>
</Grid>

Upvotes: 1

Mike Eason
Mike Eason

Reputation: 9713

You could set a fixed width on the white part, and set the grey part to a dynamic width.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="500"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    ...
</Grid>

This however will not dynamically resize the first column's width when the width of the Window becomes less than 500. Perhaps not the most elegant solution, but it's a start.

Upvotes: 0

Related Questions