Determine the layout position of an element using the LayoutInformation

Posted on by coder
image_pdfimage_print


   
  


<Window  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="layout_information.Window1"
    Title="LayoutInformation Sample">
    <Border Margin="5" HorizontalAlignment="Left" VerticalAlignment="Top">
      <Grid Name="myGrid" Height="150">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Name="txt1" Margin="5" Grid.Column="0" Grid.Row="0">Hello World!</TextBlock>
        <Button Click="ShowLayoutSlot" Width="125" Height="25" Grid.Column="0" Grid.Row="1">Show Bounding Box</Button>

      </Grid>
  </Border>  
</Window>

//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;

namespace layout_information
{
  public partial class Window1 : Window
  {
        public void ShowLayoutSlot(object sender, System.Windows.RoutedEventArgs e)
        {
            RectangleGeometry myRectangleGeometry = new RectangleGeometry();
            myRectangleGeometry.Rect = LayoutInformation.GetLayoutSlot(txt1);
            
            GeometryDrawing myGeometryDrawing = new GeometryDrawing();
            Path myPath = new Path();
            myPath.Data = myRectangleGeometry;

            myPath.Stroke = Brushes.LightGoldenrodYellow;
            myPath.StrokeThickness = 1;
            Grid.SetColumn(myPath, 0);
            Grid.SetRow(myPath, 0);
            myGrid.Children.Add(myPath);
            
            Console.WriteLine(LayoutInformation.GetLayoutSlot(txt1).ToString());
        }
  }
}

Origin in center. Y increases going down

Posted on by coder
image_pdfimage_print


   
    
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Resources>
        <Style TargetType="{x:Type Canvas}">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="100" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

        <Style TargetType="{x:Type Path}">
            <Setter Property="Fill" Value="Red" />
            <Setter Property="Data">
                <Setter.Value>
                    <EllipseGeometry Center="0 0" RadiusX="5" RadiusY="5" />
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>


    <Canvas Grid.Column="2">
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="1" />
                <TranslateTransform X="50" Y="50" />
            </TransformGroup>
        </Canvas.RenderTransform>

        <Line X1="0" Y1="0" X2="50" Y2="50" Stroke="Black" />
        <Polyline Points="-50 -50 50 -50 50 50 -50 50 -50 -50" Stroke="Blue" />
        <Path />
    </Canvas>

</Grid>

Draws a diagonal line from (10,10) to (50,50) and moves it 100 pixels to the right

Posted on by coder
image_pdfimage_print


   
    
         
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Microsoft.Samples.Graphics.RectangleExample"
    WindowTitle="Example">
  <Canvas>
    <Line
      X1="10" Y1="10"
      X2="50" Y2="50"
      StrokeThickness="4"
      Canvas.Left="100">
      <Line.Stroke>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
          <RadialGradientBrush.GradientStops>
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="Blue" Offset="0.25" />
          </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
      </Line.Stroke>
    </Line>

  </Canvas>
</Page>

Draw a Grid

Posted on by coder
image_pdfimage_print


   
    

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas.Resources>
        <Style x:Key="base" TargetType="Line">
            <Setter Property="Stroke" Value="Blue" />
        </Style>

        <Style x:Key="horz" TargetType="Line"
               BasedOn="{StaticResource base}">
            <Setter Property="X1" Value="100" />
            <Setter Property="X2" Value="300" />
            <Setter Property="Y2" Value="{Binding RelativeSource={RelativeSource self}, Path=Y1}" />
        </Style>

        <Style x:Key="vert" TargetType="Line" BasedOn="{StaticResource base}">
            <Setter Property="Y1" Value="100" />
            <Setter Property="Y2" Value="300" />
            <Setter Property="X2" Value="{Binding RelativeSource={RelativeSource self}, Path=X1}" />
        </Style>
    </Canvas.Resources>

    <Line Style="{StaticResource horz}" Y1="100" />
    <Line Style="{StaticResource horz}" Y1="125" />
    <Line Style="{StaticResource horz}" Y1="150" />
    <Line Style="{StaticResource horz}" Y1="175" />
    <Line Style="{StaticResource horz}" Y1="200" />
    <Line Style="{StaticResource horz}" Y1="225" />
    <Line Style="{StaticResource horz}" Y1="250" />
    <Line Style="{StaticResource horz}" Y1="275" />
    <Line Style="{StaticResource horz}" Y1="300" />

    <Line Style="{StaticResource vert}" X1="100" />
    <Line Style="{StaticResource vert}" X1="125" />
    <Line Style="{StaticResource vert}" X1="150" />
    <Line Style="{StaticResource vert}" X1="175" />
    <Line Style="{StaticResource vert}" X1="200" />
    <Line Style="{StaticResource vert}" X1="225" />
    <Line Style="{StaticResource vert}" X1="250" />
    <Line Style="{StaticResource vert}" X1="275" />
    <Line Style="{StaticResource vert}" X1="300" />
</Canvas>