FrameworkElementExtensionsCode.bind

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:common="using:Microsoft.Toolkit.Uwp.SampleApp.Common"
      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

  <StackPanel x:Name="RootGrid" Padding="48">
    <Grid Height="300">
      <Grid.RowDefinitions>
        <RowDefinition MinHeight="100" MaxHeight="300" />
        <RowDefinition Height="11" />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100" MaxWidth="800" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>

      <Rectangle Grid.Column="0"
                 Grid.Row="0"
                 ui:FrameworkElementExtensions.EnableActualSizeBinding="True"
                 Fill="{StaticResource Brush-Brand-Color}"
                 Stroke="{ThemeResource Brush-Grey-04}"
                 x:Name="TargetObject"
                 StrokeThickness="1" />

      <!--Column Grid Splitter-->
      <controls:GridSplitter
        Width="11"
        Background="{ThemeResource Brush-Grey-04}"
        GripperCursor="Default"
        HorizontalAlignment="Left"
        Grid.Column="1"
        ResizeDirection="Auto"
        ResizeBehavior="BasedOnAlignment"
        CursorBehavior="ChangeOnGripperHover"
        GripperForeground="{ThemeResource Brush-Alt}">
      </controls:GridSplitter>

      <!--Row Grid Splitter-->
      <controls:GridSplitter
        Grid.Row="1"
        Background="{ThemeResource Brush-Grey-04}" Height="11"
        HorizontalAlignment="Stretch">
        <controls:GridSplitter.Element>
          <Grid>
            <TextBlock HorizontalAlignment="Center"
                       IsHitTestVisible="False"
                       VerticalAlignment="Center"
                       Text="&#xE76F;"
                       Foreground="{ThemeResource Brush-Alt}"
                       FontFamily="Segoe MDL2 Assets"/>
          </Grid>
        </controls:GridSplitter.Element>
      </controls:GridSplitter>
    </Grid>

    <TextBlock Grid.Column="1"
           TextWrapping="Wrap"
           Margin="12,12">
      Drag the handles to see how values are updated in the row below.
      <LineBreak />
      If EnableActualSizeBinding is set to false, the binding will not be updated.
      <LineBreak />
      Red rectangle is bound to ActualHeight and ActualWidth, so it won't be updated.
      <LineBreak />
      Blue rectangle is bound to the new bindable properties, so it will be updated.
    </TextBlock>

    <Rectangle Margin="12,12"
               HorizontalAlignment="Left"
               Height="{Binding ElementName=TargetObject, Path=ActualHeight}"
               Width="{Binding ElementName=TargetObject, Path=ActualWidth}"
               Fill="{StaticResource Brush-Red}"
               Stroke="{ThemeResource Brush-Grey-04}"
               StrokeThickness="1" />

    <Rectangle Margin="12,12"
               HorizontalAlignment="Left"
               Height="{Binding ElementName=TargetObject, Path=(ui:FrameworkElementExtensions.ActualHeight)}"
               Width="{Binding ElementName=TargetObject, Path=(ui:FrameworkElementExtensions.ActualWidth)}"
               Fill="{ThemeResource Brush-Blue-01}"
               Stroke="{ThemeResource Brush-Grey-04}"
               StrokeThickness="1" />

    <Border Width="200"
            Height="200"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            ui:FrameworkElementExtensions.CanDragElement="True"
            ui:FrameworkElementExtensions.ConstrainDragToParentBounds="True"
            Background="DeepSkyBlue">
        <TextBlock Text="You can drag this element with the mouse"
                   TextWrapping="Wrap" />
    </Border>

    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup>
        <VisualState x:Name="Full">
          <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="600" />
          </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="Small">
          <VisualState.StateTriggers>
            <AdaptiveTrigger MinWindowWidth="0" />
          </VisualState.StateTriggers>

          <VisualState.Setters>
            <Setter Target="RootGrid.Padding" Value="12" />
            <Setter Target="RootGrid.FontSize" Value="12" />
          </VisualState.Setters>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  </StackPanel>
</Page>