CODEWITHSUNDEEP
wpfxaml
netmajor
netmajor

Reputation: 6585

Stackpanel overlap image

I have a Grid configured with columns. In first column I have an Image, in second StackPanel with TextBlocks, and in the rest columns other TextBlocks.

When I run app I see Image and this others TextBlocks. The problem is that StackPanel overlaps on Image (TextBlock's content appears over Image) and part of content appears under other columns in Grid. I add MinWidth to Image and Stackpanel but it did not solve the problem :/
It looks like the Image doesn't have width, so StackPanel overlaps it, and StackPanel also doesn't have enough width so it hides under other columns.

Example, all TextBlocks are bound to data source: 

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25" MinWidth="25" />
        <ColumnDefinition Width="120" MinWidth="120" />
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="50" />
    </Grid.ColumnDefinitions>

    <Image Grid.Column="0" />
    <StackPanel Grid.Column="1" Orientation="Horizontal">
        <Textblock />
        <TextBlock />
    </StackPanel>
    <TextBlock Grid.Column="2" />
    <TextBlock Grid.Column="3" />
</Grid>

Upvotes: 0

Views: 896

Answers (1)

Stewbob
Stewbob

Reputation: 16899

You have declared columns with a fixed width. It seems apparent that your content in those columns is wider than the column widths that you have declared.

Adding MinWidth to the Image and StackPanel will not help in this case. You would need to set the MaxWidth of those two items to prevent them from being wider than the declared column widths.

Setting fixed column widths defeats one of the purposes of using WPF in the first place. WPF, when implemented properly will allow your user interface to scale nicely when the window size changes.

Shown below are column definitions that would be more appropriate for WPF:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="4.8*"/>
    <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>

The values shown above for column width will give the same ratio of widths as the fixed values in your example, but they are scalable when the window size changes.

Upvotes: 1

Related Questions