WPF xaml controls within a canvas not having a canvas.right property

Question

So I'm making an app for windows 8 (hopefully can be easily ported to windows 10 too) in C#/XAML and am having some issues when it comes to the UI, specifically when it comes to canvases. One of the most prominent features of the app is a large weekly calendar in which I need to place objects.

In the coding of the app I need these things to be able to move around a grid and change heights. In testing I performed this with basic solid rectangles. This was easy enough though they look ugly. I have two designs of which to use instead (made in an image editor), shown in this image http://imgur.com/N5Jv16z.

Ideally I would be able to use the second in that image, though it's proving to be difficult. For the first I just use a border with a translucent background colour and then have a solid rectangle on the left. This would work for the second option as well if borders allowed two children.

So I found the canvas control (which I have never used before) and tried to get that to work as it seemed the most promising, though I encountered a major issue: it has no right alignment option for child controls. Msdn says that it should be there, it is not. I get errors when I type canvas.right="5" in xaml as it says this property does not exist. Added to this fact, it seems that the canvas doesn't actually have an edge. I can have that second rectangle way beyond the right edge of the canvas and it still shows up such as this image where canvas.left of the small square was given 250: http://imgur.com/S46yMhU.

As the size of each column in the large grid is done using proportions, the canvas itself will have a variable width so I can't just give the second rectangle a canvas.left property as that only works in discrete pixels. I also need to have these rectangles go the full height of the canvas as using the code behind I only want to have to manipulate the parent object, but having it stretch vertically doesn't work for similar reasons as there not being a "bottom" to the canvas.

If it matters here is the xaml code I'm dealing with (extra stuff taken out):

<Grid x:Name="tableGrid" HorizontalAlignment="Stretch" Margin="0,50,0,0" Grid.Row="1" VerticalAlignment="Stretch" Grid.Column="1">

    <Canvas Grid.Column="3" Height="100" Margin="1,1,2,2" Grid.Row="5" Grid.RowSpan="40" VerticalAlignment="Top" Background="#66104A7C">
        <Rectangle Fill="#FF104A7C" HorizontalAlignment="Left" Width="5" Height="50"/>
        <Rectangle Fill="#FF104A7C" HorizontalAlignment="Left" Width="5" Height="50" Canvas.Left="250" Margin="0,0,5,0"/>
    </Canvas>

</Grid>

Is there any fixable reason why I do not have a canvas.right property as it seems that it would simplify everything. Setting the alignment of the rectangle in the canvas doesn't do anything. Maybe another control would be better than canvas? I've tried stackpanel with three rectangles (middle one being translucent) but I can't get it to change widths correctly. Any ideas?

Glen Thomas Glen Thomas · Accepted Answer · 2015-07-28T23:17:42

I think you would better off using a Grid control with columns and rows to create the days grid pattern.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/> <!--Sunday-->
        <ColumnDefinition/> <!--Monday-->
        <ColumnDefinition/> <!--Tuesday-->
        <ColumnDefinition/> <!--Wednesday-->
        <ColumnDefinition/> <!--Thursday-->
        <ColumnDefinition/> <!--Friday-->
        <ColumnDefinition/> <!--Saturday-->
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/> <!--Week1-->
        <RowDefinition/> <!--Week2-->
        <RowDefinition/> <!--Week3-->
        <RowDefinition/> <!--Week4-->
        <RowDefinition/> <!--Week5-->
    </Grid.RowDefinitions>
<Grid>

WPF xaml controls within a canvas not having a canvas.right property

1 Answers