WPF Data Binding a UserControl

Question

I am new to WPF and I'm using the MVVM pattern.

I have a WPF UserControl with a Grid. The Grid has two columns. The first is for selecting purposes and the second to display another UserControl.

I know how to display a user control within the .xaml:

<local:ViewSecurityCF Grid.Column="1" Grid.Row="0"/>

But now I want to do Data Binding if possible with different UserControls.

The only option for me at this point is to create a tag for each UserControl I want to use, and Data Bind their Visibility property.

But from a programming perspective it would consume so much memory and thus I'm looking for a more efficient way to do it.

Any help would be appreciated.

Thanks.

Edit (My current solution):

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="4*" />
        <ColumnDefinition Width="6*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <TextBlock Text="Cellular View" Grid.ColumnSpan="2" Style="{StaticResource UXHeaderTextStyle}"></TextBlock>
    <local:ViewBillingLevel Grid.Row="1" Grid.Column="1" Visibility="{Binding  BillingLevelVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewCity Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewCityVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewClientSite Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewClientSiteVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewCompany Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewCompanyVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewCompanyBillingLevel Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewCompanyBillingLevelVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewCompanyGroup Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewCompanyGroupVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewContractService Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewContractServiceVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewDeviceMake Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewDeviceMakeVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewDeviceModel Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewDeviceModelVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewPackage Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewPackageVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewProvince Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewProvinceVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewServiceProvider Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewServiceProviderVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewStatus Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewStatusVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
    <local:ViewSuburb Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewSuburbVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>
</Grid>

But like I said when I open this window it lags because its loading all the UserControls. If it is possible I want one of these and bind the different UserControls to it:

<local:ViewClientSite Grid.Row="1" Grid.Column="1" Visibility="{Binding  ViewClientSiteVisibility}" Width="Auto" Height="Auto" Margin="{Binding UserControlMargin}"/>

I didnt get what you want to achieve. Can you please add what you have done and what you want to achieve — Naresh Ravlani, Apr 13 '17 at 08:42

score 0 · Accepted Answer · answered Apr 13 '17 at 09:25

0

Instead of creating all of them at once, you can place ContentPresenter that will bind to a property that will host a ViewModel.

Under the main page Resources define DataTemplate for each of the viewmodel(using DataType instead of x:Key), each one will host another UserControl.

answered Apr 13 '17 at 09:25

Mishka

508
3
5

Thanks, here is a few links that helped me with the information you provided. [link1](http://stackoverflow.com/questions/15367115/load-multiple-usercontrols-on-wpf-window) [link2](http://stackoverflow.com/questions/29679847/use-binding-to-change-usercontrol-in-a-grid) – Elmer Apr 13 '17 at 11:47

WPF Data Binding a UserControl

1 Answers1