WPF, Caliburn.Micro and Dapper ComboBoxes

Question

I am just new to WPF, Caliburn.Micro and Dapper. I have three combo boxes: the first one is for the region, the second one is for the provinces in the particular selected region and the third one are the cities in the particular selected province. What I want to achieve is that when I selected a particular region it will display all the provinces in that region, the same with the province combo box, when selected it will display all the cities associated with that province. Can this be done in a single method? Here is my code so far.

DataAccess

public List<RegionModel> GetRegion_All()
    {
        List<RegionModel> output;

        using (IDbConnection connection = new System.Data.SqlClient.SqlConnection(GlobalConfig.CnnString(db)))
        {
            output = connection.Query<RegionModel>("dbo.spRegion_GetAll").ToList();
            var p = new DynamicParameters();


            foreach (RegionModel region in output)
            {
                p = new DynamicParameters();
                p.Add("@RegionId", region.Id);
                region.Provinces = connection.Query<ProvinceModel>("dbo.spProvince_ByRegion", p, commandType: CommandType.StoredProcedure).ToList();


                foreach (ProvinceModel province in region.Provinces)
                {
                    p = new DynamicParameters();
                    p.Add("@ProvinceId", province.Id);
                    region.Cities = connection.Query<CityModel>("dbo.spCity_ByProvince", p, commandType: CommandType.StoredProcedure).ToList();
                }
            }
        }
           return output;
    }

Models

  public class RegionModel
{
    public int Id { get; set; }
    public string Region { get; set; }
    public string RegionName { get; set; }
    public List<ProvinceModel> Provinces { get; set; } = new List<ProvinceModel>();
    public List<CityModel> Cities { get; set; } = new List<CityModel>();
    public List<BarangayModel> Barangays { get; set; } = new List<BarangayModel>();
}

 public class ProvinceModel
{
    public int Id { get; set; }
    public string Province { get; set; }
    public int RegionId { get; set; }

}

  public class CityModel
{
    public int Id { get; set; }
    public string City { get; set; }
    public int ProvinceId { get; set; }
    public int ZipCode { get; set; }
}

ViewModel

 public class ShellViewModel : Screen
{
    private BindableCollection<RegionModel> _region;
    private RegionModel _selectedRegion;
    private ProvinceModel _selectedProvince;

    public ShellViewModel()
    {
        GlobalConfig.InitializeConnections(DatabaseType.Sql);
        Region = new BindableCollection<RegionModel>(GlobalConfig.Connection.GetRegion_All());
    }

    public BindableCollection<RegionModel> Region
    {
        get { return _region; }
        set
        {
            _region = value;
        }
   }

    public RegionModel SelectedRegion
    {
        get { return _selectedRegion; }
        set
        {
            _selectedRegion = value;
            NotifyOfPropertyChange(() => SelectedRegion);
        }
    }

    public ProvinceModel SelectedProvince
    {
        get { return _selectedProvince; }
        set
        {
            _selectedProvince = value;
            NotifyOfPropertyChange(() => SelectedRegion);
        }
    }

View

 <Window x:Class="WPFUI.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WPFUI.Views"
    mc:Ignorable="d" WindowStartupLocation="CenterScreen"
    Title="ShellView" Height="450" Width="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <ComboBox Grid.Row="0" x:Name="Region" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding RegionName}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>


    <ComboBox Grid.Row="1" x:Name="SelectedRegion_Provinces" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Province}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>


    <ComboBox Grid.Row="2" x:Name="SelectedRegion_Cities" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding City}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

Most of my codes ideas are from the tutorials I found in youtube, since references and materials for WPF, Caliburn.Micro and Dapper are very hard to find. Please be patient with my code :)

Frenchy · Accepted Answer · 2020-04-27T05:57:01.890

You have lot of mistake and you dont use the power of Caliburn

The wpf definition:

with Caliburn if you give name Region for combobox, it waits a bindableCollection with same name (Region) and SelectedItem is named SelectedRegion (see name convention with Caliburn). So i choose Region, Province & City

In the different models i have renamed all strings RegionName, ProvinceName and CityName.

    <ComboBox Grid.Row="0" x:Name="Region" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding RegionName}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>


    <ComboBox Grid.Row="1" x:Name="Province" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding ProvinceName}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>


    <ComboBox Grid.Row="2" x:Name="City" >
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding CityName}" />
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

then, i have modified your class definition:

public class RegionModel:PropertyChangedBase
{
    public int Id { get; set; }
    public string Region { get; set; }
    public string RegionName { get; set; }
    // each Region has its Provinces
    public List<ProvinceModel> Provinces { get; set; } = new List<ProvinceModel>();
}

public class ProvinceModel:PropertyChangedBase
{
    public int Id { get; set; }
    public string ProvinceName { get; set; }
    public int RegionId { get; set; }
    // each Province has its Cities
    public List<CityModel> Cities { get; set; } = new List<CityModel>();
}

public class CityModel:PropertyChangedBase
{
    public int Id { get; set; }
    public string CityName { get; set; }
    public int ProvinceId { get; set; }
    public int ZipCode { get; set; }
}

Then in ViewModel i add the different BindableCollection Region, Province & City dont forget to add

using Caliburn.Micro;

in the using definion. Then Add the Selected Definition

public class ShellViewModel : Screen
{
    private RegionModel selectedRegion;
    private ProvinceModel selectedProvince;
    private CityModel selectedCity;
    private BindableCollection<RegionModel> _region;
    private BindableCollection<ProvinceModel> _province;
    private BindableCollection<CityModel> _city;
    public BindableCollection<RegionModel> Region
    {
        get { return _region; }
        set
        {
            _region = value;
            NotifyOfPropertyChange(() => Region);
        }
    }
    public BindableCollection<ProvinceModel> Province
    {
        get { return _province; }
        set
        {
            _province = value;
            NotifyOfPropertyChange(() => Province);
        }
    }
    public BindableCollection<CityModel> City
    {
        get { return _city; }
        set
        {
            _city = value;
            NotifyOfPropertyChange(() => City);
        }
    }

    public RegionModel SelectedRegion
    {
        get { return selectedRegion; }

        set
        {
            selectedRegion = value;
            NotifyOfPropertyChange(() => SelectedRegion);
            Province.Clear();
            Province.AddRange(selectedRegion.Provinces);
            NotifyOfPropertyChange(() => Province);
        }
    }
    public ProvinceModel SelectedProvince
    {
        get { return selectedProvince; }

        set
        {
            selectedProvince = value;
            NotifyOfPropertyChange(() => SelectedProvince);
            City.Clear();
            City.AddRange(selectedProvince.Cities);
            NotifyOfPropertyChange(() => City);
        }
    }
    public CityModel SelectedCity
    {
        get { return selectedCity; }

        set
        {
            selectedCity = value;
            NotifyOfPropertyChange(() => SelectedCity);
        }
    }


    public ShellViewModel()
   {
        // to DO INITIALIZE Regions
        //       
        Province = new BindableCollection<ProvinceModel>();
        City = new BindableCollection<CityModel>();
        Region = new BindableCollection<RegionModel>(Regions);
   }

and you have a functional sample

Each time you select a region, the associated provinces are loaded and same thing if you select a province for the associated Cities

WPF, Caliburn.Micro and Dapper ComboBoxes

1 Answers1