Click here to Skip to main content
15,887,683 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.4K   3.4K   108  
Form designer with editable display properties and bindings. Generates XAML forms.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                    xmlns:pg="clr-namespace:System.Windows.Controls.WpfPropertyGrid;assembly=System.Windows.Controls.WpfPropertyGrid" 
                    xmlns:Converters="clr-namespace:WPFFormDesigner.Converters" x:Class="WPFFormDesigner.Resources.DataTemplates.PropertiesViewDataTemplates" 
                    x:ClassModifier="public">

    <!-- Gold Form Designer Expander Visibility Converter Flag-->
    <DataTemplate x:Key="ExpanderProxyVisibilityFlagEditor_Inline">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <!--<CheckBox Grid.Column="0" IsChecked="{Binding Path=AddListViewVisibilityConverter,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>-->
            <CheckBox Grid.Column="0" IsChecked="{Binding Value,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
        </Grid>
    </DataTemplate>
    
    <!-- Gold Form Designer TextBoxProxy -->
	<DataTemplate x:Key="TextProxyEditor_Inline">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="1*" />
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>
			<TextBox Grid.Column="0" Text="{Binding StringValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" IsReadOnly="{Binding IsReadOnly}" />
			<Button Grid.Column="1" Margin="2,0,0,0" Content="[Data Binding...]" Width="Auto" Command="pg:PropertyEditorCommands.ShowExtendedEditor" CommandParameter="{Binding}" />
		</Grid>
	</DataTemplate>
	<DataTemplate x:Key="TextProxyEditor_Extended">
		<!--<Grid Name="MyGrid" Width="{Binding Path=ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ContentPresenter}}}">-->
        <Grid Name="MyGrid">
			<Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
				<RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
			</Grid.RowDefinitions>
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="Auto" />
				<ColumnDefinition Width="Auto" />
			</Grid.ColumnDefinitions>

			<Grid.Resources>
				<Converters:BindingInfoToBindingEditorControlsConverter x:Key="BindingInfoConverter" />
				<Converters:StringLengthConverter x:Key="MyStringLengthConverter" />
                <Style x:Key="PropertiesLabelStyle" TargetType="{x:Type TextBlock}">
                    <Setter Property="HorizontalAlignment" Value="Right" />
                    <Setter Property="Margin" Value="0,0,10,0" />
                </Style>
                <Converters:DatePickerConverter x:Key="DatePickerConverter"/>
            </Grid.Resources>
			<TextBlock Grid.Row="0" Grid.Column="0" Text="Path:" Style="{StaticResource PropertiesLabelStyle}"/>
            <!--<TextBox Grid.Row="0" Grid.Column="1" Name="txt_Path" Text="{Binding ElementName=cmb_Bindings, Path=SelectedItem}"/>-->
            <TextBox Grid.Row="0" Grid.Column="1" Name="txt_Path"/>
            <!--<TextBlock Grid.Row="1" Grid.Column="0" Text="Bindings:" Style="{StaticResource PropertiesLabelStyle}"/>-->
            <ComboBox Grid.Row="1" Grid.Column="0" Name="cmb_Bindings" Width="10"/>
            <Button Grid.Row="1" Grid.Column="1" Name="btn_SetBinding" Content="Copy Path to TextBox" Click="Btn_SetBinding_OnClick"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="Mode:" Style="{StaticResource PropertiesLabelStyle}"/>
			<ComboBox Grid.Row="2" Grid.Column="1" Name="cmb_Mode"   ItemsSource="{Binding Mode=OneWay,
                      RelativeSource={RelativeSource AncestorType=pg:PropertyGrid}, Path=SelectedObject.BindingModeList}" SelectedValue="TwoWay" />
            <TextBlock Grid.Row="3" Grid.Column="0" Text="UpdateSourceTrigger:"  Style="{StaticResource PropertiesLabelStyle}"/>
			<ComboBox Grid.Row="3" Grid.Column="1" Name="cmb_UpdateSourceTrigger"   ItemsSource="{Binding Mode=OneWay,
                      RelativeSource={RelativeSource AncestorType=pg:PropertyGrid}, Path=SelectedObject.UpdateSourceTriggerList}" SelectedValue="PropertyChanged" />
            <TextBlock Grid.Row="4" Grid.Column="0" Text="ElementName:" Style="{StaticResource PropertiesLabelStyle}"/>
            <TextBox Grid.Row="4" Grid.Column="1" Name="txt_ElementName"/>
            <TextBox Name="txt_Binding" TextWrapping="Wrap" AcceptsReturn="True" MaxWidth="{Binding Path=ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}}}" Visibility="Collapsed">
				<TextBox.Text>
					<!-- Multibinding to send all different parameters to build a Binding String-->
					<MultiBinding x:Name="MyMB" Converter="{StaticResource BindingInfoConverter}" ConverterParameter="false">
						<Binding ElementName="txt_Path" Path="." />
						<Binding RelativeSource="{RelativeSource AncestorType=pg:PropertyGrid}" Path="SelectedObject" />
                        <Binding ElementName="cmb_Bindings" Path="." />
					</MultiBinding>
				</TextBox.Text>
			</TextBox>
			<Button Grid.Row="5" Grid.Column="1" Content="Set Bindings" Click="OnSetBindings_Click" IsEnabled="{Binding ElementName=txt_Path,Path=Text.Length}"/>

		</Grid>
	</DataTemplate>

    <!-- Gold Form Designer ListViewProxy Columns Etidor -->
    <DataTemplate x:Key="ListViewProxy_Columns_Inline">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Button Grid.Column="1" Margin="2,0,0,0" Content="[...]" Width="Auto" Command="pg:PropertyEditorCommands.ShowExtendedEditor" CommandParameter="{Binding}" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="ListViewProxy_Columns_Extended">
        <Grid Name="ListViewColumnEditorGrid" DataContext="{Binding RelativeSource={RelativeSource AncestorType=pg:PropertyGrid}, Path=SelectedObject}">
            <Grid.Resources>
                <Style x:Key="PropertiesLabelStyle" TargetType="{x:Type TextBlock}">
                    <Setter Property="HorizontalAlignment" Value="Right" />
                    <Setter Property="Margin" Value="0,0,10,0" />
                </Style>
                <Converters:BindingInfoToBindingEditorControlsConverter x:Key="BindingInfoConverter" />
                <Converters:StringLengthConverter x:Key="MyStringLengthConverter" />
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="Column:" Style="{StaticResource PropertiesLabelStyle}"/>
            <ComboBox Grid.Row="0" Grid.Column="1" Name="cmb_Column"   ItemsSource="{Binding Mode=OneWay,Path=ColumnList}"
                      DisplayMemberPath="Key" SelectedValuePath="Value"
                      SelectedItem="{Binding Path=SelectedColumnKVP,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                      IsEnabled="{Binding Path=IsColumnComboEnabled}">
            </ComboBox>
            <Expander Header="Column Settings" Grid.Row="1" Grid.ColumnSpan="2" IsExpanded="{Binding Path=IsColumnSettingsExpanded}">
                <Expander.Style>
                    <Style TargetType="Expander">
                        <!-- Only enable expander when valid Column has been selected-->
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=cmb_Column, Path=SelectedItem}" Value="{x:Null}">
                                <Setter Property="IsEnabled" Value="False"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Expander.Style>
                <Border BorderBrush="Black" BorderThickness="2" CornerRadius="2">
                    <Grid Name="ColumnInfoGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="Header:" Style="{StaticResource PropertiesLabelStyle}"/>
                        <TextBox Grid.Row="0" Grid.Column="1" Name="txt_Header" Text="{Binding Path=SelectedColumnHeader,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
                        <TextBlock Grid.Row="1" Grid.Column="0" Text="Control Type:" Style="{StaticResource PropertiesLabelStyle}"/>
                        <ComboBox Grid.Row="1" Grid.Column="1" Name="cmb_ControlType"   
                                  ItemsSource="{Binding Path=ControlTypes}"
                                  DisplayMemberPath="Key" SelectedValuePath="Value"
                                  SelectedValue="{Binding Path=SelectedColumnTemplateControlType,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                  IsSynchronizedWithCurrentItem="True"/>
                        <TextBlock Grid.Row="2" Grid.Column="0" Text="Path:" Style="{StaticResource PropertiesLabelStyle}"/>
                        <TextBox Grid.Row="2" Grid.Column="1" Name="txt_Path" Text="{Binding Path=SelectedColumnBindingPath,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
                        <TextBlock Grid.Row="3" Grid.Column="0" Text="Mode:" Style="{StaticResource PropertiesLabelStyle}"/>
                        <ComboBox Grid.Row="3" Grid.Column="1" Name="cmb_Mode"
                                  IsSynchronizedWithCurrentItem="True" 
                                  ItemsSource="{Binding Path=BindingModeList}" 
                                  SelectedValue="{Binding Path=SelectedColumnTemplateBindingMode,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
                        <TextBlock Grid.Row="4" Grid.Column="0" Text="UpdateSourceTrigger:" 
                                   Style="{StaticResource PropertiesLabelStyle}"/>
                        <ComboBox Grid.Row="4" Grid.Column="1" Name="cmb_UpdateSourceTrigger" 
                                  IsSynchronizedWithCurrentItem="True" 
                                  ItemsSource="{Binding Path=UpdateSourceTriggerList}" 
                                  SelectedValue="{Binding Path=SelectedColumnTemplateBindingUpdateSourceTrigger,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />
                        <TextBlock Grid.Row="5" Grid.Column="0" Text="Width"/>
                        <TextBox Grid.Row="5" Grid.Column="1" Name="txt_Width" Text="{Binding Path=SelectedColumnWidth,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>                        
                        <TextBlock Grid.Row="6" Grid.Column="0" Text="Is RefData Combo?"/>
                        <CheckBox Grid.Row="6" Grid.Column="1" IsChecked="{Binding Path=IsRefDataCombo,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
                        <Button Grid.Row="7" Grid.Column="0" Grid.ColumnSpan="2" Content="Set Template" 
                                Command="{Binding Path=SetColumnTemplateCommand}" 
                                CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
                        <!-- Multibinding to send all different parameters to build a Binding String
                        <TextBox Name="txt_Binding" TextWrapping="Wrap" AcceptsReturn="True" MaxWidth="{Binding Path=ActualWidth,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}}}" Visibility="Collapsed">
                            <TextBox.Text>
                                <MultiBinding x:Name="MyMB" Converter="{StaticResource BindingInfoConverter}" ConverterParameter="false">
                                    <Binding ElementName="txt_Path" Path="." />
                                    <Binding RelativeSource="{RelativeSource AncestorType=pg:PropertyGrid}" Path="SelectedObject" />
                                    <Binding ElementName="ColumnInfoGrid" Path="."/>
                                </MultiBinding>
                            </TextBox.Text>
                        </TextBox>-->
                        <!--<Button Grid.Row="5" Grid.Column="1" Content="Set Column Template" Click="OnSetColumnTemplate_Click" IsEnabled="{Binding ElementName=txt_Path,Path=Text.Length}"/>-->
                    </Grid>
                </Border>
            </Expander>
            <!--<Button Grid.Row="2" Grid.ColumnSpan="2" Content="Add Column" Click="OnAddColumn_Click"/>-->
            <Button Grid.Row="2" Grid.ColumnSpan="2" Content="Add Column" Command="{Binding Path=AddColumnCommand}" 
                    CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
            <CheckBox Grid.Row="3" Grid.ColumnSpan="2" Content="Show Remove Button?" IsChecked="{Binding Path=ShowRemoveButton,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" IsEnabled="{Binding Path=IsColumnComboEnabled}"/>
            <Button Grid.Row="4" Grid.Column="1" Content="Done" Click="OnDoneEditingListViewColumns_Click" IsEnabled="{Binding ElementName=txt_Path,Path=Text.Length}"/>
        </Grid>
    </DataTemplate>
</ResourceDictionary>

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