locked
Universal, MVVM : Creating Controls at Run Time in XAML(View)

    Question

  • Hi ,

    I am new in MVVM. I want to add control in in view from viem model at Run time. If i am using without mvvm then in code behind I can write

     public BlankPage()
            {
                this.InitializeComponent();
                addcontrol();
               
            }
    
            public void addcontrol()
            {
                TextBlock tb = new TextBlock();
                tb.Text = "Hello..!!";
                tb.FontSize = 25;
                tb.VerticalAlignment = VerticalAlignment.Top;
                tb.HorizontalAlignment = HorizontalAlignment.Right;
                LayoutRoot.Children.Add(tb);
    
            }
    

    then how can I write this thing from view-model so TextBlock can be added in view.

    Thank You.


    shah


    Hi also check these links please Passing parameters to View-Model from View with command.
    • Edited by MauliKShah Monday, January 12, 2015 11:54 AM
    Monday, January 12, 2015 11:35 AM

Answers

  • Hi,

    You can use ContentControl to add the content to a view at run time. By define a ContentControl in a Grid, you can bind the ContentControl Content property to a ViewModel property and set the Grid DataContext to the ViewModel.

    There are some main codes below to add some controls in a page:

    In View Page XAML file:

    <Page.Resources>
    
            <local:MainPageViewModel x:Key="mainviewmodel"/>
    
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource mainviewmodel}">
    
            <Grid.Children>
    
                <ContentControl Content="{Binding Sp}"></ContentControl>
    
            </Grid.Children>
    
            <!--<local:CustomerView Width="400" Height="300"/>-->
    
        </Grid>
    

    In ViewModel.cs:

    public class MainPageViewModel : ViewModelBase<MainPageViewModel>
    
        {     
    
     
    
                public MainPageViewModel() { CreateControl(); }
    
    
              StackPanel sp;
    
    
            public StackPanel Sp
    
            {
    
                get { return sp; }
    
                set { sp = value; }
    
            }
    
            public void CreateControl()
    
            {
    
                sp = new StackPanel();
    
                sp.Orientation = Orientation.Vertical;
    
                StackPanel sp1 = new StackPanel();
    
                sp1.Orientation = Orientation.Horizontal;
    
                TextBlock tb1 = new TextBlock();
    
                tb1.Text = "Customer ID";
    
                tb1.Margin = new Thickness(20, 20, 10, 10);
    
                TextBox txt1 = new TextBox();
    
                txt1.Width = 120;
    
                txt1.Margin = new Thickness(20, 15, 0, 10);
    
                sp1.Children.Add(tb1);
    
                sp1.Children.Add(txt1);
    
                sp.Children.Add(sp1);
    
    
    
            }
    
    
        }
    

    And I share the project to OneDrive:

    http://1drv.ms/17CeYV8

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

    • Marked as answer by MauliKShah Friday, January 16, 2015 9:47 AM
    Tuesday, January 13, 2015 3:35 AM

All replies

  • Hi,

    You can use ContentControl to add the content to a view at run time. By define a ContentControl in a Grid, you can bind the ContentControl Content property to a ViewModel property and set the Grid DataContext to the ViewModel.

    There are some main codes below to add some controls in a page:

    In View Page XAML file:

    <Page.Resources>
    
            <local:MainPageViewModel x:Key="mainviewmodel"/>
    
        </Page.Resources>
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource mainviewmodel}">
    
            <Grid.Children>
    
                <ContentControl Content="{Binding Sp}"></ContentControl>
    
            </Grid.Children>
    
            <!--<local:CustomerView Width="400" Height="300"/>-->
    
        </Grid>
    

    In ViewModel.cs:

    public class MainPageViewModel : ViewModelBase<MainPageViewModel>
    
        {     
    
     
    
                public MainPageViewModel() { CreateControl(); }
    
    
              StackPanel sp;
    
    
            public StackPanel Sp
    
            {
    
                get { return sp; }
    
                set { sp = value; }
    
            }
    
            public void CreateControl()
    
            {
    
                sp = new StackPanel();
    
                sp.Orientation = Orientation.Vertical;
    
                StackPanel sp1 = new StackPanel();
    
                sp1.Orientation = Orientation.Horizontal;
    
                TextBlock tb1 = new TextBlock();
    
                tb1.Text = "Customer ID";
    
                tb1.Margin = new Thickness(20, 20, 10, 10);
    
                TextBox txt1 = new TextBox();
    
                txt1.Width = 120;
    
                txt1.Margin = new Thickness(20, 15, 0, 10);
    
                sp1.Children.Add(tb1);
    
                sp1.Children.Add(txt1);
    
                sp.Children.Add(sp1);
    
    
    
            }
    
    
        }
    

    And I share the project to OneDrive:

    http://1drv.ms/17CeYV8

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

    • Marked as answer by MauliKShah Friday, January 16, 2015 9:47 AM
    Tuesday, January 13, 2015 3:35 AM
  • Hi thanks it works great for me to generate dynamic form. But I have another question on Same topic. Please help me. I am taking your example and add one button on there. I just want to get user input from TextBox. How it is possible. ?


    shah

    Saturday, January 17, 2015 3:36 AM