Click here to Skip to main content
15,886,829 members
Articles / Desktop Programming / WPF

WPF Form Designer Prototype (MVVM)

Rate me:
Please Sign up or sign in to vote.
4.83/5 (31 votes)
3 Apr 2013CPOL9 min read 79.3K   3.4K   108  
Form designer with editable display properties and bindings. Generates XAML forms.
<Grid ShowGridLines="True" Background="#FFF0EDD1" Name="myGrid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:wpffdc="clr-namespace:WPFFormDesigner.Converters;assembly=WPFFormDesigner" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
  </Grid.RowDefinitions>
  <Border BorderThickness="2,2,2,2" BorderBrush="#FF000000" Background="#FF808080" Width="100" Height="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.25" Grid.Column="1" Grid.Row="0" />
  <TextBlock Text="Drag control here" Foreground="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowDrop="True" Grid.Column="1" Grid.Row="0" />
  <Border BorderThickness="2,2,2,2" BorderBrush="#FF000000" Background="#FF808080" Width="100" Height="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.25" Grid.Column="2" Grid.Row="0" />
  <TextBlock Text="Drag control here" Foreground="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowDrop="True" Grid.Column="2" Grid.Row="0" />
  <Border BorderThickness="2,2,2,2" BorderBrush="#FF000000" Background="#FF808080" Width="100" Height="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.25" Grid.Column="3" Grid.Row="0" />
  <TextBlock Text="Drag control here" Foreground="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowDrop="True" Grid.Column="3" Grid.Row="0" />
  <Border BorderThickness="2,2,2,2" BorderBrush="#FF000000" Background="#FF808080" Width="100" Height="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.25" Grid.Column="4" Grid.Row="0" />
  <TextBlock Text="Drag control here" Foreground="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowDrop="True" Grid.Column="4" Grid.Row="0" />
  <Border BorderThickness="2,2,2,2" BorderBrush="#FF000000" Background="#FF808080" Width="100" Height="60" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.25" Grid.Column="5" Grid.Row="0" />
  <TextBlock Text="Drag control here" Foreground="#FF000000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" AllowDrop="True" Grid.Column="5" Grid.Row="0" />
  <StackPanel Orientation="Horizontal" Grid.Column="6" Grid.Row="0">
    <Ellipse Tag="btn_Add" Width="20" Height="20" Margin="10,5,5,5" ToolTip="Add Grid Row below">
      <Ellipse.Fill>
        <ImageBrush ImageSource="pack://application:,,,/WPFFormDesigner;component/Resources/Icons/insert-below.png" />
      </Ellipse.Fill>
    </Ellipse>
    <Ellipse Tag="btn_Remove" Width="20" Height="20" Margin="10,5,10,5" ToolTip="Remove current Grid Row">
      <Ellipse.Fill>
        <ImageBrush ImageSource="pack://application:,,,/WPFFormDesigner;component/Resources/Icons/delete.png" />
      </Ellipse.Fill>
    </Ellipse>
  </StackPanel>
  <Label Width="Auto" Height="Auto" Margin="3,7,3,7" ToolTip="Label" Grid.Column="0" Grid.Row="0">
    <Label.ContextMenu>
      <ContextMenu ItemsSource="{x:Null}">
        <MenuItem Command="{Binding Path=PropertiesCommand}" Header="Show Properties" ItemsSource="{x:Null}">
          <MenuItem.CommandParameter>
            <Binding Path="PlacementTarget" RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=ContextMenu, AncestorLevel=1}">
              <Binding.Converter>
                <wpffdc:WPFPropertyGridProxyConverter />
              </Binding.Converter>
            </Binding>
          </MenuItem.CommandParameter>
        </MenuItem>
        <MenuItem Command="{Binding Path=RemoveControlCommand}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu, AncestorLevel=1}}" Header="Remove Control" ItemsSource="{x:Null}" />
        <MenuItem Command="{Binding Path=MergeCellsCommand}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu, AncestorLevel=1}}" Header="Merge Cells" ItemsSource="{x:Null}" />
      </ContextMenu>
    </Label.ContextMenu>Label</Label>
</Grid>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
Sr. application developer currently developing desktop and web applications for the specialty insurance sector. Data integration specialist, interested in learning the latest .Net technologies.

Comments and Discussions