CODEWITHSUNDEEP
c#.netwpfxaml
lvlack
lvlack

Reputation: 61

WPF use grid as background

Currently, I can create a grid tag which contain background image and kinect photo (both are image tags).

<Grid Name="CompositeImage">
    <Image Source="bg.png" Strech="Fill" HorizontalAlignment="Strech" VerticalAlignment="Strech"/>
    <Image Source="{Binding kinectPhoto}" Strech="UniformToFill"  HorizontalAlignment="Strech" VerticalAlignment="Strech"/>
</Grid>

But for now, I want to use this grid as background but I can't use it under background tag. Like this

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="15*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Width="3*"/>
        <RowDefinition Width="8*"/>
        <RowDefinition Width="3*"/>
    </Grid.RowDefinitions>

    <Grid.Background>
        <Grid Name="CompositeImage"> ... same as above ... </Grid>
    </Grid.Background>

    <!-- other components -->
</Grid>

Is there any solutions to make Grid CompositeImage as background or make it fit the outer grid?

Upvotes: 1

Views: 256

Answers (3)

Clemens
Clemens

Reputation: 128061

You could just let the "background" grid span all rows and columns by setting the Grid.RowSpan and Grid.ColumnSpan properties:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="15*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Width="3*"/>
        <RowDefinition Width="8*"/>
        <RowDefinition Width="3*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="CompositeImage" Grid.ColumnSpan="3" Grid.RowSpan="3">
        ...
    </Grid>

    <!-- other components -->
</Grid>

Upvotes: 1

quetzalcoatl
quetzalcoatl

Reputation: 33516

If you really want to use it as Background, then please note that this property takes a Brush.

You can build a VisualBrush that will be rendering your grid-with-images, and then use such brush as background.

However, I think all you wanted is to use it as "a background" (not as The Background), and in this case just put it into target Grid, then "maximize it" (colspan=xxxx rowspan=xxx horizontal=stretch vertical=stretch) and move it "backwards" (zindex=somelowvalue or just place it as the first child of the Grid)

Upvotes: 0

StillLearnin
StillLearnin

Reputation: 1499

What you actually did is named two grids the same name CompositeImage. What you want to do is this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="15*"/>
        <ColumnDefinition Width="3*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Width="3*"/>
        <RowDefinition Width="8*"/>
        <RowDefinition Width="3*"/>
    </Grid.RowDefinitions>

    <Grid.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <Grid>
                    <Image Source="bg.png" Strech="Fill" HorizontalAlignment="Strech" VerticalAlignment="Strech"/>
                    <Image Source="{Binding kinectPhoto}" Strech="UniformToFill"  HorizontalAlignment="Strech" VerticalAlignment="Strech"/>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.Background>

    <!-- other components -->
</Grid>

Upvotes: 0

Related Questions