mercredi 11 mai 2016

Changing the User Control of Window dynamically in WPF (MVVM)

I am working on wpf mvvm pattern. I have a user control in which i am loading a list of checkboxes in DataGridCheckBoxColumn and binding it to IsSelected property from my viewmodel.

Tha xaml code is like this:

<DataGrid Width="150" Grid.Row="0" Background="LightGray" CanUserAddRows="False"  AutoGenerateColumns="False" HorizontalAlignment="Left" Name="dataGridCustomers" ItemsSource="{Binding Path=UsecaseListItems}" CanUserResizeColumns="False" CanUserResizeRows="False">
            <DataGrid.Columns>


                    <DataGridCheckBoxColumn Binding="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}"  Width="50">

                        <DataGridCheckBoxColumn.HeaderTemplate>
                            <DataTemplate x:Name="dtAllChkBx">
                            <CheckBox Name="cbxAll" FontWeight="Bold" Content="All" IsChecked="{Binding Path=DataContext.AllSelected,RelativeSource={RelativeSource AncestorType=UserControl },Mode=TwoWay}"/>
                            </DataTemplate>
                        </DataGridCheckBoxColumn.HeaderTemplate>
                    </DataGridCheckBoxColumn>

                <DataGridTextColumn Width="85" Binding="{Binding Path=UsecaseName}" Header="UsecaseName"  IsReadOnly="True" >
                    <DataGridColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="FontWeight" Value="Bold"/>
                            <Setter Property="Foreground" Value="Black"></Setter>
                        </Style>
                    </DataGridColumn.HeaderStyle>
                </DataGridTextColumn>



            </DataGrid.Columns>
          </DataGrid>

My HomeViewModel is like this:

private bool _IsSelected;
        public bool IsSelected
        {
            get { return _IsSelected; }
            set
            {
                _IsSelected = value;
                OnPropertyChanged("IsSelected");
            }
        }

        private Control _someUserControl;
        public Control CCS01
        {
            get { return _someUserControl; }
            set { _someUserControl = value; }
        }

        private UserControl _content;

        internal void SetNewContent(UserControl _content)
        {
            ContentWindow = _content;
        }

        public UserControl ContentWindow
        {
            get { return _content; }
            set
            {
                _content = value;
                OnPropertyChanged("ContentWindow");
            }
        }

For my 1st checkbox (CCS01), I have created a view(CCS01.xaml) which contains a few labels and textboxes in grid format.And its corresponding ViewModel is below:

public class CCS01ViewModel: BaseNotifyPropertyChanged
    {
        HomeViewModel _homeViewModel;
        public ICommand OpenUsersCommand { get; private set; }


        public CCS01ViewModel(HomeViewModel mainModel)
        {
            this._homeViewModel = mainModel;
            //this._model = model;
            OpenUsersCommand = new RelayCommand(OpenUsers, CanOpenUsers);
        }

        private void OpenUsers(object _param)
        {
            //UsersPanelViewModel upmodel = new UsersPanelViewModel(_mainModel, _model);
            //UsersPanel up = new UsersPanel();
            //up.DataContext = upmodel;
            //_mainModel.SetNewContent(up);
        }

        private bool CanOpenUsers(object _param)
        {
            return true;
        }

}

I want to load the selected checkbox view in the main UserControl(ExecutionDetails.xaml) . Currently, I am loading it with the first Checkbox view in it by default like this:

<StackPanel>
                                <Grid Name="HostGrid">

                                    <ContentControl Content="{Binding ContentWindow}"/>
                                </Grid>
                            </StackPanel> 

Please suggest me how to bind the view with respective checkboxes user controls dynamically based on the checkbox selection.

The code behind of this(ExecutionDetails.xaml.cs) is like this:

public partial class ExecutionDetails : UserControl
    {

        public ExecutionDetails()
        {
            InitializeComponent();

            HomeViewModel viewmodel = new HomeViewModel();
            CCS01ViewModel ccViewModel = new CCS01ViewModel(viewmodel);

            CCS01 obj = new CCS01();
            obj.DataContext = ccViewModel;
            viewmodel.ContentWindow = obj;
            this.DataContext = viewmodel;
        }
    }




Aucun commentaire:

Enregistrer un commentaire