locked
Canvas in a Canvas: Right? RRS feed

  • Question

  • Hello I have a canvas in another canvas. How can I align that canvas, so it is always on the right side of the root canvas? I've tried HorizontalAlignment="Right", but that is not doing what I excepted... Thanks
    Saturday, October 10, 2009 6:31 PM

Answers

  • The canvas is meant for absolute positioning of elements.  A grid might be a better way to go. 

    Exactly. If you are using Canvas to hold a different Canvas, you won't able to align the child canvas on the parent canvas as it uses absolute positioning. Rather, just convert the parent canvas to Grid, which will solve your problem.  :)
    Monday, October 12, 2009 5:19 AM
  • You can make this by using grid or dockpanel as the root.

    Grid:

       <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Canvas Grid.Column="1" Name="canvas1" />
       </Grid>

    DockPanel:

        <DockPanel>
           <Canvas DockPanel.Dock="Right" Name="canvas1" />
        </DockPanel>


    Tuesday, October 13, 2009 7:18 AM

All replies

  • Put it in a Grid

    Saturday, October 10, 2009 10:25 PM
  • Hi Dumdidum,

    The canvas is meant for absolute positioning of elements.  A grid might be a better way to go. 

    You can set the Canvas.Left property on top canvas to position it at the right side of the root canvas.  If the width of your root canvas can be resized however you'll have to update the Canvas.Left property of the top canvas.  Here's an example:

     

    <Grid x:Name="LayoutRoot" Width="Auto" Height="600" Background="Black">
            <Canvas Width="Auto" SizeChanged="BaseCanvas_SizeChanged" Height="500" Background="AliceBlue" x:Name="BaseCanvas">
                <Canvas Width="200" Background="Red" Height="300" x:Name="TopCanvas"></Canvas>
            </Canvas>
        </Grid>
      
     private void BaseCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                Double width = BaseCanvas.ActualWidth;
                TopCanvas.SetValue(Canvas.LeftProperty, width - 200.0);
            }
     
    Sunday, October 11, 2009 3:43 PM
  • The canvas is meant for absolute positioning of elements.  A grid might be a better way to go. 

    Exactly. If you are using Canvas to hold a different Canvas, you won't able to align the child canvas on the parent canvas as it uses absolute positioning. Rather, just convert the parent canvas to Grid, which will solve your problem.  :)
    Monday, October 12, 2009 5:19 AM
  • You can make this by using grid or dockpanel as the root.

    Grid:

       <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Canvas Grid.Column="1" Name="canvas1" />
       </Grid>

    DockPanel:

        <DockPanel>
           <Canvas DockPanel.Dock="Right" Name="canvas1" />
        </DockPanel>


    Tuesday, October 13, 2009 7:18 AM
  • If you have to use canvas and also want that child canvas is aligned to right, than you have to adjust that canvas left position in code. here is code sample that might help.

    double ParentWidth= canParent.Width;

    double ChildWidth = canChild.Width;

    canChild.SetValue(Canvas.LeftProperty, ParentWidth-ChildWidth);

     Mark as answer if it helped.

    Tuesday, October 13, 2009 7:31 AM