Setting control values in an instance of a user control WPF

Question

I am new to WPF and MVVM and trying to follow this design, I have created a window with multiple user controls (10 of each) on it. These user controls will hold a value that should be able to be entered by the User and sent back to the Database.

The issue I have is I am creating the User Controls Pragmatically in a canvass and do not know how to use these instances to set the values on the control from my View Model where I have a SaveMethod that is binded to a Save Button to save the data into the Database. Thanks for the help.

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        ClientRatesViewModel viewModel = new ClientRatesViewModel();
        DataContext = viewModel;
        viewModel.GetChargeUnits();

        int previousTopPreRate = 10;
        foreach (var rate in viewModel.ClientRatesPreAwr)
        {
            PreAwr preAwr = new PreAwr();
            preAwr.tbPreAwrRate.Text = rate.ClientRatesPreAwr;
            PreRatesCanvas.Children.Add(preAwr);
            preAwr.Width = 500;
            Canvas.SetLeft(preAwr, 10);
            Canvas.SetTop(preAwr, previousTopPreRate + 10);
            previousTopPreRate += +30;
        }

        int previousTopPostRate = 10;
        foreach (var rate in viewModel.ClientRatesPostAwr)
        {
            PostAWR postAwr = new PostAWR();
            postAwr.tbPostAwrRate.Text = rate.ClientRatesPostAwr;
            PostRatesCanvas.Children.Add(postAwr);
            postAwr.Width = 500;
            Canvas.SetLeft(postAwr, 10);
            Canvas.SetTop(postAwr, previousTopPostRate + 10);
            previousTopPostRate += +30;
        }
    }
}

ItemsControl XAML:

<ItemsControl Name="icPreAwr" Margin="10,46,10,10">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,0,0,5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding ClientRatesPreAwr }" />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Delete all that code and use proper XAML. Use ItemsControls (or derived controls, e.g. ListBoxes) to display collections of data items. Start reading here: [Data Templating Overview](https://msdn.microsoft.com/en-us/library/ms742521.aspx). — Clemens, Apr 03 '15 at 18:29
Nope. Nope. Nopenopenope. Noooooope. Here's how to do it correctly (not 100% match to your question, but follow along and you will understand): http://stackoverflow.com/a/29132115/1228 — , Apr 06 '15 at 15:23
@Clemens Thanks, is is possible to add a User Control to a Listbox, or do you mean create Listbox items containing the data in my User Control? — David B, Apr 08 '15 at 11:43
You can of course use a UserControl in the ItemTemplate of a ListBox, if necessary. Just add it to the element tree in the DataTemplate. — Clemens, Apr 08 '15 at 11:54

score 0 · Accepted Answer · answered Apr 04 '15 at 07:38

Technically your are beginning right because you are defining the view and the datacontext. It is recommended to use XAML but if you are beginning there is no issue and no contradiction with MVVM because your code behind is View Code behind.

But here begins the problems, for instance instead of using a foreach, you should use a ItemsControl with an itemtemplate that will be a PreAwr and ItemsSource ClientRatesPreAwr. That will feed your itemscontrol and fill with the PreAwr by itseld PreAwr UserControl has a tbPreAwrRate set the content to {Binding ClientRatesPreAwr} and it will fill with that value.

If you need to make this by code, the properties of the controls are dependency properties and you can bind them by code using

https://msdn.microsoft.com/en-us/library/cc838207%28v=vs.95%29.aspx

I hope it helps you, I strongly recommend you to make the step to design in XAML if the project rules can be done in that way

Indeed my article could be helpful for you http://bit.ly/1CoYRkQ

Thanks is there an example you can provide using my code for this? I am struggling to get this working I have added what I have so far to the question, thanks — David B, Apr 08 '15 at 11:40

score 0 · Answer 2 · answered Apr 08 '15 at 13:41

For anyone reading this I managed to achieve this by doing the following in my XAML.

<ListBox ItemsSource="{Binding ClientRatesPreAwr}"
        KeyboardNavigation.TabNavigation="Continue" Margin="0,58,0,69">
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid Margin="2" Focusable="False">
                   <UserControls:PreAwr />
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>

Setting control values in an instance of a user control WPF

2 Answers2