CODEWITHSUNDEEP
wpf
Johannes Schacht
Johannes Schacht

Reputation: 1334

Placing multiple canvases in a Grid

I want to place several canvases into a grid, each containing an image (and some drawing on top). When I do so, all canvases occupy the same space (almost). Can anyone explain?

This is the XAML:

<Window x:Class="WpfApp4__Various_Tests_.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp4__Various_Tests_"
    Title="MainWindow" Height="300" Width="300"
    x:Name="root">

<Grid Background="Beige" ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Canvas Grid.Column="0">
        <Image Source="nav_plain_blue.ico" />
    </Canvas>
    <Canvas Grid.Column="1">
        <Image Source="nav_plain_blue.ico" />
    </Canvas>
</Grid>

And this is the result:

enter image description here

EDIT: I noticed, when I use Width="*" in the grid both canvases are shown. I still don't understand why it doesn't work with Auto-size.

Upvotes: 0

Views: 246

Answers (1)

mm8
mm8

Reputation: 169200

The Canvas is not resized automatically so you'll have to set its Width property explicitly if you want the column to auto grow:

<Canvas Grid.Column="0" Width="{Binding ActualWidth, ElementName=img}">
    <Image x:Name="img" Source="nav_plain_blue.ico" />
</Canvas>
<Canvas Grid.Column="1" Width="{Binding ActualWidth, ElementName=img2}">
    <Image x:Name="img2" Source="nav_plain_blue.ico" />
</Canvas>

Upvotes: 3

Related Questions