如何使网格在用户拉伸范围内更改其高度和背景图片？

Question

I am doing a project in WPF (Custom windows). So I am facing one question. In the main window I have border, dock panel and 2 grids. It is vertical app and the user needs to stretch the app from the bottom. How do I make the grid to change its height and its background picture within user s stretching?[enter image description here][1] For example, from 270x1 to 270x330 by simple dragging the bottom to the down.[enter image description here][1]

<Grid Width="270" Margin="4,2,0.5,0" Height="588" HorizontalAlignment="Stretch" VerticalAlignment="Top">
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" MinHeight="30"/>
        <RowDefinition Height="auto" MinHeight="558"/>
    </Grid.RowDefinitions>
    <Grid.Background>
        <ImageBrush/>
    </Grid.Background>


    <Border x:Name="MainBorder" HorizontalAlignment="Left" Height="40" VerticalAlignment="Top" Width="270" Grid.RowSpan="2" MouseLeftButtonDown="MainBorder_MouseLeftButtonDown">
        <Border.Background>
            <ImageBrush ImageSource="atopbg.png"/>
        </Border.Background>
    </Border>

    <Button x:Name="buttonclose" Content="" HorizontalAlignment="Left" Margin="243,10,0,0" VerticalAlignment="Top" Width="18" Height="18" Click="buttonclose_Click" BorderBrush="#FFDEECF2">
        <Button.Background>
            <ImageBrush ImageSource="close.png"/>
        </Button.Background>
    </Button>
    <Button x:Name="buttonhide" Content="" HorizontalAlignment="Left" Margin="220,10,0,0" VerticalAlignment="Top" Width="18" Height="18" Click="buttonhide_Click" BorderBrush="#FFE6EDF1">
        <Button.Background>
            <ImageBrush ImageSource="collapse.png"/>
        </Button.Background>
    </Button>
    <Button x:Name="buttonsettings" HorizontalAlignment="Left" Margin="197,10,0,0" VerticalAlignment="Top" Width="18" Height="18" BorderBrush="#FFEBF0F3" Click="buttonsettings_Click">
        <Button.Background>
            <ImageBrush ImageSource="settings.png"/>
        </Button.Background>
    </Button>
    <Label x:Name="label" HorizontalAlignment="Left" Margin="172,46,0,0" VerticalAlignment="Top" Grid.Row="1" Height="10" Width="10">
        <Label.Background>
            <ImageBrush/>
        </Label.Background>
    </Label>
    <Label x:Name="label1" Content="" HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Width="84" Height="29">
        <Label.Background>
            <ImageBrush ImageSource="logo.png"/>
        </Label.Background>
    </Label>
    <Grid HorizontalAlignment="Left" Height="86" Margin="0,472,0,0" VerticalAlignment="Top" Width="270" Grid.Row="1">
        <Grid.Background>
            <ImageBrush ImageSource="botbg.png" Stretch="Uniform"/>
        </Grid.Background>
    </Grid>
    <DockPanel HorizontalAlignment="Left" Height="140" Margin="0,2,0,0" Grid.Row="1" VerticalAlignment="Top" Width="270">
        <DockPanel.Background>
            <ImageBrush ImageSource="btopbg.png"/>
        </DockPanel.Background>
    </DockPanel>
    <GridSplitter x:Name="gridSplitter" HorizontalAlignment="Left" Height="330" Margin="0,142,0,0" Grid.Row="1" VerticalAlignment="Top" Width="270" ResizeDirection="Rows" DragDelta="gridSplitter_DragDelta" ResizeBehavior="PreviousAndCurrent">
        <GridSplitter.Background>
            <ImageBrush ImageSource="midbg.png"/>
        </GridSplitter.Background>
    </GridSplitter>

</Grid>

`

PS It`s my first serious project:3

Answer 1

Firstly, I have to comment that your way of coding this is quite messy. You are overlapping many different controls into a single Grid row. I figured out you used the "drag and drop" feature, which I guess is fine for beginners.

Now to more serious topic. When you do this:

    <RowDefinition Height="auto" MinHeight="30"/>
    <RowDefinition Height="auto" MinHeight="558"/>

Having all row definitions specifying auto as height, you are telling Grid to resize itself to fit all the contents. If you want this outer Grid to fit to screen size (I presume?), then you need to have at least one row definition that is of * unit. Each unit * means that it will take one portion of all the available spaces left after all the auto contents have occupied.

Tell us more about what you want. Be specific. You have already given codes, so we know the names of controls. Instead of saying "Grid" and "background", tell us which one - because your codes show many instances of them.