Let Controls Appear dynamically in WPF Form C# VS 2010

Question

I have an UserInput Form on my application with an abundance of textboxes and datagrids. Some clients wont use all of them everytime... So I would like some to appear dynamically once the user clicks on a button or checkBox.

I've tried searching for help online, but with no luck.

Thank you in advance for any advice

Answer 1

Since you are just started with WPF, i thought of showing you some sample that can throw light on other stuff like Triggers etc., which might help you..

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300"
        >
    <StackPanel>

        <ToggleButton x:Name="tgbtnTextBoxVisibility" Click="tgbtnTextBoxVisibility_Click" >
            <!-- Define the Style Trigger, to toggle the Text on the Toggle Button. If the ToggleButton is unchecked then display 'Hide TextBoxes'-->
            <!---Do not set the 'Content' property directly on the control, which overrides the 'Content' defined in Styles/Triggers, because of property precedence-->
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Setter Property="Content" Value="Show TextBoxes"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked"   Value="True" >
                            <Setter Property="Content" Value="Hide TextBoxes"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>

        <!-- When the StackPanel below is shown, you can observe the 'Show TextBlocks' button automatically slides down-->
        <StackPanel x:Name="spTextBoxes" Visibility="Collapsed">
            <TextBox x:Name="txtName" Width="100" Height="30"/>
            <TextBox x:Name="txtCompany" Width="100" Height="30"/>
        </StackPanel>

        <ToggleButton x:Name="tgbtnTextBlockVisibility" Click="tgbtnTextBlockVisibility_Click">
            <ToggleButton.Style>
                <Style TargetType="ToggleButton">
                    <Setter Property="Content" Value="Show TextBlocks"/>
                    <Style.Triggers>
                        <Trigger Property="IsChecked"   Value="True" >
                            <Setter Property="Content" Value="Hide TextBlocks"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
        <StackPanel x:Name="spTextBlocks" Visibility="Collapsed">
            <!--'Text' property of TextBlock is directly bound to the corresponding TextBox's 'Text' properrty, which changes as you type in the text into source TextBox-->
            <TextBlock x:Name="tbkName" Text="{Binding ElementName=txtName,Path=Text}"  Width="100" Height="30"/>
            <TextBlock x:Name="tbkCompany" Text="{Binding ElementName=txtCompany,Path=Text}" Width="100" Height="30"/>
        </StackPanel>

    </StackPanel>
</Window>

And in the code-behind i am setting the visibility of the corresponding stackpanels. Note: Changing the Visiblity with ValueConverter, could be more appropriate.

    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void tgbtnTextBoxVisibility_Click(object sender, RoutedEventArgs e)
        {
            ToggleButton tgbtnTextBoxes=sender as ToggleButton;

            if (tgbtnTextBoxes.IsChecked.HasValue && tgbtnTextBoxes.IsChecked.Value)
                spTextBoxes.Visibility = Visibility.Visible;
            else
                spTextBoxes.Visibility = Visibility.Collapsed; //Note: Visibility.Collapsed will resize the layout where as Visibility.Hidden will not.
        }

        private void tgbtnTextBlockVisibility_Click(object sender, RoutedEventArgs e)
        {
            ToggleButton tgbtnTextBlocks = sender as ToggleButton;

            if (tgbtnTextBlocks.IsChecked.HasValue && tgbtnTextBlocks.IsChecked.Value)
                spTextBlocks.Visibility = Visibility.Visible;
            else
                spTextBlocks.Visibility = Visibility.Collapsed; //Note: Visibility.Collapsed will resize the layout where as Visibility.Hidden will not.
        }
    }

Answer 2

1) First basic question - do you need an abundance of textboxes and datagrids? This sounds like it has the potential for a confusing user interface. I'd always try to simplify the user interface first.

2) Do the controls have to be in a fixed layout? Is it as simple as turning the visibility of controls on and off?

3) If the controls layout must be dynamic, you could dynamically add controls ".Add(new Button(...))" to a list/grid. I'm not sure I'd recommend this approach for anything more than a few simple changes.

4) Are there controls that are common to all clients?

5) If there are common controls then consider using a UserControl to group those and adding them dynamically to the form using a ContentPresenter or other control (the exact way of doing this might depend on whether you are using an MVVM architecture or not). You can bind a contentpresenter to a property that is a UserControl.

6) The worst case is where the layout has to be so flexible for each client that you just have to create a new UserControl for each client. Your underlying data objects that you bind to could stay the same but just have different aspects exposed through each UserControl.

How experienced are you with WPF? To do this sort of thing really effectively you need to be researching databinding, views, content presenters, lists/grids, UserControls.