Xceed Toolkit Plus for WPF v5.0 Documentation
Xceed.Wpf.Toolkit Assembly / Xceed.Wpf.Toolkit.Panels Namespace / RelativeCanvas Class
Members Example


In This Topic
    RelativeCanvas Class
    In This Topic
    A Panel which is similar to Canvas but it lays out its children relative to the panel's height and width.
    Syntax
    'Declaration
     
    <LocalizabilityAttribute(LocalizationCategory.Ignore)>
    <ContentPropertyAttribute("Children")>
    <StyleTypedPropertyAttribute(Property="FocusVisualStyle", StyleTargetType=System.Windows.Controls.Control)>
    <XmlLangPropertyAttribute("Language")>
    <UsableDuringInitializationAttribute(True)>
    <RuntimeNamePropertyAttribute("Name")>
    <UidPropertyAttribute("Uid")>
    <TypeDescriptionProviderAttribute(MS.Internal.ComponentModel.DependencyObjectProvider)>
    <NameScopePropertyAttribute("NameScope", System.Windows.NameScope)>
    Public Class RelativeCanvas 
       Inherits AnimationPanel
    'Usage
     
    Dim instance As RelativeCanvas
    [Localizability(LocalizationCategory.Ignore)]
    [ContentProperty("Children")]
    [StyleTypedProperty(Property="FocusVisualStyle", StyleTargetType=System.Windows.Controls.Control)]
    [XmlLangProperty("Language")]
    [UsableDuringInitialization(true)]
    [RuntimeNameProperty("Name")]
    [UidProperty("Uid")]
    [TypeDescriptionProvider(MS.Internal.ComponentModel.DependencyObjectProvider)]
    [NameScopeProperty("NameScope", System.Windows.NameScope)]
    public class RelativeCanvas : AnimationPanel 
    Remarks

    Items in a RelativeCanvas are placed relative to the RelativeCanvas itself. The following attached properties each have their use:

    • RelativeCanvas.Left (value >= 0): used to indicate where to place the item from left to right.
      • 0 = Extreme left
      • 1 = Extreme right
    • RelativeCanvas.Top (value >= 0): used to indicate where to place the item from top to bottom.
      • 0 = Complete top
      • 1 = Complete bottom
    • RelativeCanvas.RelativeWidth (value >= 0): used to indicate the width of the element relative to the width of the RelativeCanvas.
      • ex: a value of 0.5 will indicate that the element's width must be half the width of the RelativeCanvas
    • RelativeCanvas.RelativeHeight (value >= 0): used to indicate the height of the element relative to the height of the RelativeCanvas.
      • ex: a value of 0.5 will indicate that the element's height must be half the height of the RelativeCanvas
    • RelativeCanvas.PinPoint: reference point from which the other properties/characteristics will be calculated.
      • (0,0) -> Top left corner
      • (1,0) -> Top right corner
      • (0,1) -> Bottom left corner
      • (1,1) -> Bottom right corner

    This means that the attached properties RelativeCanvas.RelativeWidth and RelativeCanvas.RelativeHeight must be set on the elements that should have a size relative to the size of the RelativeCanvas.

    For elements that should have a fixed size, assign a value to FrameworkElement.Width and/or FrameworkElement.Height.

    For elements that should have a size in function of their content, do not specify anything.

    Example
    <Window x:Class="RadialCanvasSample.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
            Title="RadialCanvasSample">
      <Grid>
        <xctk:RelativeCanvas>
          <Button Content="First"
                  Width="100"
                  Height="20"
                  xctk:RelativeCanvas.Left="0"
                  xctk:RelativeCanvas.Top="0"
                  xctk:RelativeCanvas.PinPoint="0,0"/>
          <Button Content="Second"
                  Width="100"
                  Height="20"
                  xctk:RelativeCanvas.Left="0.2"
                  xctk:RelativeCanvas.Top="0.5"
                  xctk:RelativeCanvas.PinPoint="0,0"/>
          <Button Content="Third"
                  Width="100"
                  Height="20"
                  xctk:RelativeCanvas.Left="0.8"
                  xctk:RelativeCanvas.Top="0.5"
                  xctk:RelativeCanvas.PinPoint="0,0"/>
        </xctk:RelativeCanvas>
      </Grid>
    </Window>
    Inheritance Hierarchy

    System.Object
       System.Windows.Threading.DispatcherObject
          System.Windows.DependencyObject
             System.Windows.Media.Visual
                System.Windows.UIElement
                   System.Windows.FrameworkElement
                      System.Windows.Controls.Panel
                         Xceed.Wpf.Toolkit.Panels.PanelBase
                            Xceed.Wpf.Toolkit.Panels.AnimationPanel
                               Xceed.Wpf.Toolkit.Panels.RelativeCanvas

    Requirements

    Target Platforms: Windows 11, Windows 10, Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

    See Also